WEB DESIGN
… encompasses the planning, conceptualization and design of websites, which includes both aesthetic and functional design.
It is about how the content is structured, designed and presented to provide the best user experience. This includes layout, color choices, typography, images, interactivity and accessibility.
User experience (UX):
UX focuses on how a user feels when using a product or website. It is about usability, accessibility, the joy of use and the effectiveness of user interaction.
User interface (UI): UI design deals with the visual and interactive design of the website. It includes the design of buttons, forms, navigation and other interactive elements.
Layout and structure:
Grid systems: They help to organize content on a page and ensure a consistent structure. The 12-column grid is widely used as it is flexible enough to accommodate different screen sizes.
Whitespace: Also known as negative space, whitespace is crucial to separate content and draw focus to important elements. It improves readability and visual hierarchy.
Color theory and color psychology:
Color harmony: the choice of colors influences the feeling and perception of users. Color schemes such as complementary, analogous or triadic can be used to create a harmonious design.
Color psychology: Colors have psychological effects. For example, blue can convey confidence and professionalism, while yellow can inspire cheerfulness and attention.
Typography:
Legibility: The choice of fonts, font sizes and spacing must be optimized for legibility. Serif fonts are often better for long passages of text, while sans-serif fonts are preferred for headlines and digital media.
Hierarchy: Typography can be used to create a visual hierarchy that guides the user through the page.
Images and media:
Quality and relevance: Images must be of high quality and relevant to the content. They should not only be decorative, but also informative.
Optimization: Images should be optimized for the web to reduce loading times. Techniques such as compression and the right format (JPEG vs. PNG) play a role here.
Accessibility:
ARIA (Accessible Rich Internet Applications): These are attributes that are added to HTML code to improve interactivity for screen readers.
Contrast and size: Text and background should have sufficient contrast to be read by people with visual impairments.
Responsive design:
Responsive design refers to the approach of designing websites or applications so that they provide an optimal viewing experience across a wide range of devices — from desktop computers to mobile phones.
Mobile First: Designing for the smallest screen first and then scaling up. This ensures essential content and functionality are prioritized for mobile users.
Desktop First: Starting with larger screens and then adapting for smaller ones, though this method can lead to over-complicated mobile designs if not managed carefully.