Web Design Interface
When we talk about web design interface, there are several key terms that a person can think about: website, design, web design, interface, usability, user experience, HTML, CSS etc.
In this lesson, we aim to understand the meaning and purpose of web design interface.
Definition of Terms
- Website - page or collection of pages published on the internet or World Wide Web.
- Design - look and feel of an object or element.
- Web Design - look and feel of a website.
- Interface - objects that allows the user to communicate or interact with the website.
- Usability - ease of use and learnability of a human on a tool or device.
- User Experience - level of satisfaction of a user about the use of a particular product.
- HTML - markup language for building a web layout.
- CSS - adds style in a web HTML document.
In the above definition of terms, we can now say that web design interface refers to the look and feel of a website which offers ways and means for the user to communicate or interact with the website.
Importance of web design interface
A good web design interface is important because it helps and facilitates the users to be converted from visitors to buying customers.
Choosing Interface Elements
Interface elements must be planned and selected according to the purpose of the website. It has to be aligned with what users might need to do so that the interface elements become usable to the user.
Examples of interface elements that can be added to a web layout:
- Containers - header, sidebar, main content, footer
- Media - text, images, links
- Input Controls - buttons, text fields, checkboxes, radio buttons, select/list boxes
Although the mentioned elements are standard options, a designer may decide to pick only specific elements that suit best the project requirement. In fact, many elements are not mentioned above that can also be used on a website project.
10 Principles of Effective Web Design
There are several web design interface guidelines and best practices that a new or seasoned web designer can follow and consider to make a website more effective. Here are ten examples for reference.
Everything stems from the users requirements. A website is planned, designed, and developed according to what it is intended to do. The designer must know the clear purpose of why the website is needed to fulfil the website users requirement the best way possible.
Clarity and Communication
Clarity and communication is one of the most important web design interface principles. It only means that a user must be able to clearly and easily understand what the message of the website is about. The designer must be able to convey appropriately and properly the information that it needs to relay to customers through effective use of interface elements such as text, media and other elements.
Web design interface is not just about making an interface to allow interaction between users and websites, it also has to be aligned with the users wants, needs, and behavior so that it becomes useful to the intended target market. At the end of the day, they are the users of the final product, it should be easy to understand and navigate to the end-users.
Keep it Simple and Stupid (K.I.S.S)
Users typically do not understand the term web design interface. They do not have an idea how a website is structured and designed on the technical nor the creative side. To be able to make them appreciate a web design, the interface has to be very simple in the eyes of the customer.
Using common and consistent elements in a web design interface makes a user quickly understand how information is organised and how navigation is structured. In this sense, they are quickly to relate, adapt and understand what the website message of the website is meant to relay to them which most often gives a good impression on users.
Strong visual hierarchy
Visual order must be in place to maximize the effectivity of a website. Users must be able to pinpoint easily the primary information and distinguish them from secondary content. The primary, most of the time important information, must be positioned in bold or centered so that users attention are able to focus on it quickly followed by secondary information.
Grid based layouts
Grid based layouts help designers arrange content into sections, columns and boxes that are aligned and proportion. This principle also makes the website look and feel better.
F Pattern design
Since users tend to, by behaviour read from left-to-right and top-to-bottom, the “F” pattern design is used. This principle allows the user to follow their natural visual flow which is to display information in order of importance from left-to-right and top-to-bottom.
White space, ratio and proportion
White space is the blank area that you see between interface elements. It’s not necessarily white in color as it can be any color. In fact, a white space in web design can be a texture, pattern or even an image. It is a principle that is critical and important in a web design to maintain good ratio and proportion.
Websites are commonly accessed from multiple devices with different screen sizes. The interface elements that are placed in a page layout must be planned and designed responsive to support multiple types of screen sizes. Meaning, the interface elements must be cohesive with other elements and must be able to adjust to different screen width sizes.
Introduction to HTML
HTML stands for Hypertext Markup Language. It is used to create a markup for the visual appearance of a website that is displayed in an internet browser such as Google Chrome, Mozilla Firefox, and Internet Explorer.
At present, the latest version of HTML is HTML 5. HTML 5 offers code support for properties and behaviors of a web page content.
Definition of Terms
- Tags - these are pre-defined HTML code that is used to define HTML.
- Elements - set of opening and closing tags.
- HTML Structure - markup consists of text, images, and other content to display in a browser.
Important rules to consider
Tags are always enclosed with angle brackets (less-than and greater-than characters).
<html> <!-- this is an html tag --> </html>
If a tag has an opening tag, most of the time there should be a closing tag to “end” the script. The format of the closing tag should have angle brackets (less-than and greater-than characters) with a forward slash after the less-than character.
<html> <!-- opening tag --> </html> <!-- closing tag -->
Many of the tags have optional attributes that use values to modify the tag’s behaviour.
<p align=“center”>The paragraph is aligned to the center.</p>
Examples of HTML 5 Tags Support
- Input Field
- Textarea Field
A comment tag is used to insert a note in the HTML document file or source code.
<!-- This is an HTML comment. Comments are not visible on your browser. -->
Doctype is the declaration of the HTML version the document is written in.
It is written at the very top of an HTML document. Doctype is not an HTML tag.
In HTML 5, it should be
The HTML tag instructs the browser that the document is an HTML document.
The head element is a container for metadata (information about a web page) and is located in between the html and body tag.
<html> <head> <title>This is the title of a page</title> </head> <body> </body> </html>
The body tag defines the body of the document. This tag contains all the content of an HTML document.
<body> <p>This is a paragraph</p> <body>
The header tag is commonly the introductory content in an HTML document. This tag is where the logo and navigation is usually placed.
<header> <div>This is a Logo</div> <nav> <ul> <li>Home</li> <li>About</li> <li>Contact</li> </ul> </nav> </header>
An article tag is commonly used to contain information that may be distributed independently from the rest of the site.
<article> <h1>This is the title</h1> <p>This is a paragraph.</p> </article>
An aside is usually a content that supports the primary content of the web page. It is commonly used as a sidebar of a website.
<aside> <h2>This is the title</h2> <p>This is a paragraph.</p> </aside>
A div tag defines a division or a section in an HTML document.
<div> <p>This is a paragraph.</p> </div>
A section tag defines sections in an HTML document.
<section> <h3>This is a paragraph.</h3> <p>This is a paragraph.</p> </section>
A footer tag is used to identify the footer of an HTML document.
<footer> <p>Copyright. 2019.</p> </footer>
An audio tag is used to define sound media and audio files.
<audio> <source src="audio.mp3" type="audio/mpeg"> </audio>
An image tag is used to insert and display image files on a website.
The a tag is used to create a link from one page to another.
<a href="about.html">Go to About Page</a>
The heading tag defines the most important to least heading in an HTML document.
<h1>This is Heading 1</h1> <h2>This is Heading 2</h2> <h3>This is Heading 3</h3> <h4>This is Heading 4</h4> <h5>This is Heading 5</h5> <h6>This is Heading 6</h6>
The p tag defines a paragraph in an HTML document.
<p>This is a paragraph</p>
The input tag is an input field where users can enter data.
<form> <input type="text"> <input type="submit" value="Send"> </form>
The texture tag is a multi-line text input control.
The button tag defines a clickable button.
Basic HTML 5 Structure
<!doctype html> <html> <head> <title></title> </head> <body> </body> </html>
An HTML Attribute is a modifier of an HTML element type.
<img src="image-file.jpg" alt="this is an image">
src is an attribute name;
alt is an attribute name
Introduction to CSS
CSS stands for Cascading Style Sheets. It is basically used to “style” and layout web pages.
There are three particular options on how CSS can be implemented.
Using Inline CSS
Inline CSS is found in a specific HTML element. Inlining CSS means that a style attribute is added directly to an HTML element.
<h1 style="font-size: 18px;">This is a header</h1>
Heading 1 is the tag name;
Style is the attribute name;
Font size is the property name;
Eighteen pixels is the value of the property;
Take note and memorize the format:
This is the format but it is not using a valid HTML tag name, HTML attribute, and value
Other examples for additional reference
<header style="background-color: blue"></header> <section style="border: 1px solid red"></section> <p style="font-family: Arial;"></p>
Example HTML Basics Demo