UI/UX Design Basics Every Developer and Student Should Know

Start with the user, not the screen

Before opening a design tool, write down who will use the product, what they want to achieve and what might stop them. A student checking exam results on a slow phone has different needs from an office worker managing invoices on a large monitor. Talking to even five real users shows problems you would never guess alone.

Turn what you learn into a short list of tasks, such as find a course, apply, and track the application. Every screen should help with one of these tasks.

Create a clear visual hierarchy

Hierarchy tells the eye what to look at first. Make the most important thing the biggest or the strongest in colour, and make supporting information smaller and quieter. A page where everything is bold, large and coloured gives the user nothing to follow.

Use consistent spacing. White space is not wasted space. It separates groups and gives the content room to breathe. Keep related items close together and add more space between unrelated groups.

Choose type and colour with restraint

Use no more than two typefaces. Choose a readable body size, usually at least 16 pixels on screens, and keep lines to about 60 to 80 characters. Pick one main colour for actions and a small set of neutral colours for everything else. Use colour to carry meaning consistently, for example red only for errors and green for success.

• Check contrast between text and background so that it can be read in sunlight.
• Never use colour alone to show a state, add an icon or a label too.

Make navigation and actions obvious

People should always know where they are, where they can go and what will happen when they press a button. Use clear labels such as Apply now or Save changes instead of vague words. Keep the main action visible, and keep the number of choices small on each screen. Forms should ask only for what is needed, group related fields and show errors next to the field that needs fixing.

Design for touch. Buttons should be large enough to tap comfortably and have space around them so that users do not press the wrong one.

Design for everyone

Accessibility improves the experience for all users. Provide text descriptions for images, make sure the page can be used with a keyboard, keep text large enough and avoid flashing content. These practices also help people who are using a phone in bright light or with a poor connection.

Test early and improve in small steps

Draw rough sketches first, then build a clickable prototype and ask someone to complete a task while you watch without helping. Note where they hesitate or tap the wrong thing. Fix the biggest problems and test again. Design is a cycle of making, observing and improving, not a single moment of inspiration.

Keep a portfolio with before and after examples that explain the problem, your decision and the result. That story shows employers how you think, which matters more than polished visuals alone.