Getting Started with Wireframes

As a skeleton for digital projects, creating wireframes is one of the earliest design activities, it plays a fundamental role when organising information architecture and layout. A wireframe is one of the simplest graphical representations of a web page, app or product, made of basic components such as line, boxes, text and buttons. This practice is critical for UX/UI designers but might be helpful also for managers, developers, marketers and other project team members to create foundations for a great design.

Wireframes can be either sketched on paper or created with specific graphic tools, web apps as Proto or even simple softwares like Keynote or Powerpoint.

Despite this, hand drawing on paper or on a whiteboard can be a great, quick way to start and experiment while organizing the visual hierarchy. This may come even more productive when done with a team, allowing everyone to brainstorm while testing different ideas.

Hand-drawn wireframes made in a first design stage for Yalp Mobile App

What to keep in mind

  • Base your design on a solid research. This can take time but it’s primary to better understand which needs and habits users have on a specific market niche or product, as well as helping to find new trends and inspiration on that line.
  • Keep it simple. No colors – apart from black and shades of grey – no graphics. Just lines, boxes and short text. This will make it easier to focus on the information architecture and basic functionality.
  • Mobile first. Mobile users are increasing – according to Statista there are 4.68 billion mobile users in 2019 and the conversion rate for mobile is higher than for desktop. Mobile first design makes it easier to recognize key funcionalities and give them a hierarchy, besides a lot of good reasons for adopting it.

Share it!:

Leave a Reply