Web design is a huge subject and books have been written on this topic that could probably sink a small boat. However while this is the case, you certainly don’t need to know all of this in order to get started. Here we will look at some of the basics of web design to help you to get started and to help you avoid the big mistakes. Take this on board and get started, and you can learn the rest as you go.
Image credit: Jaganatha
Anatomy of a Website
A website is made up of a few different things, and most fundamentally it is a collection of HTML, CSS and image files that are held on a server. When someone navigates to the URL that points at your server it loads up your ‘Index.html’ page and that’s where you are going to point the browser toward everything else.
This HTML is a very basic formatting code that tells browsers where to place text and images and how to display them. It is made up of tags like ‘p, h1 (header one) and your content and it includes links to other pages (HTML tag a) and references to images (HTML tag img). Most HTML websites these days will also need to have a CSS.
How to Design Your Website
If you want to design your website you have a few options. Option one is to simply code it from scratch in notepad for which you will need to learn HTML and CSS. You can also do this by picking apart other websites – saving their source and editing the text and images to suit your purposes (check the owner doesn’t mind first) which is perhaps the easiest way to learn your way around the code.
Alternatively you can use some web design software which you can find either as part of your web hosting package, or as a software download such as Dreamweaver. These allow you to drag and drop items and to enter text as you like, and then to view the code and edit that manually if you wish. A third option is to use WordPress which will simply involve choosing a template and some images after you’ve installed it on your server.
Some Rules for Web Design
Now here’s what you should consider when designing your site at the forefront of your mind. Some ‘golden rules’ if you like to observe when creating pages:
- Make it easy to read – In other words make sure that your pages aren’t blue with red text because that will drive people away and give them headaches (which tends to prevent them from coming back).
- Make it easy to navigate, and play to your visitors’ expectations – Menus go either along the top of your pages or down the left or right hand side
- Keep it un-cluttered – The more stuff you cram onto your website the more difficult it will be for visitors to know where to look. The blank space is your best friend when used well.
- Make it easy to edit – When you design your site, build it in such a way that you can make site wide changes easily. That means CSS style pages and it means include files so that your pages all refer to one central source for their style and layout.
- Images face in – This is an old tip used in magazines too, make sure that all your images have their subjects facing in toward the text so that the eye is drawn in and not out and away.
- Leave space for ads – If you want to make money from advertising then you need to leave some space for ads in your design. Hot spots are near the menus, or near the center of the page.
- Be Consistent – Good web design is consistent across the board, so make sure you don’t deviate from your font or color scheme on each page
- Brand well – Include a title/logo at the top of the page and make it present on every single other page too.
- Include a site map – They’re great for helping people around your page and search engines love them too.
- Know where you want people to look – Thing about where you want people to look when they see your site and what you want them to do and design the pages around this accordingly.
- Make it cross compatible – Your site should have a relative layout, or should have a layout that puts all the important content in the top left. These two design choices will fit the maximum number of computer and phone screens so that all users can enjoy your content.
- Keep it light – Make your file sizes as small as possible and don’t load hundreds of unnecessary images – this way you can make sure that your site loads quickly and doesn’t cost people a fortune when they’re browsing on their mobiles.