World's Shortest UI-UX Design Course

Journey

Map out the customer's journey, from the moment they land on your site until they've achieve their objective. You can do this via a user flow diagram.

Wireframing

Each screen should help the user achieve their key objective. Wireframe are a great way to achieve this without getting pulled into the details of a design.

Design System

A design system is a guideline that specifies reusable components. This can be very simple or very complex.

Colors

When picking a color palette for website design, fill these core categories:

Background: Foundation colors for your layout
Text: Primary and secondary text colors for readability
Primary: Main brand or action color
Secondary: Supporting brand color (if applicable)
Accent: Highlight color for emphasis
Semantic: Status colors for error, success, warning states

You can use Realtime Colors to test your palette in real-time.

Typography

The fonts you choose directly impact the readability of your content. They also determine the vibe. In addition to Realtime Colors mentioned above, Type Scale is a useful tool to determine ratios and readable sizes.

Styles

There are an infinite number of styles available. Dribbble and Behance are great sources to use to pull inspiration from.

Design Principles

Keep these core principles in mind:

Visual hierarchy: Guide users through content importance
Contrast: Ensure readability and accessibility
Balance: Create visual stability in your layouts
Consistency: Maintain uniform patterns throughout
Simplicity: Remove unnecessary complexity
Feedback: Provide clear reactions to user actions to maintain engagement

You'll need to prototype, test and iterate continuously.