FEATURES
The ultimate UI design guide
Converting design elements into components means we can reuse them
multiple times, helping speed up the workflow and maintain consistencycreate your
components
workflow may differ depending on your
UI tool.
This method of creating style guides
(and eventually creating the design
itself) works especially well with
modular/card-based layouts, although
‘common areas’ such as headers, footers
and navigations are also excellent
candidates for a component.
Just as we’ve done with our
typographic styles, colours and buttons,
we must remember to organise our
components carefully.Utilising our rules
Earlier on I made a small remark about
not using branded CTA buttons on top
of the brand colour, since branded CTA
buttons obviously need to stand out
amongst everything else. So how do we
go about creating a branded component
while still being able to use a branded
CTA button? After all, if we’re using
neutral dark buttons for, let’s say,
navigational buttons or simply less-
important buttons, that just wouldn’t be
an option, right?
Right. So this would be an ideal
opportunity to create a component –specifically, a heading + text + button
combination. Notice how I’ve created a
neutral light ‘card’ backdrop to enable
the use of the branded button. Similarly,
the neutral light form field (form fields
are usually white because of the mental
model historically synonymous with
paper forms) doesn’t look amazing on
the neutral light background so they
can only be used on the neutral dark
background – either directly or within a
neutral dark component. This is how we
make our design flexible while obeying
our rules and maintaining consistency.Stress testing
Ideally, the quickest and most effective
way of ensuring robustness in our design
is to stress test it. Putting a design to the
test means being cruel. Let’s say that we
have a navigation with X amount of nav
items because that was the requirement;
in order to really ensure flexibility, try
changing these requirements by adding
more nav items or, to really throw a
spanner in the works, try also adding a
nav item with a higher visual hierarchy
than the others. Do our size, typography
and colour rules allow for something
like this? Or in order to offer optimal
usability do we need another rule?
Bear in mind that there’s a difference
between adding rules and bending
the rules. More edge cases means less
consistency, so most of the time it’s
better for the sake of usability to simply
rethink the component.Creating components
C
omponents are a huge time saver
and all UI design tools offer this
feature (eg in Sketch, they’re
called Symbols). In Studio we can create
components by selecting all of the layers
that should make up the component and
using the δK shortcut.Using components
Now we can reuse this component
by dragging it onto the canvas from
Libraries > Document on the left-hand
side, although bear in mind that thisUtilising
wireframesWireframes are very useful, not only
for designing high-usability UIs but
also for finding out what our UI will
require in the long run. It’s sort of like
future-proofing.
Now, this doesn’t mean that we need
to design loads of components or be
ready for any possible scenario but it
does mean that we need to employ a
‘What if?’ attitude.
For example, if our wireframe calls
for a 3x1 component but we know
that the content isn’t set in stone, a
little contemplation might lead us to
wonder: ‘What if this components ends
up being 4x1?’. The rule-of-thumb is:
design only for the user needs that
already exist but try to make solutions
relatively flexible. Otherwise, we’ll wind
up with some very messy ‘design debt’
later down the line. Above Creating a neutral light ‘card’ backdrop enables
you to use a branded button on a branded component