Design

 

Landing Page Design Analysis

The provided images showcase two variations of a landing page for a university's new student admission system. Both designs follow a clean, modern aesthetic with a similar layout, but use different color palettes to create distinct visual impressions.

1. Overall Layout & Purpose

The page is structured to serve as the initial point of contact for prospective students. Its primary goal is to provide a clear, concise overview of the admission process and encourage users to register. The layout is divided into a few key sections:

• Header: A consistent navigation bar at the top with the university's logo and essential links like "Beranda" (Home), "Tentang" (About), and "Fakultas & Jurusan" (Faculties & Majors). The most prominent elements in the header are the "Daftar Sekarang" (Register Now) and "Masuk" (Login) buttons, which are the main calls to action.

• Hero Section: This is the most visually dominant area of the page. It features a large headline, a sub-heading, a clear call-to-action button, and a supporting image of students.

• Content Sections: Below the hero section, the page presents key information in a grid or card layout, such as "Jalur Seleksi Mahasiswa Baru" (New Student Admission Paths) and potentially other sections like "Gelombang Pendaftaran" (Registration Waves).

2. Key Elements and Their Functionality

• "Pendaftaran Mahasiswa Baru Telah Dibuka!" (New Student Admission is Open!): This bold, direct headline immediately grabs the user's attention. Its function is to communicate the most important message: the admission period is currently active.

• "Wujudkan impianmu di kampus terbaik, daftar sekarang!" (Make your dreams come true at the best campus, register now!): This motivational sub-heading serves as persuasive copy. Its purpose is to appeal to the user's aspirations and build a sense of urgency and excitement.

• "Jalur Sekarang" / "Daftar Sekarang" (Register Now) Button: This is the primary call-to-action (CTA) button. Its bold color and prominent placement guide users to the next step of the admission process. A well-designed CTA is critical for conversion.

• Student Image: The photo of a group of students walking on campus creates a relatable and aspirational feeling. Its function is to build an emotional connection with prospective students by showing them what a positive university experience looks like.

• "Jalur Seleksi Mahasiswa Baru" (New Student Admission Paths) Section: This section presents admission options in a card format, each with a title (e.g., "Jalur Prestasi," "Jalur Reguler"), a short description, and a "Baca Selengkapnya" (Read More) link. This is a crucial element for providing organized information.

  • Functionality: It helps users understand the different application pathways, allowing them to choose the one that best fits their profile. The card layout makes the information easy to digest at a glance.

3. Technical & Aesthetic Differences Between the Two Designs

• Design 1 (Orange/Pink Accents)

  • This design uses a color scheme with hints of warm yellow/orange and a soft pink for buttons and links. The overall feel is bright, vibrant, and energetic.

  • Technical Interpretation: The warm color palette is often used in design to evoke feelings of happiness, creativity, and friendliness. It makes the site feel inviting and less intimidating, which can be a strategic choice for attracting a younger audience.

• Design 2 (Purple Accents)

  • This design uses a cooler color palette with vibrant purple as the primary accent color. The "Daftar Sekarang" button and the borders around the cards are all purple.

  • Technical Interpretation: Purple is a color often associated with sophistication, wisdom, and ambition. Using it in this context lends a more prestigious and serious tone to the university's brand, while still being modern and visually appealing.

In both cases, the designs effectively use white space to create a clean and uncluttered look. The consistent use of a single accent color for all interactive elements is a key UI/UX principle that guides the user's eye and makes the interface more intuitive to navigate.

Dashboard Design Analysis

Based on the image you provided, here is a detailed explanation of the dashboard design, including the purpose of each element.

1. Overall Layout & Purpose

The page you see is a new student admission dashboard. Its purpose is to serve as a central hub for applicants, allowing them to track their progress and complete all necessary application steps in one place. The design is highly focused on usability and clear navigation.

The layout is a single, concise page, which is ideal for a multi-step process. It's built with a clean, grid-based structure, which is a key technical choice for modular design and responsiveness. This ensures the layout will adapt well to various screen sizes, from a large desktop monitor to a small smartphone screen.

2. Key Elements and Their Functions

• Header: The simple, clean header at the top features the Universitas Teknokrat Indonesia logo on the left, serving as a branding element. On the right, a user profile icon indicates that the applicant is logged in, and likely provides access to a personal menu.

• Progress Bar: This is a crucial UI element. The progress bar visually represents the applicant's journey. The filled-in section (in pink) shows completed steps, while the empty section indicates what's left to do. Its function is to provide instant visual feedback, which helps reduce cognitive load and encourages the user to complete the application.

• Content Cards: The main content area is divided into several "cards," each representing a specific application task. This layout choice is a technical practice to break down a complex process into smaller, more manageable parts.

  • "Personal Information" Card: This section is for data entry. It includes fields for personal details like name and contact information. The icons next to the fields suggest that users might need to upload related documents like an ID or a birth certificate.

  • "Document Uploads" Card: This card is specifically for handling file uploads. It lists the required documents (e.g., transcripts). The "Anlad" buttons (likely "Upload" or "Attached") and the checkboxes next to each document serve as interactive elements that guide the user to complete the uploads.

  • "Payment Status" Card: This is the financial hub of the dashboard. It shows the current payment status and provides options to handle payments. The "Anlad" button here is likely for uploading a payment receipt.

3. Technical Design Principles

The design is technically sound due to the use of several UI/UX principles:

• Visual Hierarchy: The page uses a clear hierarchy to guide the user's eye. The progress bar at the top is the first thing a user sees, followed by the logically organized content cards. This structure ensures users know exactly what to do next.

• Color as an Accent: The consistent use of pink as an accent color is a deliberate choice. It highlights all interactive elements like buttons, progress indicators, and icons. This consistency helps users quickly identify what is actionable on the page.

• Whitespace: The ample use of whitespace makes the interface look clean and uncluttered. It helps separate the different content blocks, allowing users to focus on one task at a time without feeling overwhelmed.

In essence, this dashboard's design is not just about aesthetics; it is a highly functional tool that uses established UI/UX principles to provide a clear, efficient, and user-friendly application experience.