2. Wireframes

The wireframes give us a clear view what the structure of a page (and this don’t need to be all pages of the project) should look and function like.

These days there’s a lot of tools to create wireframes with e.g.: static, clickable, with commenting functionality or not - bottomline, it’s again about what needs to be created - and moreover what’s going to be in the scope. Practically it’s about the budget (how much detail can be shown) and how much the client needs “to see” to get an idea of what’s going to be developed with what functionality.

KISS (Keep it short & simple) - but complete enough to maintain a certain flexibility so a developer can interpreted it in his own way. Of course it’s important to determine what the viewport approach will be (desktop, tablet or mobile) so it’s clear what will be shown on particular screen sizes.

My preference are still a certain amount of “static” wireframes (after hand-sketched on paper) drawn in illustrating (e.g.: Affinity Designer, Adobe UX, Illustrator) software. First of all it’s fast - very fast. Especially when you create a library off re-usable symbols the process of creating wireframes it’s like “sketching” a GUI. From my experience desktop (large wireframes) are the most clear - but “mobile first projects” of course prefer to be drawn in portrait ratio.

The result can be printed, exported as PDF or presented onscreen and gives the viewer a good and realistic view of what a page is going to look like - without caring, (or being distracted) what the design is going to look like! In this phase we don’t want to think about that yet - tho the wireframes can be the grid which gonna use for our design elements.