Create an Offline Website Mockup
Website
mockups can be created in lots of different ways. It's true there is no
'best' approach, but depending on certain UI and UX designers' styles
and preferences (and the design process), some will work better than
others.
Let’s
look at the pros and cons of four of the most popular options:
end-to-end UX tools, mockup tools, graphic design tools, as well as
coded designs that start to blur the lines between website mockups and
prototypes.
End-to-end UX tools
At
the highest tier are end-to-end tools that aim to satisfy the entire
workflow: mockups, prototyping, documentation, developer handoffs, and
design systems. UXPin has been catering to this need since the early
2010s, but a number of other brands, such as Adobe and InVision, are now
also trying to create the ‘one tool to rule them all’.
With
UXPin, for example, you can create mockups with multiple states and
interactions. It even mimics some features of Photoshop and Sketch by
including a Pen tool.
On
the other hand, Studio by InVision, allows for some pretty nifty
animation editing; while Adobe XD lets you open Photoshop and Sketch
files inside your XD designs, and apply colours, symbols, linear
gradients and character styles.
When selecting an end-to-end tool for creating your website mockup, it’s worth considering the following aspects:
- Fidelity: How powerful is the tool for visual and interaction design?
- Consistency: What features ensure design consistency in your work?
- Accuracy: Do the elements you’re working with reflect the ‘source of truth’ in your organisation?
- Collaboration: Can you collaborate with stakeholders or other designers?
- Developer handoff: How does the tool generate specifications and assets for developers?
Dedicated mockup tools
Less
robust solutions such as Principle, Framer, Moqups or Balsamiq can
still provide you with everything you need to build your mockup – you’ll
just lose the additional workflow and design consistency features.
These tools are designed to make the creation process as easy as
possible, so you can focus more on stylistic decisions and less on how
to manipulate the program.
Dedicated
mockup tools have clear advantages: Beginners benefit from their ease
of use, while experts appreciate the designs specifically tailored to
their advanced needs. On the more advanced end, tools like Framer and
Principle specialise in animations and interactions for mockups.
On
the lower end, Moqups and Balsamiq provide more functionality than
non-design tools that are sometimes used for wireframes and mockups
(such as Keynote), but they are limited to only low-fidelity designs.
They can, however, be quite useful if the goal is to create low-fidelity
wireframes very quickly.
Graphic design software
Some
designers swear by software like Photoshop CC, Sketch or Illustrator
CC, especially those particularly skilled or familiar with tools that
offer control down to the pixel. Graphic design platforms work best if
you're aiming for the highest level of realism and visual fidelity.
Working
in graphic design software gives you access to an almost endless
selection of highly defined colours, so if you're working within the
restrictions of a rigid and preset colour scheme – for example, under
particular branding rules – then these programs may be your best option.
More than colour options, these programs offer far more visual tools,
allowing you to tackle the minutiae of detail.
However,
the drawback of using this type of software is that it can be difficult
to translate when it's time to start coding the design. What worked in
Photoshop may not always work in code (elements like fonts, shadows,
gradient effects, and so on), which can translate to time wasted
figuring out solutions for the prototyping phase.
Coded mockups
If you're mainly a designer and not comfortable with coding, then this obviously isn't an option.
Most
coding can be postponed until the prototyping stage (if you're creating
an HTML/JavaScript prototype) or even later (if you use a prototyping
tool). But despite the complexity and potential obstacles, there are
many respectable designers who advocate introducing code into the mockup
phase.
While
improvements in tools and technology mean that more and more
possibilities are opening up in layout design, not everything is easy
(or even possible) to recreate in code. Starting in code lets you know
right away what you can and cannot do. If you’re comfortable with code,
it can also be argued that starting with this is less wasteful – the
mockup is going to end up in HTML/CSS anyway.
Comments
Post a Comment