MockFlow.com is a free website that can be used to produce wireframe diagrams of websites, apps and desktop applications. It offers a wide range of templates to wireframe for including all three popular mobile platforms (iOS, Android and Windows) and you can simply create wireframe designs by dragging and dropping elements onto a canvas. Wireframes can be exported in a number of formats such as PNG images and PDF documents. There are lots of other wireframing tools and in later projects I will probably use the new Adobe Experience Design app which is available as part of Adobe Creative Cloud but there are other ones too. I used MockFlow for this project because at the moment my university doesn’t have Adobe Experience Design and MockFlow is free and works online.

It’s a lot quicker to use a program like Experience Design or a website like MockFlow to create wireframes for user interfaces than something like Photoshop or Illustrator because these programs have been designed with wireframing in mind and have all of the common elements such as buttons, header areas, image areas and navigation bars ready to simply drag and drop onto a canvas, whereas in Photoshop or Illustrator you’d have to manually create all of these elements yourself. Using Photoshop or Illustrator will give you a lot more control, but when it comes to wireframing everything is pretty standardised anyway (read on!) and so you don’t need to have a whole lot of control.

Why wireframe?

I find wireframing a good way of getting initial design ideas down. By dragging and dropping elements onto a canvas you can quick and easily see what ‘works’ and just doesn’t. You can get a great feel for where elements should be placed to create a great design that fits a design framework of your choice (hopefully the one most applicable to the interface you are designing for) and if you find elements don’t look right where you’ve placed them, or you don’t feel the design is appropriate, you can either start fresh or just move elements around until you’re happy without losing any code or other functionality.

From a wireframe you can create a prototype which is a more thought-out design involving the use of colour and images and you can also create user journeys too – more on both of these things in later posts.

Wireframing guidelines

Wireframing is different from prototyping – it’s a much more basic level of design and should only include the bare minimum amount of detail. Really, it’s just to see how elements look when placed next to one another to create a design. Therefore, a wireframe should:

• Not include any images, video or other media assets – use a placeholder instead to denote where such an asset would be placed
• Include as little colour as possible, ideally no colour at all – if you need to distinguish between shapes, use different shades of grey or black
• Use only one type of font, but it is OK to use different font sizes to distinguish how text will look on different parts of the design
• Not include any text that will appear on the website, instead Lorem Ipsum or text such as ‘title here’ (where a title would be) should be used

Wireframes should include placeholders for:

• Logos
• Any photos, videos or any other media assets
• Search fields
• Breadcrumbs
• Headers
• Body content
• Any sharing or social media links
• Contact information
• Footers

As you can see, it’s nowhere near as detailed as a prototype or other types of designs – a wireframe is just a starting point.

My wireframing attempt

I’ve been coding (on and off, admittedly) for over 7 years now and I’ve never once wireframed – wireframing is an idea that has only recently been introduced to me and I can see the benefits of doing it. It’s great to go into creating an app or a website and having an idea of what it may look like before you start. I really enjoyed the wireframing and spent a while making sure that everything looked as perfect as I could make it, though MockFlow’s lack of a reliable ruler and grid system made aligning some elements quite difficult.

The first wireframe I created was a wireframe for the home page of my blog as it appears at the time of writing. It currently looks like this.

Below is my wireframe design of my blog as it looks at the moment.

The big slider image at the top of my blog is represented by the large placeholder and featured images for the articles are represented by the two smaller image placeholders beneath it. Article titles and the dates that the articles were written as well as the first line of each article are all shown. The header and footer area are transparent on the real site and whilst I can’t show this on a wireframe diagram, I can use a shade of grey to distinguish the header and footer area from the main page body to show that these are different elements.

The next task was to create a wireframe of how I could redesign my blog. As explained in my post about why I chose the theme I chose, I’ve always liked images on websites because I think they can really help to make a website look a lot more appealing by adding more visual content and colour to them. One of my peers, Ameer Al Ashhab, uses a really nice theme on his blog that shows his posts as picture tiles on the home page. We all know I’m a fan of Windows Phone and its tiles interface, so this appeals to me! Below is a screenshot of his blog.

I decided to create my alternative blog UI using a design based around the interface of his blog, my wireframe shown below.

In this design, the header and footer are still translucent but there is no large slider image and instead each blog post is displayed as a ’tile’, with the image placeholder in each tile being filled with the featured image for the article. This will produce a very colourful looking and visually appealing front page, though my concern might be that it could be a little distracting or disorientating for the user and they may not know where to click first as each tile is a random size and not laid out in any particular logical idea like the theme Ameer uses on his site. The article title and the date it was published is displayed in a translucent box at the bottom of the tile and the different pages of the site, for example the home page, about page and contact page, are all accessible via a menu bar at the top of the site which is a feature that my blog is currently lacking. The use of circular buttons on the predominantly square tiles interface is interesting, but circles are currently a ‘trendy shape’ and used by many social media sites to display profile pictures – examples include Facebook, Instagram, Flickr and Twitter which all recently changed their square profile pictures to circular ones and even the ‘blockiest’ interface of them all – Windows 10 Mobile – uses a mix of squares and circles in its design. Look how circles are used in profile pictures on Windows 10 Mobile despite the fact that the UI is based mainly on squares!

So, I feel that my design fits in with contemporary design.

Bibliography

Affairs, A. (2017). Wireframing | Usability.gov. [online] Usability.gov. Available at: https://www.usability.gov/how-to-and-tools/methods/wireframing.html [Accessed 17 Oct. 2017].