UX Design Tip #4: Wireframing
Context:
Beginning of this year I decided to work as a freelancer. Working in companies for most of my career, I never bothered to have a website of my own that showcased my credentials, experience, qualifications, etc. Now that I’ve been on my own for a while, it’s become that much more important to have something potential clients can refer to when in conversation with me.
Luckily, a friend of mine was able to help me out by creating a basic landing page for me. Something that could hold salient information about what I do, without it being overly complicated. The result is what you are looking at below:
After almost a year, I’ve decided it’s time to revamp my landing page and what better way than starting with a good old wireframe.
Wireframing:
I am going to hold the phone for a sec, and first get through the basics of what a wireframe is, and why we need one? At a basic level, a wireframe is a skeletal design of a webpage or app solution. Depending on the level of detail of the wireframe, wireframes will usually provide an overview of the information architecture, page structure, content layout, functionality, and navigation flow of the webpage or app solution.
Designers use wireframes to test with users (or potential users) and stakeholders regarding how close the designed wireframe is to meeting identified problems (these would have been identified during scoping and discovery phase). It is also a great tool to elicit feedback from users, refine business & system requirements, and ensure the best user experience is catered for from the start. I should note, it is recommended to keep wireframes as minimal as possible, avoiding adding elements such as colour, branding, pictures, etc. Adding such elements may distract users or stakeholders from giving feedback around functionality or navigation but instead, have them fixated on what colour a button should be or how big the logo needs to be.
Alright, now that is settled, let’s jump back to my website design. Also note, at this point you may continue reading the following paragraph or skip to the video ;)
Starting off with a few sketches to get a basic structure of my website, I quickly moved to digitising my wireframe using Adobe XD. The website has a navigation at the top, a footer at the bottom and a landing page. The landing page is made up of 3 sections: About me, Approach, and Companies — each section has a “Learn More” button that opens up a page with more detailed information. Then lastly, a “Contact Me” form that can be accessed via the navigation for potential clients who want to contact me.
The video below is a visual representation of the above paragraph.
Conclusion:
Now that I’ve got a good idea of what the layout of my website is, where content will display, and what kind of functionality I will have — it’s time for me to make a high fidelity design. I will share the end result on the next article so you can see how it’s turned out ;)
Until then, stay woke.
#YourFriendlyNeighbourhoodDesigner
