Lecture Manual: Basics of Web Design and Development

Lecture Manual: Basics of Web Design and Development

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.

Web Design Interface

Definition of Terms

  1. Website - page or collection of pages published on the internet or World Wide Web.
  2. Design - look and feel of an object or element.
  3. Web Design - look and feel of a website.
  4. Interface - objects that allows the user to communicate or interact with the website.
  5. Usability - ease of use and learnability of a human on a tool or device.
  6. User Experience - level of satisfaction of a user about the use of a particular product.
  7. HTML - markup language for building a web layout.
  8. 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.

  1. Purpose

    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.

  2. 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.

  3. User-centric design

    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.

  4. 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.

  5. Consistency

    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.

  6. 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.

  7. 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.

  8. 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.

  9. 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.

  10. Mobile friendly

    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

  1. Tags - these are pre-defined HTML code that is used to define HTML.
  2. Elements - set of opening and closing tags.
  3. HTML Structure - markup consists of text, images, and other content to display in a browser.

Important rules to consider

  1. Tags are always enclosed with angle brackets (less-than and greater-than characters).

    For example

    <html> <!-- this is an html tag -->
    </html>
    
  2. 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.

    For example

    <html> <!-- opening tag -->
    </html> <!-- closing tag -->
    
  3. Many of the tags have optional attributes that use values to modify the tag’s behaviour.

    For example

    <p align=“center”>The paragraph is aligned to the center.</p>
    

Examples of HTML 5 Tags Support

Container

  • Div
  • Header
  • Section
  • Main
  • Article
  • Aside
  • Footer

Media

  • Image
  • Video
  • Paragraph

Input Controls

  • Input Field
  • Textarea Field
  • Button

HTML Tags

Comment

A comment tag is used to insert a note in the HTML document file or source code.

For example

<!-- This is an HTML comment. Comments are not visible on your browser. -->

Document type

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.

For example

In HTML 5, it should be

<!doctype html>

HTML Structure

HTML

The HTML tag instructs the browser that the document is an HTML document.

For example

<html>
</html>

Head

The head element is a container for metadata (information about a web page) and is located in between the html and body tag.

For example

<html>
<head>
 <title>This is the title of a page</title>
</head>
<body>
</body>
</html>

Body

The body tag defines the body of the document. This tag contains all the content of an HTML document.

For example

<body>
 <p>This is a paragraph</p>
<body>

Container

Header

The header tag is commonly the introductory content in an HTML document. This tag is where the logo and navigation is usually placed.

For example

<header>
 <div>This is a Logo</div>
  <nav>
   <ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
   </ul>
  </nav>
</header>

Article

An article tag is commonly used to contain information that may be distributed independently from the rest of the site.

For example

<article>
  <h1>This is the title</h1>
  <p>This is a paragraph.</p>
</article>

Aside

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.

For example

<aside>
  <h2>This is the title</h2>
  <p>This is a paragraph.</p>
</aside>

Division

A div tag defines a division or a section in an HTML document.

For example

<div>
  <p>This is a paragraph.</p>
</div>

Section

A section tag defines sections in an HTML document.

For example

<section>
  <h3>This is a paragraph.</h3>
  <p>This is a paragraph.</p>
</section>

Footer

A footer tag is used to identify the footer of an HTML document.

For example

<footer>
  <p>Copyright. 2019.</p>
</footer>

Media

Audio

An audio tag is used to define sound media and audio files.

For example

<audio>
  <source src="audio.mp3" type="audio/mpeg">
</audio>

Image

An image tag is used to insert and display image files on a website.

For example

<img src="logo.jpg">

Anchor Links

The a tag is used to create a link from one page to another.

For example

<a href="about.html">Go to About Page</a>

Formatting

Heading

The heading tag defines the most important to least heading in an HTML document.

For example

<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>

Paragraph

The p tag defines a paragraph in an HTML document.

For example

<p>This is a paragraph</p>

Input controls

Input

The input tag is an input field where users can enter data.

For example

<form>
  <input type="text">
  <input type="submit" value="Send">
</form>

Textarea

The texture tag is a multi-line text input control.

For example

<textarea>
</textarea>

Button

The button tag defines a clickable button.

For example

<button>Submit</button>

Basic HTML 5 Structure

<!doctype html>
<html>
<head>
  <title></title>
</head>
<body>

</body>
</html>

HTML Attribute

An HTML Attribute is a modifier of an HTML element type.

For example

<img src="image-file.jpg" alt="this is an image">

Where

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.

For example:

<h1 style="font-size: 18px;">This is a header</h1>

Where

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