BACK TO BLOG

Wonderful wireframes

Creative Designer Lucy tells us why she loves wireframes and shares her top tips for wireframing.

Creative, Strategy

The Saint

Get in touch

As we all know, we no longer access websites from a single machine but from multiple devices of varying specifications and sizes, anytime, anywhere. Not only this, but as users we always expect and want the perfect experience every time. With these high demands of designing perfect digital experiences, it’s never been more important to plan ahead and get things right.

As a Creative Designer at Omobono, I love process and one aspect I’ve become particularly passionate about is wireframing. I just love it!

What are wireframes?
Sometimes referred to as a screen blueprint or a page schematic, a wireframe enables us to plan a website’s layout and arrange the content, taking into consideration the site objectives and user goals. Stripped of all design, the wireframe’s purpose is to focus on functionality, behaviour and content.

Depending on the scale and need of a project, wireframe styles can range from simple hand-drawn sketches (known as low fidelity) to fully functioning prototypes (high fidelity), but essentially they are all visual guides that represent the skeleton framework of a website and can later inform design, editorial and development.

Why are they important?

  1. Design process and sign off
    There is a perception that clients are keen to jump straight to design and see something ‘beautiful’. But they can also value process as much as we do. And by helping our clients to understand the importance and benefits of wireframing, we can help them to get the most out of their project. Wireframing shouldn’t be seen as a barrier preventing or delaying design but an invaluable tool that significantly helps it. A wireframe gives the designer everything they need, so that they can work their magic! Having the client involved with the wireframes and feeling part of the project from the start also helps us to move to through the design and development stages smoothly and on-schedule, with designs more likely to be signed off early on.
  2. Content and user experience
    By planning the layout and structure of the pages, we can identify the content we need, and how we can make it as engaging as possible for the user, early on. And wireframes are particularly useful for looking at the smaller but equally important details, such as form fields and confirmation screens. Online forms can be a real downfall of a user journey, so wireframing these stages and planning the content early can help to ensure a great user experience.
  3. Timely problem solving
    The great thing about wireframes is that they make it so easy to identify and rectify any issues that arise. You can quickly get a real sense of how a website will work and how easy it will be to navigate. Everyone involved can review and test the wireframes and it’s easy to make iterations throughout the process. The iterations could involve form changes, adding pages, changing layout and structure or simply renaming a page. This means that we avoid any nasty surprises later on. It’s very easy to change a wireframe but having to change a fully designed or developed site can dramatically affect the project, often with time and cost implications.For me, wireframes play an essential role in any digital project. Done right, they have huge benefits – from saving time and money to ensuring projects run smoothly and are highly rewarding for everyone involved.

Which wireframing tool is best?

There are so many wireframing tools out there, including Balsamiq, Visio, UXPin, InDesign and Illustrator. And don’t forget pen and paper! It really comes down to personal preference and the requirement. If you need something fleshing out quickly, then sketching is often best. My personal favourite for higher fidelity wireframes is Axure Pro. I find it extremely flexible and adaptable. Using drag and drop, it’s really easy to add elements to the page and start wireframing. You can create a sketch look if desired and add images and buttons to the page. Forms are also easy to create, and with links and dynamic panels you can create fully functional prototypes. When you’re done, it’s easy to generate an HTML version and test it out for yourself. Once you’re ready to share with your client, you can publish the wireframe and host it on a URL using AxShare. For presentations, you can export all the templates to images.

5 top tips for wireframing

  1. Involve everyone from the start
    To get the most out of wireframes, it’s crucial to get everyone involved from the offset. Strategy, UX, design and development should all collaborate and contribute, ensuring transparent communication and efficient problem solving. By bringing these heads to the table, we can maximize the expertise and resources available – to not only meet the client’s requirements but also deliver them in the best way possible.
  2. Keep it simple
    It’s important to keep the wireframes free of any design elements, to avoid any confusion with the client. This means keeping them free of colour, typography or nice looking buttons and images. The priorities of the wireframe are solely to focus on functionality, behavior and content. Design will only distract from this.
  3. Avoid Lorem Ipsum!
    Where you can, the wireframe should contain as much real content as possible. It’s important to get everything as accurate as you can, so that the wireframe can be reviewed and tested successfully and give the designer and developers as much information as they need. This also helps to avoid the unforeseen and the classic case of squeezing 500 words into a box that was designed to only accommodate 100! If you can, try and involve the copywriter early on, so that you can at least establish word counts and guidelines, even if you don’t have the actual copy in the early stages.
  4. Include image details
    As with including copy, it’s also really useful to specify any image details early on too. This may include whether the image is landscape, portrait or a cropped close-up. Other details may include annotations, sizes, zoom functionality and whether the image forms part of a carousel. Overall, all these details will give everyone a much clearer idea of how the website will look and work.
  5. Highlight priorities
    While we need to keep the wireframes free from design, using subtle (greyscale) shading is a nice clear way to highlight the priorities on the page. So, if there’s a really important ‘contact us’ or ‘buy now’ call to action, use darker shading for those elements. This will help when testing user journeys and goals and will also show the designer which elements need to be more prominent in the design.

More from this expert

Where have all the good mar...

"The general tendency of things throughout the world is to render mediocrity the ascendant power among mankind."- John Stuart Mill see more

The Saint

The challenge with digital ...

Marketers love buzzwords. KPIs. Artisan. Synergy. Millennial. Disruptive. Innovation. Cutting Edge. Trending Now. Customer-Centric. And the list goes on. see more

The Saint

The faces of things to come

Picture the scene. You’re critically ill. The choices you face are all time consuming, physically demanding or worryingly expensive. You’re understandably nervous, but ready to ... see more

The Saint