Use personal pronouns to elicit a relationship with the user
Avoid using exclamation points which creates pressure for the user
Choose bullet points or short sentences over paragraphs
Choose symbols and/or icons over words where possible
Buttons
Size and colour can be adjusted
to fit the screen's aesthetic. Main
CTA button size can be adjusted
but should take up majority of
screen width
Tags
Size can be adjusted but should
remain in this colour
Input
Size and colour of input section
can be adjusted to fit the screen's
aesthetic
Next
To indicate progress
Crowd
Size and colour can be adjusted.
A gradient is used to add slight
depth
Button Button
Name
Main CTA
m/s020
Forecast
Reliable
Forecast views should be reliable
through the organization of their
content.
Convenient
Forecasts need to be displayed
so that it is easy for the user to
understand. Colour, grouping,
typography all needs to be
purposefully used
Beautiful
Colours need to complement
their information. Icons need to
be modern and pleasing. There
has to be a visual flow in the
forecast
Multiple day table
Daily table
Home screen
List view
Metrics grouped in categories;
air, water and wind.
Clear division between the days.
Categories elevated with
shadow.
Icons expandable to see their
meaning.
Current time indicated with
"Now".
Metrics change according to
sport chosen.
Accessibility
Reliable
For Vela to be reliable for all
types of users, accessibility needs
to be considered
Convenient
Features need to be convenient
for users who have accessibility
issues
Beautiful
The design needs to be beautiful
in all aspects; content, colour
and layout so that it caters to a
large number of users
Colours Text colour and background colour should have strong contrast (use Material Design tool)
Where possible, use visual cues to show action or feedback additionally to colour
Hierarchy Make sure each element is clearly distinguishable through element edges, shadows and
elevation
Establish hierarchy of content through clear size, placement, elevation and style of typography
Touch Ensure that touch targets are at least 44x44dp
Grids and Layouts
Reliable
For Vela to be reliable, it needs to
be responsive
Convenient
Content which can be accessed
on different screens is convenient
Beautiful
Content needs to remain
beautiful in different sizes
Mobile
Columns 12
Gutter width 6
Desktop
Columns 12
Gutter width 16
Inactive Active
8:00 10:00 12:00 14:00 16:00 18:006:00
Home has 3 background options
so far. The first is for a clear day,
the second is for night and the
third is for a cloudy/rainy day.
The icons here are displayed with
colour
This view is used in search,
browse, favourites and nearby
locations sections
Blobs
The purpose of these blobs are to
add unity between a screens and
to create a product identity. They
should be used sparingly and
should never interfere or take
away from the content of the
screen
datedateoday00 05.5.80.09 ed00 05.5.80.09 u s00 05.5.80.09 elao o o00 05.5.80.09oday000o000 :005:008:00008000805.5.5.05.65.83.65.05.5805.65.5805.65.5805.65.5:00000:00003:00006:0000o o o5.65.580000.09880.80.8.0080.800.80.8080.8080.8080.88800.80.8800.80.8800.80.8800.800009:00:005:000805.65.50805.65.50805.65.58:000805.65.5
