Website Advisor: Website planning and conceptual design • Layout, typography and color palettes • What is good web design? • The basics of web design

Basics of Web Design

Web Design refers to the planning, conception, layout and design of a website. It is not only concerned with the appearance of a web-site, but also with the interaction of its functions.

In the past, the term web design was used to refer to the development of web sites that could only be viewed in a desktop browser. In some cases, websites were even designed for a specific screen resolution.

Today, however, mobile devices such as smartphones and tablets play an increasingly important role. Web design today therefore means designing websites for a wide variety of devices that have a wide variety of screen resolutions.

The familiar Look and Feel of a website, the usability and the user experience are always part of web design. This includes the following points:

  • The right choice and combination of colors, fonts and images are crucial for the first impression.

  • The logical layout, content structure, and navigation determine the design of the site.

  • Choice of interactive design elements. Ease of use is especially important here.

good web design
Advertisement

What is good Web Design?

Good Web Design

  • has a well-defined theme and a clear message.

  • has a simple, easy to understand and clear navigation.

  • also works very well on mobile devices such as smartphones and tablets.

  • has small loading times, i.e. the webpage loads fast.

  • is limited to a small number of colors. When choosing colors, follow the rule: Less is more.

  • limits itself to a maximum of 2 different fonts and uses only a small number of different font sizes for headings, paragraphs and lists.

Above all, good web design means that users can quickly find the content they are looking for.

Nothing is more unpleasant for the user of a website than having to wade through a confusing or illogical navigation system to find the information they are looking for. If visitors can't find their way around the website or get lost in the navigation jungle, they will leave the site in a state of frustration.

Clear navigation without sub-menus is best. If extensive navigation is unavoidable, menu items that logically belong together should be highlighted.

Menu items that are not important at the moment should be hidden as they distract attention. More than 6 to 8 relevant menu items are difficult to grasp at a glance.

Advertisement

Web Design Introduction

The two languages HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) form the basis of web design.

HTML is used to define what is displayed on the webpage. This means that HTML only defines the structure and content of the page. The markup of the HTML file does not contain any information about the design of the webpage.

CSS, as a direct complement to HTML, is used to design the layout of the webpage. The design can be outsourced to a separate CSS file so that all pages of the complete website can use the stylesheet definitions. This provides a complete separation between design and content.

Typical content of the associated CSS file is:

  • Definitions for sections resp. areas
    header (headline)
    nav (Navigation)
    article (main content) and, if applicable
    aside (side column) and
    footer (footnote)

  • Definitions for fonts

  • Definitions for headings, paragraphs and lists

  • additional definitions, for example contact form, info boxes, buttons, …

Advertisement
Standard CSS Layout with Header
Example 1: 2 Column CSS Layout with Header

This layout also works on smartphones and tablets. However, in portrait mode, the maximum usable line length of the right column is too short. If the screen width is between 320 and 480 pixels, the content column cannot display enough characters per line because the left column uses between 40 and 60 percent of the available screen width.

On the page Responsive Web Design, I show how to solve this problem using media queries. For displays with small screen width, the navigation (i.e., the left column) must be modified so that the entire screen width is available for the content column.

HTML Sourcecode

<!DOCTYPE html>
<html lang="en">

<head>
<title>Webpage Title</title>
<meta name="description" content="Webpage Description">
<meta name="keywords" content="Webpage Search Terms">
<meta charset="utf-8">
<meta name="language" content="en">
<meta name="audience" content="all">
<meta name="robots" content="index, follow">
<meta name="robots" content="all">
<link href="favicon.png" rel="icon" type="image/png" size="32x32">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body>
<nav id="sideNav">
<ul>
  <li><a class="active" href="/">Home</a>      <!-- Homepage URL --></li>
  <li><a href="/news.html">News</a>            <!-- "News" URL --></li>
  <li><a href="/contact.html">Contact</a>      <!-- "Contact" URL --></li>
  <li><a href="/about-us.html">About us</a>    <!-- "About us" URL --></li>
</ul>
</nav>

<div id="container">
<header id="headline">
<h1>Main Heading of the webpage</h1>
</header>

<article id="content">
<h2>Main Content of the page</h2>
<p>Dummy text does not always have to be Lorem Ipsum.</p>

<p>Unlike previous webpages, we no longer need to program two different versions for Internet Explorer and other browsers. Now, one page is sufficient for all browsers and devices, whether it's for printing or displaying on a smartphone. It's important to note that one page is enough for all browsers and devices.</p>

<p>HTML, CSS, and JavaScript have rules; Words you may have heard before. The Standards ensure everyone can use the website without restrictions. Unlike before, we no longer have to develop two different websites for Microsoft Edge and Mozilla Firefox.</p>
</article>
</div>  <!-- End container -->
</body>
</html>

CSS Sourcecode

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Open Sans", "Liberation Sans", Arial, Helvetica, sans-serif;
  font-size: 1.0em;
  font-weight: normal;
  text-align: left;
  background: #dcebf2;             /* LightBlue */
  color: #222;                     /* BlackGrey */
  -moz-hyphens: auto;
  -o-hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

#container {
  margin: 0 0 0 12.5em;            /* left column, width: 12.5em */
  padding: 0;
  height: 100%;
}

#content {
  margin: 0;
  padding: 0 0.625em;
  width: 100%;
}

/** ####################
 ** ##  Main Heading  ##
 ** #################### */
#container #headline {
  margin: 0 0 2.0em 0;
  padding: 0 0.625em;
  width: 100%;
  height: 2.5em;                   /* Heading height: 2.5em */
  top: 0;
  left: 0;
  background: #feffc1;             /* LightYellow */
  overflow: hidden;
}

#container #headline h1 {
  margin: 0;
  padding: 0;
  font-size: 1.5em;
  color: #222;                     /* BlackGrey */
}

/** ######################
 ** ##  Content Styles  ##
 ** ###################### */
#content h1, #content h2, #content h3 {
  display: inline-block;
  margin: 0 0 1.25em 0;
  padding: 0;
  font-size: 1.3em;
  font-weight: bold;
  text-align: left;
  color: #b00;                     /* DarkRed */
}

#content p {
  margin: 0 0 1.25em 0;
  padding: 0;
  color: #000;                     /* Black */
}

#content p+h1, #content p+h2, #content p+h3 {
  margin-top: 2.5em;
}

#content a {
  font-size: 1.0em;
  text-decoration: underline;
  color: #0000df;                  /* Blue */
}

#content a:hover {
  text-decoration: underline;
  color: #df0000;                  /* Red */
}

/** ##############
 ** ##  Button  ##
 ** ############## */
#content .cssbtn {
  display: block;
  margin-bottom: 2.5em;
}

#content a.button {
  display: inline-block;
  margin: 1.0em 0.2em 1.0em 0;
  padding: 0.46em 1.2em;
  font-size: 1.4em;
  font-weight: 600;
  text-decoration: none;
  text-shadow: 0 0.04em 0.04em rgba(0,0,0,0.35);
  text-align: center;
  background: #b00;                /* DarkRed */
  color: #fff;                     /* White */
  transition: all 0.15s;
  border: 0.125em solid #000;
  border-radius: 0.5em;
  box-sizing: border-box;
}

#content a.button:hover {
  text-shadow: 0 0 2.0em rgba(255,255,255,1);
  background: #e00;                /* LightRed */
  color: #000;                     /* Black */
  border-color: #000;
}

/** ###############
 ** ##  sideNav  ##
 ** ############### */
#sideNav ul {
  position: fixed;
  margin: 0;
  padding: 0;
  width: 12.5em;
  height: 100%;
  list-style-type: none;
  background: #d0dec9;             /* MintGreen */
  overflow: auto;
}

#sideNav ul li {
  border-bottom: 2px solid #bbb;   /* LightGrey */
}

#sideNav ul li a {
  display: block;
  padding: 0.5em 1.0em;
  text-decoration: none;
  color: #000;                     /* Black */
}

#sideNav ul li a.active {
  background: #d0ffc9;             /* LightGreen */
  color: #000;                     /* Black */
}

#sideNav ul li a:hover:not(.active) {
  background: #ccc;                /* LightGrey */
  color: #000;                     /* Black */
}

Live preview of this webpage template Simple 2 Column Layout with Header.

Download