EMPTECH 2ND QUARTER L2: WEB DESIGN PRINCIPLES AND ELEMENTS

Web Design Principles: VISUAL HIERARCHY

The arrangement of elements is order of importance. This is done either by size, color, imagery, contrast, typographically, whitespace, texture and style. One of the most important functions of visual hierarchy is to establish a focal point; this shows visitors where the most important information is.

Web Design Principles: GRID-BASED LAYOUT

➔ A grid is the division of a layout with vertical and/or horizontal guidelines to incorporate margins, spaces and columns in order to provide a framework for organizing content. ➔ The grid-based layout arranges content into a clean rigid grid structure with columns, sections that line up and feel balanced and impose order and results in an aesthetically pleasing website.

Web Design Principles: CONTENT

➔ Content is considered as the backbone of website. ➔ Content means any creative element, for example, text, applications, images, archived e-mail messages, data, e-services,

Web Design Principles: MOBILE FRIENDLY

➔ More people are using their phones or other devices to browse the web. ➔ It is important to consider building your website with a responsive layout where your website can adjust to different screens.

Web Design Principles: VISUAL HIERARCHY: F-SHAPED PATTERN

➔ The F pattern for viewing is more prominently used on text-heavy pages such as articles and blog posts. ➔ In this pattern, viewers usually scan sites from the top left to the top right, then down to

Web Design Principles: VISUAL HIERARCHY: Z-SHAPED PATTERN

➔ The Z pattern follows a path from top-left to top-right, then down to the lower left, and across to the lower right. ➔ This pattern is best used for content that is not text or content heavy.

Web Design Principles: NAVIGATION

➔ The way finding system used on websites where visitors interact and find what they are looking for. ➔ Website navigation is key to retaining visitors. If the websites navigation is confusing, visitors will give up and find what they need elsewhere.

Web Design Principles: LOAD TIME

➔ Website load time — or web page load time — refers to how long it takes for a website, or webpage, to fully load and appear on screen. ➔ This includes all content on the page such as text, images, and videos.

WEB PAGE CREATION

An effective website design should fulfil its intended function by conveying its message while simultaneously engaging the visitor. Several factors such as consistency, colors, imagery, simplicity and typography, functionality all contribute to good website design. A well-designed website can help build trust and guide visitors to act.

Web Design Principles: WEBSITES PURPOSE

-Describing Expertise -Building Your Reputation -Generating Leads -Sales and After Care

WEB PAGE CREATION PLATFORMS

WYSIWYG= an acronym for What You See Is What You Get, is a system in which editing software allows content to be edited in a form that resembles its appearance when printed or displayed as a finished product, such as a printed document, web page, or slide presentation. Web Templates= are pre-designed layouts that allow you to arrange content onto a web page to quickly create a well-designed website. HTML= The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It defines the meaning and structure of web content. It is often assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript.

WEBPAGE What is a webpage?

is a document for the World Wide Web that can be accessed and displayed on a monitor or smartphone using any web browser. Web pages are made up of Hypertext Markup Language (HTML).

Web Design Principles: SIMPLICITY

is the best way to go when considering the user experience and the usability of your website. WAYS TO ACHIEVE SIMPLICITY Color= It has the power to communicate messages and evoke emotional responses. Typography= Typefaces should be legible and only use a maximum of 3 different fonts on the website. Imagery= All imagery should be expressive and capture the spirit of the company and act as the embodiment of their brand personality.