The document provides guidance for frontend developers on acquiring design skills. It emphasizes that design decisions must be made throughout product development. It encourages developers to fight perceptions that design is only the designer's job by learning basic design principles and processes. This includes conducting user research, creating mockups, implementing designs, and validating designs through usability testing to improve products based on direct user feedback.
I've been developing quite a bit over the past year. I've been taking classes and going to seminars. I've pixel pushed and presented. All I need now is somewhere to apply my newfound skill set.
Play & Work: How Tangibles Offset Design Thinking Flaws | Annemarie Lesage | ...Service Design Network
Annemarie Lesage, a current lecturer from HEC-Montréal, speaks at SDG19 in Toronto.
Design thinking is great, but it will not magically transform an organization from product to service provider (... i.e. the next UBER!). For DT to deliver, the divergent and convergent ideation phases need to both be optimized. This presentation, based on academic research and practical case studies, is about the DT challenges we met while accompanying organisations in this evolution toward providing services: Making sure the divergent phase was really divergent and the convergent phase indeed converged towards innovative, realistic win-wins.
Become a member!
https://www.service-design-network.org
Follow us on Twitter: https://twitter.com/sdnetwork
Or on LinkedIn: https://www.linkedin.com/company/2933277
Like us on Facebook: https://www.facebook.com/ServiceDesignNetwork/
Behind-the-scenes on Instagram: https://www.instagram.com/servicedesignnetwork/
I Hate Process/I Love Process - Why designers are divided about process, and ...Joan Vermette
As a designer, have you ever felt frustrated by having to break the creative process up into tiny task boxes that block the way to good design? Have you ever felt frustrated by a lack of structure, leading to endless rework, crossed communication lines, and plain old wasted time? There's too much process in some cultures, and not enough in others. And we declare that we hate process or we love process, as though that were an immutable quality of our souls. But what do designers need? We believe in a core, necessary way of sequencing design work to get the best results. Borrowing from Design Sojourn’s Brian Ling, we express this core as “Think – Draw – Make.” When process chafes us as designers, it’s a sign that an organization is unbalanced in one of these three key activities. If they front-load a project with tons of research and still can’t make a decision, they’re caught in “think.” If they ask us to come to the kickoff with wireframes, they’re caught in “draw.” If they’re hell-bent on getting to build immediately, they’re caught in “make.” Similarly, we’re not blank slates, either – each of us brings our particular skills to a project, and we have our own attachments, as well. Our presentation will discuss how to know which culture you’re dealing with, where you sit with regard to that culture, and provide some skills for how to bring yourself and the culture together back into balance.
How User Experience Addresses Unconscious BiasMarcus Finley
Presentation for NCT4G.
User experience design is one approach to addressing the issues of unconscious bias often found in today’s technology. Unconscious bias is an often overlooked and undervalued aspect of UX design since the little details seem to be so minor to us, however these minor details can have large and lasting impacts. Designing a user experience without paying attention to unconscious biases is leaving out small changes that, in turn, alienate large demographics of people and shrink your client base. On the other hand, making these small changes could be just the kickstart your product needs to expand and catch on within other demographics. This presentation will detail how to identify and overcome unconscious bias in order to achieve the maximum client or consumer base possible.
Marcus Finley, Twitter: @marcusafinley, Instagram: @findigital
FIN. Digital
Concurrent Session
Speaker Bio
Marcus Finley is the CEO and Founder of FIN Digital, a full service application development firm in Washington DC. Marcus graduated from Florida State University where he majored in Mechanical Engineering and Public Administration. Marcus is a certified Scrum Master with expert knowledge of a number programming languages, user experience design and web/mobile application development. Marcus has managed over $3 million dollars of contracted technology development and strategy projects for with an average project budget of $200,000. In his professional roles he has provided technology strategies and user experiences to achieve client’s goals. He has help developed UX practices, lead a number of UX workshops with clients and guided companies with emerging needs of validating applications. He co-founded a Meetup called Color of Tech to bring together a diverse group of technology professionals to network and thrive.
I've been developing quite a bit over the past year. I've been taking classes and going to seminars. I've pixel pushed and presented. All I need now is somewhere to apply my newfound skill set.
Play & Work: How Tangibles Offset Design Thinking Flaws | Annemarie Lesage | ...Service Design Network
Annemarie Lesage, a current lecturer from HEC-Montréal, speaks at SDG19 in Toronto.
Design thinking is great, but it will not magically transform an organization from product to service provider (... i.e. the next UBER!). For DT to deliver, the divergent and convergent ideation phases need to both be optimized. This presentation, based on academic research and practical case studies, is about the DT challenges we met while accompanying organisations in this evolution toward providing services: Making sure the divergent phase was really divergent and the convergent phase indeed converged towards innovative, realistic win-wins.
Become a member!
https://www.service-design-network.org
Follow us on Twitter: https://twitter.com/sdnetwork
Or on LinkedIn: https://www.linkedin.com/company/2933277
Like us on Facebook: https://www.facebook.com/ServiceDesignNetwork/
Behind-the-scenes on Instagram: https://www.instagram.com/servicedesignnetwork/
I Hate Process/I Love Process - Why designers are divided about process, and ...Joan Vermette
As a designer, have you ever felt frustrated by having to break the creative process up into tiny task boxes that block the way to good design? Have you ever felt frustrated by a lack of structure, leading to endless rework, crossed communication lines, and plain old wasted time? There's too much process in some cultures, and not enough in others. And we declare that we hate process or we love process, as though that were an immutable quality of our souls. But what do designers need? We believe in a core, necessary way of sequencing design work to get the best results. Borrowing from Design Sojourn’s Brian Ling, we express this core as “Think – Draw – Make.” When process chafes us as designers, it’s a sign that an organization is unbalanced in one of these three key activities. If they front-load a project with tons of research and still can’t make a decision, they’re caught in “think.” If they ask us to come to the kickoff with wireframes, they’re caught in “draw.” If they’re hell-bent on getting to build immediately, they’re caught in “make.” Similarly, we’re not blank slates, either – each of us brings our particular skills to a project, and we have our own attachments, as well. Our presentation will discuss how to know which culture you’re dealing with, where you sit with regard to that culture, and provide some skills for how to bring yourself and the culture together back into balance.
How User Experience Addresses Unconscious BiasMarcus Finley
Presentation for NCT4G.
User experience design is one approach to addressing the issues of unconscious bias often found in today’s technology. Unconscious bias is an often overlooked and undervalued aspect of UX design since the little details seem to be so minor to us, however these minor details can have large and lasting impacts. Designing a user experience without paying attention to unconscious biases is leaving out small changes that, in turn, alienate large demographics of people and shrink your client base. On the other hand, making these small changes could be just the kickstart your product needs to expand and catch on within other demographics. This presentation will detail how to identify and overcome unconscious bias in order to achieve the maximum client or consumer base possible.
Marcus Finley, Twitter: @marcusafinley, Instagram: @findigital
FIN. Digital
Concurrent Session
Speaker Bio
Marcus Finley is the CEO and Founder of FIN Digital, a full service application development firm in Washington DC. Marcus graduated from Florida State University where he majored in Mechanical Engineering and Public Administration. Marcus is a certified Scrum Master with expert knowledge of a number programming languages, user experience design and web/mobile application development. Marcus has managed over $3 million dollars of contracted technology development and strategy projects for with an average project budget of $200,000. In his professional roles he has provided technology strategies and user experiences to achieve client’s goals. He has help developed UX practices, lead a number of UX workshops with clients and guided companies with emerging needs of validating applications. He co-founded a Meetup called Color of Tech to bring together a diverse group of technology professionals to network and thrive.
I spoke at LA Uncubed to talk about Product Design at Fullscreen. I get into everything from Ideating, research, prototyping, testing & building, and key take aways
Designing for Customer needs: A UX PerspectiveRichard O'Brien
A brief 20 min talk I gave to the Head Start meetup (@HeadStartAus), introducing some Lean techniques to help them consider the customer throughout the product & biz development process.
"A scenario is a description of a person’s interaction with a system.
Scenarios help focus design efforts on the user’s requirements, which are distinct from technical or business requirements.
Scenarios may be related to ‘use cases’, which describe interactions at a technical level. Unlike use cases, however, scenarios can be understood by people who do not have any technical background. They are therefore suitable for use during participatory design activities." http://infodesign.com.au/usabilityresources/scenarios/
Doors are our common language for passing into a place for commerce, socialization or pleasure. Passing from one experience to the next. Doors are our refuge at the end of a long day, they are the start to every work day, every meeting, every meal.
Search is the closest thing we have to a front door, yet it is so often forgotten in the design of user experiences.
Our digital world is becoming more and more like a real place, where we spend our time rather than a tool that we use and put down.
This short talk for Search Love Boston 2013 covers some ways in which user experience and search professionals can better work together to make the internet a better place.
A few weeks ago I had the opportunity to deliver a talk at Shift in Split, Croatia.
Shift is a developer conference, so initially, I thought it would be entertaining to talk about what it’s like to work with an engineer, from a designers perspective. The working title of the talk was Things Engineers Hate About Working With (Me) a Designer.
I was going to share the mistakes I’ve made, and learned from, along the way. A manifesto of what not to do when working with an engineer. However, feedback included phrases like “it’s a bit tongue & cheek” and the best talks are ones that are “raw, honest and vulnerable.”
You don’t write code, but you’ve been successful in spite of it. The lines are blurring between design & engineering. Why not talk about how tools have helped bridge that gap?
There was something more interesting to talk about. I realized that I didn’t write code because I didn’t need to. For years I’d been spoiled, and to some extent enabled, by a handful of incredibly talented iOS engineers. The realization didn’t sit well with me.
I scrapped everything and went back to the drawing board.
Tools were my first introduction to a hobby that turned into a passion that has become an obsession
They have been steadily influencing and shaping me as a designer from the first time I sat in front of a computer in elementary school. I would not realize how much they’d impact my life until much much later.
Tools have had a massive influence on me and my work, but had they on others?
Well let's get real it's a competing world and only the best can survive. We have to always try to get the most out but in a well planned and organised way. The more senior your audience, we learned, the less you should rely on your presentation deck and the more you should expect your 'PITCH' to be a conversation, showing your team’s authentic passion for the challenge or problem and their resilience for solving it creatively, together. So combine your pitch with the combination of killer presentation and impression.
Waterfalls are great to watch... Iterative Design Thinkingnois3
But when you work on digital products working with waterfall methodologies is way too risky. Worst: you start building something on wrong assumptions and it takes forever to deliver.Either you are a big enterprise or a small startup, building great mobile products “per sé” doesn’t make any sense. You’ll always need to build them for your people.I will be presenting you the set of methods we use in nois3:Iterative Design based on multidisciplinary teams working on Jams/Sprints is fantastic to Define, Prototype, and Repeat. Adding a flavor of Data Driven UX will be your game changer to Discover.
This workshop will walk you through the design thinking process in the context of presentations. The attendees will leave with knowledge of tools and processes that they can use when creating presentations or other visual communication tools to make sure they are looking their best.
Eileen Walsh, the facilitator, has a degree in Graphic Design and a masters in Digital Media. She has worked in the area of design and digital media for the last seven years and will be sharing some of the knowledge and tools she uses when going through the design process.
Slides from my talk on the things I've learned by comparing the collaborative process as it is carried out in many modern organizations to the creative process of artists and makers.
An intro to what people (and myself) think UX is. Also who is "doing" UX and how you can do it better. Originally presented at Product Camp Nashville - Sep 2018
Designers shouldn't code - The wrong answer to the right questionMathias Hellquist
A presentation/lecture given at the worlds foremost education for Interaction and Innovation, Hyper Island (in Stockholm, Sweden).
It is meant as an introduction for designers to start seeing the possibilities with CSS, and to promote the idea of doing creative sign-offs (with clients) in the browser, which assumes the creative assets have been taken into the early stages of code in to a working prototype.
It is not meant to create developers of designers. It is meant to increase the knowledge level of designers, which has the added benefit (for them) of becoming more adjusted for future times in their work life, as well as the benefit of leaving the more advanced stuff to developers.
Both developers and designers would benefit from the designers designing suggestions that are easy to transform into code though.
My keynote from the UX South Africa 2014 conference in Cape Town, South Africa
It's a look at the state of play including:
- It's still easy to find poor website UX in South Africa
- Informing digital strategy by making and launching things
- Problems that executives of traditionally non-digital companies face as software slowly eats the word - and some solutions: Proactive research, digital product management, agile...
- Some of the skills and talents that unicorn UX designers need to have
I spoke at LA Uncubed to talk about Product Design at Fullscreen. I get into everything from Ideating, research, prototyping, testing & building, and key take aways
Designing for Customer needs: A UX PerspectiveRichard O'Brien
A brief 20 min talk I gave to the Head Start meetup (@HeadStartAus), introducing some Lean techniques to help them consider the customer throughout the product & biz development process.
"A scenario is a description of a person’s interaction with a system.
Scenarios help focus design efforts on the user’s requirements, which are distinct from technical or business requirements.
Scenarios may be related to ‘use cases’, which describe interactions at a technical level. Unlike use cases, however, scenarios can be understood by people who do not have any technical background. They are therefore suitable for use during participatory design activities." http://infodesign.com.au/usabilityresources/scenarios/
Doors are our common language for passing into a place for commerce, socialization or pleasure. Passing from one experience to the next. Doors are our refuge at the end of a long day, they are the start to every work day, every meeting, every meal.
Search is the closest thing we have to a front door, yet it is so often forgotten in the design of user experiences.
Our digital world is becoming more and more like a real place, where we spend our time rather than a tool that we use and put down.
This short talk for Search Love Boston 2013 covers some ways in which user experience and search professionals can better work together to make the internet a better place.
A few weeks ago I had the opportunity to deliver a talk at Shift in Split, Croatia.
Shift is a developer conference, so initially, I thought it would be entertaining to talk about what it’s like to work with an engineer, from a designers perspective. The working title of the talk was Things Engineers Hate About Working With (Me) a Designer.
I was going to share the mistakes I’ve made, and learned from, along the way. A manifesto of what not to do when working with an engineer. However, feedback included phrases like “it’s a bit tongue & cheek” and the best talks are ones that are “raw, honest and vulnerable.”
You don’t write code, but you’ve been successful in spite of it. The lines are blurring between design & engineering. Why not talk about how tools have helped bridge that gap?
There was something more interesting to talk about. I realized that I didn’t write code because I didn’t need to. For years I’d been spoiled, and to some extent enabled, by a handful of incredibly talented iOS engineers. The realization didn’t sit well with me.
I scrapped everything and went back to the drawing board.
Tools were my first introduction to a hobby that turned into a passion that has become an obsession
They have been steadily influencing and shaping me as a designer from the first time I sat in front of a computer in elementary school. I would not realize how much they’d impact my life until much much later.
Tools have had a massive influence on me and my work, but had they on others?
Well let's get real it's a competing world and only the best can survive. We have to always try to get the most out but in a well planned and organised way. The more senior your audience, we learned, the less you should rely on your presentation deck and the more you should expect your 'PITCH' to be a conversation, showing your team’s authentic passion for the challenge or problem and their resilience for solving it creatively, together. So combine your pitch with the combination of killer presentation and impression.
Waterfalls are great to watch... Iterative Design Thinkingnois3
But when you work on digital products working with waterfall methodologies is way too risky. Worst: you start building something on wrong assumptions and it takes forever to deliver.Either you are a big enterprise or a small startup, building great mobile products “per sé” doesn’t make any sense. You’ll always need to build them for your people.I will be presenting you the set of methods we use in nois3:Iterative Design based on multidisciplinary teams working on Jams/Sprints is fantastic to Define, Prototype, and Repeat. Adding a flavor of Data Driven UX will be your game changer to Discover.
This workshop will walk you through the design thinking process in the context of presentations. The attendees will leave with knowledge of tools and processes that they can use when creating presentations or other visual communication tools to make sure they are looking their best.
Eileen Walsh, the facilitator, has a degree in Graphic Design and a masters in Digital Media. She has worked in the area of design and digital media for the last seven years and will be sharing some of the knowledge and tools she uses when going through the design process.
Slides from my talk on the things I've learned by comparing the collaborative process as it is carried out in many modern organizations to the creative process of artists and makers.
An intro to what people (and myself) think UX is. Also who is "doing" UX and how you can do it better. Originally presented at Product Camp Nashville - Sep 2018
Designers shouldn't code - The wrong answer to the right questionMathias Hellquist
A presentation/lecture given at the worlds foremost education for Interaction and Innovation, Hyper Island (in Stockholm, Sweden).
It is meant as an introduction for designers to start seeing the possibilities with CSS, and to promote the idea of doing creative sign-offs (with clients) in the browser, which assumes the creative assets have been taken into the early stages of code in to a working prototype.
It is not meant to create developers of designers. It is meant to increase the knowledge level of designers, which has the added benefit (for them) of becoming more adjusted for future times in their work life, as well as the benefit of leaving the more advanced stuff to developers.
Both developers and designers would benefit from the designers designing suggestions that are easy to transform into code though.
My keynote from the UX South Africa 2014 conference in Cape Town, South Africa
It's a look at the state of play including:
- It's still easy to find poor website UX in South Africa
- Informing digital strategy by making and launching things
- Problems that executives of traditionally non-digital companies face as software slowly eats the word - and some solutions: Proactive research, digital product management, agile...
- Some of the skills and talents that unicorn UX designers need to have
Similar to Get your screen together - design skills for frontend people (20)
White wonder, Work developed by Eva TschoppMansi Shah
White Wonder by Eva Tschopp
A tale about our culture around the use of fertilizers and pesticides visiting small farms around Ahmedabad in Matar and Shilaj.
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page pmgdscunsri
Figma is a cloud-based design tool widely used by designers for prototyping, UI/UX design, and real-time collaboration. With features such as precision pen tools, grid system, and reusable components, Figma makes it easy for teams to work together on design projects. Its flexibility and accessibility make Figma a top choice in the digital age.
Fonts play a crucial role in both User Interface (UI) and User Experience (UX) design. They affect readability, accessibility, aesthetics, and overall user perception.
Can AI do good? at 'offtheCanvas' India HCI preludeAlan Dix
Invited talk at 'offtheCanvas' IndiaHCI prelude, 29th June 2024.
https://www.alandix.com/academic/talks/offtheCanvas-IndiaHCI2024/
The world is being changed fundamentally by AI and we are constantly faced with newspaper headlines about its harmful effects. However, there is also the potential to both ameliorate theses harms and use the new abilities of AI to transform society for the good. Can you make the difference?
Book Formatting: Quality Control Checks for DesignersConfidence Ago
This presentation was made to help designers who work in publishing houses or format books for printing ensure quality.
Quality control is vital to every industry. This is why every department in a company need create a method they use in ensuring quality. This, perhaps, will not only improve the quality of products and bring errors to the barest minimum, but take it to a near perfect finish.
It is beyond a moot point that a good book will somewhat be judged by its cover, but the content of the book remains king. No matter how beautiful the cover, if the quality of writing or presentation is off, that will be a reason for readers not to come back to the book or recommend it.
So, this presentation points designers to some important things that may be missed by an editor that they could eventually discover and call the attention of the editor.
Storytelling For The Web: Integrate Storytelling in your Design ProcessChiara Aliotta
In this slides I explain how I have used storytelling techniques to elevate websites and brands and create memorable user experiences. You can discover practical tips as I showcase the elements of good storytelling and its applied to some examples of diverse brands/projects..
Connect Conference 2022: Passive House - Economic and Environmental Solution...TE Studio
Passive House: The Economic and Environmental Solution for Sustainable Real Estate. Lecture by Tim Eian of TE Studio Passive House Design in November 2022 in Minneapolis.
- The Built Environment
- Let's imagine the perfect building
- The Passive House standard
- Why Passive House targets
- Clean Energy Plans?!
- How does Passive House compare and fit in?
- The business case for Passive House real estate
- Tools to quantify the value of Passive House
- What can I do?
- Resources
2. 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
3. Why should you learn about Design?
Well, maybe you shouldn’t.
Sílvia Otto Sequeira | Design Skills 4 FE People
4. 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?
Sílvia Otto Sequeira | Design Skills 4 FE People
6. 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
Sílvia Otto Sequeira | Design Skills 4 FE People
7. Everytime you face something like this,
you’re forced to make design decisions.
Sílvia Otto Sequeira | Design Skills 4 FE People
8. Sílvia Otto Sequeira | Design Skills 4 FE People
Also, understand & discuss what designers are doing
doesn’t make you a designer.
14. And this is Design
Sílvia Otto Sequeira | Design Skills 4 FE People
15. User Experience User Interface Development
Ideation Creation Delivery
Sílvia Otto Sequeira | Design Skills 4 FE People
Design decisions are made
throughout the cycle
17. Business Analysis identifies crucial business goals and metrics,
and informs design decisions.
Illustration: https://jamieclouting.co.uk
Sílvia Otto Sequeira | Design Skills 4 FE People
And to really deal with the empty screen,
you just have to forget about it
18. • Define 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
Sílvia Otto Sequeira | Design Skills 4 FE People
Design doesn’t start at the desk
19. User Research identifies pain points and user needs.
From interviews to observation, multiple methods can be applied.
Illustration: https://uxplanet.org
Sílvia Otto Sequeira | Design Skills 4 FE People
Meet the users
20. Sílvia Otto Sequeira | Design Skills 4 FE People
• Go where users are & take the team
• Perform interviews
• Observe
• Understand the context
• Capture the findings
• Meet and share afterwards
Don’t listen to what they say
21. Mockups communicate the structure and layout through
varying levels of fidelity. Make it fast and sketchy to start with.
Cancel
Send It Again
Send Text
Done
Insert the code
received by text
- - - -
Sílvia Otto Sequeira | Design Skills 4 FE People
Now to the blank screen
22. •Capture ideas
•Information Architecture
comes in handy
•Keep sketching and getting
feedback
•Learn your heuristics
Sílvia Otto Sequeira | Design Skills 4 FE People
Fire your first shot
23. From Jakob Nielsen’s Heuristics
Uploading 3 of 3 files
Image1.png
Image2.png
Image3.png
Uploading
Image1.png
Image2.png
Image3.png
Sílvia Otto Sequeira | Design Skills 4 FE People
#1 Visibility of system status
24. Back to homepage
Sílvia Otto Sequeira | Design Skills 4 FE People
From Jakob Nielsen’s Heuristics
#2 Match between system and real world
25. Cancel
Send
Proceed
Done
System will send
a message to you,
please wait.
Sílvia Otto Sequeira | Design Skills 4 FE People
From Jakob Nielsen’s Heuristics
#3 User control and freedom
26. Add to Cart Add to Mall
Sílvia Otto Sequeira | Design Skills 4 FE People
From Jakob Nielsen’s Heuristics
#4 Consistency and standards
27. Cancel Del.
You’re about
to delete file
lastsummer.pdf
Done
You have
just deleted
lastsummer.pdf
Sílvia Otto Sequeira | Design Skills 4 FE People
From Jakob Nielsen’s Heuristics
#5 Error prevention
28. Step 1 Step 2 Step 3
Previous Next Step
Sílvia Otto Sequeira | Design Skills 4 FE People
From Jakob Nielsen’s Heuristics
#6 Recognition rather than recall
29. From Jakob Nielsen’s Heuristics
#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…
Sílvia Otto Sequeira | Design Skills 4 FE People
30. Search by Name or Role Search
First Name
Last Name
Role
Search
Sílvia Otto Sequeira | Design Skills 4 FE People
From Jakob Nielsen’s Heuristics
#8 Aesthetic and minimalist design
31. Your file was deleted! UNDO Your file was deleted! Have a nice day!
Sílvia Otto Sequeira | Design Skills 4 FE People
From Jakob Nielsen’s Heuristics
#9 Help users recognize, diagnose
and recover from errors
32. Username
Role
I work as a...
Search
A username is...
Username
Role
Search
Sílvia Otto Sequeira | Design Skills 4 FE People
From Jakob Nielsen’s Heuristics
#10 Help and documentation
33. Usability Tests validate the proposed path
with direct feedback from the users.
Sílvia Otto Sequeira | Design Skills 4 FE People
Get better at it
5 users?
34. • Prepare the scenarios to
be tested
• Ask users to complete
the main tasks
• Hallway testing if nothing
else
Sílvia Otto Sequeira | Design Skills 4 FE People
Get better every time
37. Time to implement the experience in high-fidelity,
using images, colors, fonts and other visual elements.
Sílvia Otto Sequeira | Design Skills 4 FE People
38. 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. Desiclassifieds web site
Sílvia Otto Sequeira | Design Skills 4 FE People
stands for contrast
39. Color Size Shape Texture
Sílvia Otto Sequeira | Design Skills 4 FE People
R stands for repetition
40. Emphasizes Left, Center or Right Grid/Structure
Sílvia Otto Sequeira | Design Skills 4 FE People
A is for alignment
42. 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 H2
This is a example of a H3
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
Sílvia Otto Sequeira | Design Skills 4 FE People
Key points for good use
Typography
43. 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:
Sílvia Otto Sequeira | Design Skills 4 FE People
Key points for good use
Typography
44. 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."
Sílvia Otto Sequeira | Design Skills 4 FE People
Key points for good use
Typography
45. 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.
Sílvia Otto Sequeira | Design Skills 4 FE People
Key points for good use
Typography
46. 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 file 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.
Sílvia Otto Sequeira | Design Skills 4 FE People
Key points for good use
Typography
47. E72B37 2E3E53
PRIMARY COLORS
White ECEFF1 CFD8DC
77909C
B0BEC5
455A64 263238
Sílvia Otto Sequeira | Design Skills 4 FE People
GREY SCALE
Get into the brand universe
48. 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
Sílvia Otto Sequeira | Design Skills 4 FE People
50. 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
Sílvia Otto Sequeira | Design Skills 4 FE People
Design decisions are made
throughout the cycle
51. User Experience User Interface Development
Ideation Creation Delivery
Sílvia Otto Sequeira | Design Skills 4 FE People
And the designer is not going to be
the only one making those decisons
52. Sílvia Otto Sequeira | Design Skills 4 FE People
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
53. 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
Sílvia Otto Sequeira | Design Skills 4 FE People
#1 Find fonts and colors
54. 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
Sílvia Otto Sequeira | Design Skills 4 FE People
#1 Find fonts and colors
55. 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
Sílvia Otto Sequeira | Design Skills 4 FE People
#2 Create your pallete
56. 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
Sílvia Otto Sequeira | Design Skills 4 FE People
#3 Get inspired
57. #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
Sílvia Otto Sequeira | Design Skills 4 FE People
58. 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
Sílvia Otto Sequeira | Design Skills 4 FE People
#5 Discover the right font
59. 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
Sílvia Otto Sequeira | Design Skills 4 FE People
#6 Using Icon Fonts
60. 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
Sílvia Otto Sequeira | Design Skills 4 FE People
#7 Inspect the code
61. 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
Sílvia Otto Sequeira | Design Skills 4 FE People
#8 Move like Jagger