Magazine for designers and web developers
  • Prathamesh Koshti
1 Collect me

How to Design a Website

Article by Awwwards Team in Resources & Tools - November 23

Let's assume you have just started a career in web design and you are facing the challenge of creating your first website. Chances are you have a lot of information on your hands and you don't really know where to start. Every website is different and requires a certain planning and thought, but most of the design work consists of tasks that, with few modifications, are the same to every project. In this post we'll guide you through the basic steps in the typical design process of a website.

Planning: Make Up Your Mind

Planning is the first step of any project, not only web design. Analyze the subject of the website you are about to design, any possible specific requirement. Defining every aspect of the project that you can possibly think of at the beginning of it, will help avoid problems in the future and will serve you as a reference during the designing process. These are some key elements you have to consider in this phase: • Purpose / objective of the site.Target audience.What does your client expect: Is it reasonable? Is it convenient? Don't hesitate to make suggestions to your client, that's part of your job too. • Market research: What is the competition doing? • Style and feel (colors, typography, etc.): Do some research, what is trendy right now? What are the website competitors doing? Make a small briefing to determine how you want your website to look. • Page size: Once again, think about your target, from where are they going to see the site. • Usability: Try not only to make it look good, but make sure the website you are designing is user-friendly, every element is placed correctly, there is enough white space, navigation is clear and useful and everything is well structured.

Design: From Paper to Pixels

This is the time when all your previous planning and research becomes useful. It may seem weird to design a website on paper, but having a visualization of what's in your mind, even if it's a rough one, could help you organize your thoughts towards the design. Once it's clear for you how you want the site to look it's time to move on to the computer. Most people use Adobe Photoshop as their main designing software. It is the most popular and obvious choice, but there are alternatives available, some of them are free (GIMP, for example). Choose which software you are going to use and start designing. Start with the wireframe and then, begin adding elements to your design. If you keep your design organized it will be easier to make modifications if you decide to change some elements during the process. Useful links: Mockingbird: Online tool that makes it easy for you to create, link together, preview, and share mockups of your website. Kuler: A web-hosted application for generating color themes that can inspire any project. A Collection of Printable Sketch Templates and Sketch Books for Wireframing.

Development: Work it out

Once your design is finished, the development phase begins. First thing you need to do is slice your design. This means cutting your design into pieces which become separated web files. If you have worked in a clean and organized way during the design process (separating every website element in its own properly named layer, using rulers, guides, etc.), slicing would be relatively quick and easy. When you have all the elements for your website prepared, it's coding time! You have to write the HTML and CSS for the basic design. If you are new at web design this may be the trickiest part of the process. Everybody has some degree of visual education, but learning how to code is like learning a foreign language, it takes some time and discipline. Don't worry though, the best way to learn is practice, so go for it! After this, you can add interactive elements to your design to create a dynamic website. But this part requires programming knowledge and we're only covering the basics here. Keep you code clean to simplify future changes, and test everything before launching the site. Useful links: 30 Days to Learn HTML & CSS: A Free Tuts+ Premium Course. W3C Markup Validation Service. BrowserShots: Free tool for checking what your website looks like in a wide range of different browsers.

Congratulations! It's a website!

Now you're done! You have made your first website from scratch to end. Remember these are very general directions so you know where to start from. The design and development of a website is a personal process and the workflow is different for every designer and client. Keep an open line of communication with your clients to determine which options would be better for a specific project. Pay attention to detail and don't be afraid to express your thoughts. Keep learning and keep working. Good luck! Useful links: 6 Phases of the Web Site Design and Development Process. Web Development from Scratch. How to design a website. A fully comprehensive step by step tutorial, from design to HTML & CSS. Smashing Magazine: Following A Web Design Process.
Videos that maybe can help you

Building a Website - Time Lapse from Chris Spooner on Vimeo.

How to Design a Portfolio Website, Part One from Carsonified on Vimeo.

How to Design a Portfolio Site, Part 2 from Carsonified on Vimeo.

How to Design a Website.