Everyone has their own way of doing things, from ordinary house chores to their “fastest” way to get to work. This always applies to peoples jobs. Now, I don’t consider myself a web designer, but it’s a job I am forced into since my main line of work is programming websites and software. Instead of having to pay someone every time I come up with a website idea, I just end up designing the sites by myself and in the future I can always hire someone to change it if the site gets popular enough.
There are so many different ways to go about designing a website, and below is my normal routine for how I accomplish this process. Of course, after you start designing sites you will create your own methods that work for you and help you save time and make your life a lot easier.
The tools and software I use are listed below. There may be some items that may seem out of place, but they all have their role.
- Adobe Photoshop.
- Graphing Paper
- Lined Paper
- Normal Pencils (never a pen or mechanical pencil)
- Colored Pencils (only need single color)
You were probably expecting my list to only contain Photoshop and maybe some other software, but I actually sketch all of my designs on paper first.
The hardest part of designing a site is to actually figure out the design for the site, all the Photoshop and drawing aspects usually come easy, and if not they will after practice. But creativity will always be the bottleneck. Below are the steps I take to start a design before I go into Photoshop and end up making it official.
- Write a list of all the elements required on each page. Items such as a Sign In and Sign Up box, navigation, archives, messages, notifications, contact form, social media icons, advertisements, and anything else your site will need. This will vary between pages slightly.
- I then picture all of the elements that are required for the page that will be visited the most often. This is usually the Home Page, but in cases of a Blog design, you will probably want to focus on the design of the Blog Post pages first. After figuring out how the elements will all fit on a page and go with a design I have in mind, such as a two column site, I move onto the next step.
- Start drawing on the graph paper using my ruler and normal pencil. You can usually sketch up a design in a couple of minutes and easily change parts of it, if it’s not working out. The Colored Pencil (single) is used for notes, dimensions of spacing, and various other things that shouldn’t be in the normal pencil. The normal pencil identifies lines and boxes that are actually there.
- Once the first page is designed, I ask myself if I need to draw out the other pages of the website on paper or if I can start using Photoshop. Some sites I design have very similar pages, if not identical pages throughout with just some elements added or removed. In the case where the pages are similar I don’t design the rest and move straight onto Photoshop. Other times I will have to repeat steps 2 and 3 until all the pages are drawn out.
- Now we are in Photoshop. I create a new document with the dimensions for 1024x2500 pixels. The height is so high to give me space for all possible items that may be on a page, even when on the live site only a few items can actually be seen at a single time. For instance, I will have each message drawn out below each other, such as “Error”, “Warning”, “Notice”, “Alert”.
- I setup all of the guides for the document. I set them to each edge of the canvas, one horizontal to identify the “Page Fold”, and then the rest to identify the spacing which is drawn by my colored pencil in step 3.
- I now start creating the actual layers and graphics for the website. Keep all of your layers organized in folders and Smart Objects. Smart Objects are amazing.
And that is the gist of the process I use to design websites. I’m not some amazing designer, I’m actually fairly awful at designing sites, but this process can help designers of every level hopefully. When people think of designing websites they just assume it’s all done using a computer when actually drawing the design first on paper can be helpful and speed up the process.