Basic trends in
We are a web and communication agency that
believes in making things simple for you.
We’ve been around since 2000 and currently have
a staﬀ of 15 web superheroes.
Keeping your web presence up-to-date and
awesome is what we do.
A design philosophy / style
that is trending in web and
user interface design today.
It is often called minimalism
with a diﬀerence. It keeps the
clean, open spaces and
compact content of
minimalism but adds bright,
bold colours and improved
deﬁne Flat UI?
Bright solid colours
2D illustrations and
Lots of breathing room
Clearly marked interaction and
It is compatible with responsive and mobile use. The simpliﬁed
layouts are easy to optimize for all your users with all their
diﬀerently sized devices.
With Skeumorphism no longer required for our tech increasingly
tech savvy world, ﬂat UI is a style relevant to our times and where we
are at right now with technology use.
68% of web professionals say that ﬂat design is here to stay. 500
million Apple devices with ﬂat design interface were sold as of
January 2013. Flat interface was expected to be on roughly 1 Billion
Android devices by end of 2013.
Not too long ago, computers were a new and alien thing to most
people. Enter Skeuomorphism. The idea is simple: to create
metaphors. Take unfamiliar technical concepts and give them
familliar names and faces.
Making a bunch of code look like a real life
folder is skeuomorphism. Creating a copy of
a real life object where it doesn’t belong for
the purpose of creating familiarity.
Web users today are a lot more tech savvy
than the newbies of 20 years ago. It is no
longer necessary to mimic the detailed
information of real life objects.
Exciting things are happening with the combination of
Flat user interface with 3D or video elements. Can this be
a strong emerging trend for the coming year?
“A�ter radical �latness, we’ll probably
see designers carefully reintroduce
dimensionality where it’s really needed.”
Check out the 3D WebGL Spacewalk
for a stunning 3D experience
Elegant ﬂat interface with
incredible video interactions
With minimization of
content, the little that you
have becomes even more
important for proper display.
Responsive typography can be
of 2 types: Adaptive and Liquid
Responsive typography is not
just about resizing a container
and having the text reﬂow
inside it automatically. You’re
only doing half the job unless
you achieve readable font
sizes, line heights and line
lengths for various screen
Full liquid responsiveness
CSS Viewport Units deﬁne text size in viewport percentage. This
means that the size of the font is relative to the size of the containing
block (browser window). When the block changes, so does the font
Needs a manual or JQuery refresh with change in browser size.
A solution more for the near future than right now. Browser
compatibility for CSS vu is not great yet but quite likely to improve
soon. Stay informed.
1vw = 1% of the width of the containing block
1vh = 1% of the height of the containing block
1vmin = whichever is smaller of 1vw and 1vh
1vmax = whichever is larger of 1vw and 1vh
For general text
For important full
width headlines: SLABTEXT
Currently, the most common method of achieving
Only adaptive responsiveness possible. This means that you can
deﬁne font sizes for ﬁxed screen sizes. The font size will only
change at these particular sizes or manually deﬁned breakpoints.
While media queries work just ﬁne for now, we still see the
importance of liquid responsiveness over adaptive. At the
moment, there might only be a handful of screen sizes to set
breakpoints for but as our digital devices get more varied and
more screen sizes come into play, it might not be practical
anymore to only design for a few.
There is an increasing focus on responsive and mobile
websites, as you might have noticed. It is leading to some
general trends in web design that you should keep in mind:
Lightboxes, overlays, expanding/repositioned tiles, inﬁnite
scrolling etc: Anything that makes the most of limited space.
Designed with limited mobile screen space and the swipe
motion in mind.
Integration with social media: Like buttons, sharing
functionalities, link to apps, email subscriptions - you name
it, it’s there.
Video or infographic content: Why read what you can
watch? Simple, compact and easy to view.3
A ﬁxed navigation
bar with a difference:
Why be boring?
Long, solid sections of text1
Fixed position content: All these new levels of
content on a long scrolling page can really disorient a
user, which is why it’s good to provide an anchor.
Fixed navigation bars are a sensible trend to follow.
THE 5 MINUTE FIX!
Need a quick & dirty colour
picker that still keeps your
design looking fresh and
Confused about what colours to use?
Flat UI brings with it the use of simple, bright colours.
Use a bold, mixed palette or keep it minimalistic with a
Trended heavily through 2013 and into 2014
Pantone Colour of the Year 2013
Pantone Colour of the Year 2014. A
trend waiting to happen?
Still using sliders?
Consider a large hero area instead.
Use the space that gets the most attention on your
website to get the most important point across.
MAKE A STATEMENT
INTRODUCE YOUR BRAND
How can you use it?
There are a host of easy eﬀects that can make simple acts like
scrolling, hover eﬀects, sliding open boxes or ticking a
checkbox more engaging for the user. Use with subtlety.
The easiest way to start with microinteractions can be with
CSS 3 transitions.
Why is it important?
With minimalisim and simplicity being the trend now, design can
get a little bit boring. Use Micro UX to liven up user experience,
improve usability and make your website a memorable experience.
What is microinteraction?
In terms of web design, it is every tiny action a user takes on
your website, hovering over a link for example.
01 585 60 71 1418
Magdalenenstraße 33, 1060 Wien
What web trends are you following?
Get in touch and let us know. We’d love to hear from you.