10 May Start With The Wireframe
Everything grows from the ground up. A foundation is built which upon it great structures may stand. Without a solid foundation, everything built up from it will come crashing down. Without a skeleton, our bodies would not be able to stand. Thinking about this, it is apparent how important the foundation is, and this applies to all things. Including web design.
When designing for web, it is always a good idea to start by building a wireframe. In this blog post I am going to share with you the steps I take when designing a web page.
Step 1: Write a List
Start by writing a list of what needs to go onto the web page. Include all details and notes of what you want to include on the webpage. Start thinking about layout as well and write how you will want it to look.
Step 2: Sketch The Wireframe
Grab some paper and start sketching the layout of the web page. Draw boxes (your <div>’s) of where the content will go and label what will go in them. Draw your image boxes, your text boxes, and your title boxes, just be sure to layout all of the content you have from your list. When drawing the wireframe, I like to draw two versions: one for desktop and an alternative for mobile. If you’re feeling ambitious, maybe grab some pencil crayons and start thinking about colour.
Step 3: Mock Up The Wireframe
This step is optional and personally I skip it, but I know that a lot of course teach to do this so I thought I would include it. Once you have your wireframe, start building it in PhotoShop. Build it up so that it looks like you screen-capped the actual web page. Mock up the fonts, the text size, the colours, everything.
Step 4: Start Building
Exactly as the step title says: start building. Create all of your boxes that you drew up in the wireframe. You can start filling your boxes with the content as you make them or just wait until you have all of the boxes made. Up to you really, you’re the one building so do what works best for you! Before you start adding colour and whatnot, just remember to get the content in first, and then style.
Step 5: Responsive
This step can go hand-in-hand with step 4, or you can do it after. Just whatever you do, don’t skip this step! According to smartinsights.com, the amount of mobile users has surpassed the amount of desktop users globally! So with this information, it’s pretty clear that you need to make your web page viewable on a mobile device!
There you have it, that concludes my process when designing a web page. I hope you enjoyed this blog post and if you have anything to add or debate, just drop a comment! I would love to hear what kind of process other people follow, so let me know!