Web Design: Principles and Elements

• Web design uses principles and elements via online platforms and application tools.

Learning Competencies

• The goal is to apply web design principles and elements using online creation tools, platforms, and applications.
• This aims to communicate a message effectively for a specific purpose in specific professional tracks.

Introduction to Web Design

• Web design involves planning, creating, and maintaining websites.
• It is the process of using creativity to design and construct websites and update changes.
• The concept also involves taking account of the user interface, the architecture of information present, the layout, the colors, content, navigation ergonomics, as well designs of the communication.
• Other areas of concern includes Search Engine Optimization (SEO), UX designs, standardized codes and graphic design.

Web Design Principles and Elements

• They include purpose, communication, typefaces, color, images, navigation, layouts, grid and F-Pattern.

Purpose

• Good web design aims to cater to users' needs.
• Each page should have a clear purpose.
• The page has to fulfill specific needs.
• Websites are categorized by their goals.

Communication

• People want information quickly on the web.
• It is important to communicate clearly.
• Information should be easy to read and understand.
• The main objective when visiting a website is to absorb valuable information fast.

Typefaces

• Typefaces factor into website design.
• Dominant and noticeable visuals are important.
• The ideal online reading size is 16px, with a maximum of 3 typefaces for a streamlined design.

Color

• A well-thought-out color palette enhances the user experience.
• Complementary colors create balance.
• Contrasting colors for text and background can ease reading.

Images

• Images can communicate more effectively than words.
• High-quality images help position your website.
• The imagery connects with target audiences.
• Stock photos. infographics, videos, and graphics can lift the look of your website, and be attractive in communication.

Navigation

• Navigation is about the ease of website movement.
• Effective navigation includes clickable buttons and breadcrumbs.
• The "Three Clicks Rule" says that users should find what they need within three clicks.
• Breadcrumb navigation is located at the top, showing the user what pages they have been on

Layouts

• Layout refers to how visual elements arrange on a webpage; it includes text, images, buttons, and navigation menus.
• Well-structured layouts improve usability, readability, and user experience by intuitively guiding visitors through the content.

Grid

• A grid helps arrange content in a consistent and organized way.
• It uses rows and columns, ensuring alignment, balance and responsiveness across different screen sizes.
• Grids enable users to create sections or groups of related information.
• They establish stability and structure, giving designers a logical template to build on.
• Most grids have columns, gutters, and margins.

Main Types of Grids

• Manuscript grids
• Column grids
• Modular grids
• Hierarchical grids
• The simplest grid is Manuscript, where text is put in one column.
• Column grids are common in web design to place and align text and other design elements.
• Modular grids consist of columns and rows forming "modules".
• Hierarchical girds are irregular and flexible, this grid type can be composed of two different grids brought together

F-Pattern

• The F-Pattern in web page design refers to how users scan and read content on a webpage.
• Eye-tracking studies show users follow an "F" shape when browsing.
• The F-Pattern is based on human study.
• This is how our eyes move when we read content online.
• The F-Pattern helps establish a visual hierarchy and flow for visitors to focus on elements so they are more engaged on the page.
• The first move users make is horizontal across the page top, similar to the top bar.
• Users slightly move down and read another horizontal line, like a subheading or any content.
• Users then scan down the left side of the page, quickly skimming for relevant information.

Mobile

• Mobile devices are increasingly popular for viewing web content.
• Portability and convenience are the reasons.