Get your screen together - design skills for frontend people

Get your screen together
Design Skills for Frontend People

Sílvia Otto Sequeira
Head of UX/UI Practice | OutSystems
silvia.sequeira@outsystems.com
linkedin.com/in/sottosequeira
Sílvia Otto Sequeira | Design Skills 4 FE People

Why should you learn about Design?
Well, maybe you shouldn’t.

I suck
at creating screens.
I don’t wanna do it. Where’s the
freakin’ designer
when I need him?
This is impossible to implement.
How do they get these crazy ideas?

Design is everyone’s job.

Non-Realistic,
Non-Performant
icon
You’ve gotta know what
works and what doesn’t
Near Enough
Complex
Near enough is okay
for most stakeholders
iconicon
Winging It
Moments
The features that
come after Design
icon
Backend
Mindset
Does it work?
Then it’s done
icon

Everytime you face something like this,
you’re forced to make design decisions.

Also, understand & discuss what designers are doing
doesn’t make you a designer.

You’re in the end of the line

But someone had to deal with this

User Experience User Interface Development
What lies beneath

This is Design

And this is Design

Ideation Creation Delivery
Design decisions are made
throughout the cycle

ON an’ OFF Screen
User Experience

Business Analysis identiﬁes crucial business goals and metrics,
and informs design decisions.
Illustration: https://jamieclouting.co.uk
And to really deal with the empty screen,
you just have to forget about it

• Deﬁne clear goals
• Understand the business
• Interview main stakeholders
• Review current application
• Get analytics
• Figure out the different personas
• Identify what to ask the users
Photo: http://www.uxlady.com
Design doesn’t start at the desk

User Research identiﬁes pain points and user needs.
From interviews to observation, multiple methods can be applied.
Illustration: https://uxplanet.org
Meet the users

• Go where users are & take the team
• Perform interviews
• Observe
• Understand the context
• Capture the ﬁndings
• Meet and share afterwards
Don’t listen to what they say

Mockups communicate the structure and layout through
varying levels of ﬁdelity. Make it fast and sketchy to start with.
Cancel
Send It Again
Send Text
Done
Insert the code
received by text
- - - -
Now to the blank screen

•Capture ideas
•Information Architecture
comes in handy
•Keep sketching and getting
feedback
•Learn your heuristics
Fire your first shot

From Jakob Nielsen’s Heuristics
Uploading 3 of 3 files
Image1.png
Image2.png
Image3.png
Uploading
Image1.png
Image2.png
Image3.png
#1 Visibility of system status

Back to homepage
#2 Match between system and real world

Cancel
Send
Proceed
Done
System will send
a message to you,
please wait.
#3 User control and freedom

Add to Cart Add to Mall
#4 Consistency and standards

Cancel Del.
You’re about
to delete file
lastsummer.pdf
Done
You have
just deleted
lastsummer.pdf
#5 Error prevention

Step 1 Step 2 Step 3
Previous Next Step
#6 Recognition rather than recall

#7 Flexibillity and efficiency of use
Charlie Foster
UX Designer
Nelle Manning
Developer
Luella Schwartz
Designer
See full team
Charlie Foster
UX Designer
Nelle Manning
Developer
Luella Schwartz
Designer
Load more 100 users…

Search by Name or Role Search
First Name
Last Name
Role
Search
#8 Aesthetic and minimalist design

Your file was deleted! UNDO Your file was deleted! Have a nice day!
#9 Help users recognize, diagnose
and recover from errors

Username
Role
I work as a...
Search
A username is...
Username
Role
Search
#10 Help and documentation

Usability Tests validate the proposed path
with direct feedback from the users.
Get better at it
5 users?

• Prepare the scenarios to
be tested
• Ask users to complete
the main tasks
• Hallway testing if nothing
else
Get better every time

Screen Deconstruction
User Interface

Design is form and function

Time to implement the experience in high-ﬁdelity,
using images, colors, fonts and other visual elements.

C
Color Tone/Value Orientation/ PositionSize/Shape
Title
The modern world is in a continuous movement and people everywhere
are looking for quick, safe means of accessing accurate information.
Prompt information is vital for people who want to keep the pace with a
constantly evolving society, and many people are turning to the Internet
for help in their quest for knowledge.
The Internet is not only the best means to quickly access information, it
also has the merit of bringing people all over the world together, allowing
them to interact in a safe, exciting environment. Desiclassiﬁeds web site
stands for contrast

Color Size Shape Texture
R stands for repetition

Emphasizes Left, Center or Right Grid/Structure
A is for alignment

Spacing Shape TextureColor
P proximity is key

Variations
We don’t need to import all the weights,
example Exo 2 has 9 weights, but we need to have
enough contrast between headings, that usually is
H1 32px, H2 24px and H3 18px; and paragraph
style, that usually is 16px or 14px minimum.
So we will probably need a Regular, Semibold and
Bold.
This is a example of a H1
This is a example of a paragraph
Bold 32px
Bold 24px
Bold 18px
Regular 14px
This is a example of a legend/note text
Regular 12px
Key points for good use
Typography

Numbers
We deal with a lot of numbers and data, and for good
number legibility all the numbers should be sitting on
the baseline and aligned with the cap height, instead of
going up and down (which is called “oldstyle”).
Can you imagine a big data table or a excel
spreadsheet with the numbers going up and down?
1234567890
1234567890
Do this:
Avoid this:
Typography

Legibility
How easy is to distinguish between individual
letterforms. This is determinated by letter spacing and
font design.
Bad letter spacing or small line height is not good for
your eyes, it makes the text hard to read and you get
tired when reading too fast.
And we don’t want our users needing glasses because
of our text.
AgentlemanfromNewYorkdiscoveredwhathecallsan
“oversight”onthepartof99.9%ofallmarketersthatallowshim
togetotherwisepaid-foradvertisingatGoogleaswellasall
othersearchenginesthatallowsponsoredads.
Andno,nothingabouthis“secret”isillegal–nordoesitrequire
thatyouknowsomeoneonthe“inside”atGoogle,Yahoo,
MSN,Overtureandothers.
Instead,theNewYorkerboastsproudly“…thisissomething
thatIcaughtontojustbefore2000whentherewassomuch
searchenginecrazerunningaround,andstarteddoingsmalljust
totestthingsatfirst…butwhichIlaterexpandedonafter
gettingthehangofit."
Typography

Readability
How easy it is to read. It’s determinated by size, spacing
and color.
Like legibility, readability can make our users life very
hard if they need to almost close their eyes to focus the
text and provoke eye strain.
A gentleman from New York discovered
what he calls an “oversight” on the part
of 99.9% of all marketers that allows him
to get otherwise paid-for advertising at
Google as well as all other search
engines that allow sponsored ads.
And no, nothing about his “secret” is
illegal – nor does it require that you
know someone on the “inside” at
Google, Yahoo, MSN, Overture and
others.
Typography

Performance
Styled fonts can have an affect on your loading time,
make sure you are only importing the weights in use
and one or two font family maximum.
Watch the ﬁle size. WOFF2 has the lighter file size, but
WOFF is compatible with the majority of the browsers.
Consider system fonts for mobile devices using 3G
connections, they also provide a better native feeling.
Typography

E72B37 2E3E53
PRIMARY COLORS
White ECEFF1 CFD8DC
77909C
B0BEC5
455A64 263238
GREY SCALE
Get into the brand universe

Prepare future work
1 2 >< 3 4
Pagination
Inputs and Selects
Color Blue
DoneMake Admin User?
Secondary
Color
Blue
Details
John Carter
Streat 123 N12 2nd Floor
Email Phone Number
Form
Color
Blue
*
Name
Alejandra Camino
*
Address *
Secondary Color
Argentina
City
Lisbon
DoneMake Admin User?
Details

And they’re really about “being able to research
what’s out there, analyze opportunities,
run structured experiments, fail, learn, and iterate
until you devise something of value
that people truly want.”
- Jaime Levy, UX Strategy
Design decisions are made
throughout the cycle

Ideation Creation Delivery
And the designer is not going to be
the only one making those decisons

So fight back
Non-Realistic,
Non-Performant
icon
You’ve gotta know what
works and what doesn’t
Near Enough
Complex
Near enough is okay
for most stakeholders
iconicon
Winging It
Moments
The features that
come after Design
icon
Backend
Mindset
Does it work?
Then it’s done
icon

There are many plugins/apps that you can install in your
computer and see which colors and font they use, or
export assets. This way you can “copy” your favorite
websites.
https://csspeeper.com
http://sipapp.io
https://fontface.ninja
#1 Find fonts and colors

With CSS Peeper we can see some useful information
about this medium page, such as:
- Heading Text Styles
- Body Text Styles
- Background Color
- Colors in Use
- Assets in Use
#1 Find fonts and colors

After you find your favorite colors, it’s time to create a
pallete that can breathe and speak the same language
together. You can simply add your main color and
generate automatically palletes. Then pick your favorite.
http://colorhunt.co
https://coolors.co
#2 Create your pallete

You can’t do nothing without inspiration… That’s why
one of the most important tasks when you’re designing
something is to search and see examples of other’s
work, patterns, trends, or even check what your
competition is doing.
http://www.calltoidea.com
http://www.dribbble.com
https://www.pttrns.com
https://uimovement.com
https://www.uplabs.com
http://uiohmy.com
#3 Get inspired

#4 Find what you need
Here are some links to find stuff like Icons, Images,
Profile Pictures, Names and Demographic data.
https://thenounproject.com
http://iconstore.co
http://uifaces.com
https://www.diverseui.com
https://uinames.com
http://thestocks.im
https://uigradients.com

You already know the importance of having the right
font, right? So, it’s time to get it and use it wisely.
https://fonts.google.com
https://typekit.com
https://www.myfonts.com
#5 Discover the right font

To have the best performance with lightweight icons
and to avoid the blured icons in the retina screens
(common problem with png images) we recommend to
use the icons as an iconfont.
To do that you can use the Fontawesome pack, or you
can create your own in Icomoon.
To create an iconfont in Icomoon you just need to have
the icons in SVG format and import them to this tool.
When you generate the font you will get a CSS File with
all the icons you choose.
http://fontawesome.io
https://www.icomoon.io
#6 Using Icon Fonts

Do you have a Sketch file or are you collaborating with
a design team? Cool! They can add the design in one
of the following softwares and you can extract the code
and assets from there.
https://zeplin.io
https://avocode.com
https://www.invisionapp.com/trial/enterprise/inspect
https://icons8.com/lunacy
#7 Inspect the code

Your job is done and it’s awesome, but now you feel
that you need something to pump what you have done.
I know that feeling, check these animations and use
some ideas.
http://codepen.io
http://littlesnippets.net
https://codemyui.com
http://cssdeck.com
#8 Move like Jagger

++
#9 And connect the dots

Thank you.
silvia.sequeira@outsystems.com
linkedin.com/in/sottosequeira

Get your screen together - design skills for frontend people

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Get your screen together - design skills for frontend people

Ähnlich wie Get your screen together - design skills for frontend people (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Get your screen together - design skills for frontend people