Start With The Wireframe

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.

Wireframe_Feature
Photo from our Instagram

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.

Wireframe_Sample
Photo from my Instagram

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!

SmartInsights_Graph
photo from smartinsights.com

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!

Johnathan LeBlanc
john@intosolve.com

Provisional RGD Member. Johnathan LeBlanc is a graphic designer turned web designer. Having graduated from St. Lawrence College with an Advanced Diploma in Graphic Design, Johnathan started working in his field instantly. He was worked with design firms and thought leaders in Toronto and now handles most of the web content for RealtySource Inc., Brokerage. Although specializing in web design, Johnathan also excels in logo design, brand development, document design, and pre-press and is starting to learn video production.

No Comments

Sorry, the comment form is closed at this time.