Getting started with Web Design

Web design can be a daunting task – especially if you’re new to coding and HTML. Part of this process is also understanding the difference between web design and web development.

Web Design

Creating structure and logical flow to components of a website (multiple pages) or webpage (just a single page). Defining how different components will look and sit together.

Web Development

Web development looks at turning web design into an actual website or webpage. This involves putting together HTML and CSS code with the information and ensuring that it meets what you set out to accomplish.

Getting started

What do you want to achieve?

It’s easy to get overwhelmed and think a website is impossible to get done, but once it’s broken down into its components, it looks a lot more achievable.

Make a list. This means that as you go, you can check of what you’ve done, and make sure you’re not missing out, or trying to do too much.

  • Number of pages
  • Number of images
  • Number of links
  • Number of lists
  • Number of tables
  • How much text content is required

What’s the structure going to be?

Wireframes are a quick way to map out what you need to include in a website.
Wireframes are a quick way to map out what you need to include in a website.

Making sure you fit everything on a page can seem like a hard job, but keep it simple.  Wireframes are one of the easiest ways to get started. Use something like PowerPoint (or even pencil and paper) to put together a map of what you need to put on each page.

Don’t focus on colours or fonts, or what images you’ll use, just make sure that you have a place for each item in the list you made.

If you’re feeling adventurous, try doing this a few times to have a look at what layouts you can come up with, and what works the best.

Now what?

Once you’re happy with a wireframe, then you can start looking at putting a fonts and colours.

Fonts

If you’re just starting out with HTML and CSS, it’s best to stick with web safe fonts, these work on any computer and are easy to start using. Have a look at the W3 Schools site for what fonts are available.

Colours

Picking colours to use for links, headings and other elements is another important step to ensuring that your site looks good, and is consistent. Adobe Color CC is a free tool to work out what colours go together and will give you the right #hex code to use in your css. Find around 2 – 3 colours that you like, as well as black and white.

Time to start coding!

Once you’ve worked out what your site is going to look like, (you should have a wireframe for each page you need) and what colours and fonts you will use, you can have a look at what code you need to make it possible.

Remember that with HTML5, there’s some new elements that are available, check out the W3.org article here.

HTML Document

Have a go at putting your site together, but don’t worry about the style for now. Save this as a .html file. It might look something like below:

<DOCTYPE HTML>
<html>
<head>
<title>Page Title - Site Title</title>
</head>
<body>
<header>
<h1>Page Title</h1>
</header>
<div class="blueBackground">
<p>Content</p>
</div>
</body>
</html>

CSS Document

Once you have a HTML document with all your components in it, you look for the elements that you want to use the same style for multiple times; make a list of them.

For example, you might want all your headings (h1, h2, h3…) to have the same colour. You can give your <header> content a background colour. 

If you have some elements that you want the same, but not all of them, include a class="className" in their tag, and in your css list.

Once you’ve found all your elements, start building your css document.
h1, h2, h3, h4 {
color: red;
}

.blueBackground {
background-color: blue;
}
Save this document as a .css file in the same folder as your HTML document.

Linking your CSS to your HTML

In the head of your HTML file include the following line of code. This will include all the CSS in your document, just like if you put the code inside <style></style> tags in your HTML document.
<!-- External Stylesheet -->
<link href="cssfilename.css" rel="stylesheet">

You’re done!

Congratulations on building your website.

Leave a Reply

Your email address will not be published. Required fields are marked *