These slides are from a 2 hour presentation called Design for Developers.
The goal of Design for Developers is to teach interface design as a set of rules: there are some good default values for a lot of design decisions that you should remember, there is a “scientific” way of approaching things like alignment, even though many designers will tell you it’s something you should “feel”.
DESIGN THINKING RESOURCES is free PDF collection with very inspirational books, tools, toolkits, blogs and companies in the subject of Design Thinking and Service Design.
Author: PLEO group, Paweł Krzciuk
http://pleogroup.com/
This deck was presented at the "Content Strategy in Service Design" event, hosted by Fjord, a global design and innovation consultancy, and the Content Strategy Southern California group.
A fast-forward tour about Design Thinking by webkeyz.
How design thinking differs from scientific thinking? Why to use it? When to use it? And how design thinking can impact your life?
Presentation for General Assembly to Introduction to Visual Design. Covers the basic understanding of what graphic design is and how it is applied in the UI and UX of design today on the web.
DESIGN THINKING RESOURCES is free PDF collection with very inspirational books, tools, toolkits, blogs and companies in the subject of Design Thinking and Service Design.
Author: PLEO group, Paweł Krzciuk
http://pleogroup.com/
This deck was presented at the "Content Strategy in Service Design" event, hosted by Fjord, a global design and innovation consultancy, and the Content Strategy Southern California group.
A fast-forward tour about Design Thinking by webkeyz.
How design thinking differs from scientific thinking? Why to use it? When to use it? And how design thinking can impact your life?
Presentation for General Assembly to Introduction to Visual Design. Covers the basic understanding of what graphic design is and how it is applied in the UI and UX of design today on the web.
Developed by students at Stanford University, the Design Thinking approach was created to establish a new way to grow innovative products, processes and services. The Design Thinking process consists of six iterative stages which enable participants to seek flexible solutions and innovations concerning the issue they treat.
One important aspect of Design Thinking is the creation and cultivation of ideas within a well-coordinated team. Thus, the team spirit is a decisive element during Design Thinking operations and encourages to produce the best possible results. In addition to the team side of Design Thinking, a flexible and productive environment is crucial to develop inventive ideas and products. The more workable an environment, is the easier it is for employees to visualize and transmit thoughts and new concepts.
Innovation, design thinking, and competitive advantagePhil Barrett
A quick talk from the Cape Town funding fair. Exponentials and the imperative for innovation. The trouble with innovation in corporations. Wicked problems and complex adaptive systems. How design thinking works. What design thinking does do, in Digital. Design thinking counteracts our tendency for poor decision making.
Google Tech Talk given on January 24, 2011 in Mountain View, CA on gamification and how to get three »missing ingredients« right: meaning, mastery, and autonomy.
Are you constantly coming up short on forward-thinking ideas and prototypes that excite your test audience? Time for a new course of action - Design Thinking! Join us in this complimentary training lesson as we introduce you to the five key factors of The Design Thinking Process and show you how to begin implementing innovative and successful project solutions.
How to be a great Art Director or DesignerDavid Bell
'Best of the 33 things I know about Art Direction'
What you will learn form this presentation is how to be a better, or even great Art Director. Following on from my highly successful '33 things I know about Art Direction' presentation here the best of that series. I hope that you find this helpful.
Enjoy.
Ps. And please share if you have learnt something from this presentation.
An end to end design thinking exercise. An inclusive activity for the whole team to participate. From designers, to researchers, to engineers and product managers.
December 2017 presentation covering: What is design thinking? What does it look like in practice? What are some case stories of design thinking being used in the real world? How can we use design thinking in our organization? Where can I learn more?
The Design Thinking process first defines the problem and then implements the solutions, always with the needs of the user demographic at the core of concept development. This process focuses on needfinding, understanding, creating, thinking, and doing. At the core of this process is a bias towards action and creation: by creating and testing something, you can continue to learn and improve upon your initial ideas.
1. EMPATHIZE
2. DEFINE
3. IDEATE
4. PROTOTYPE
5. TEST
Laura Mocanu of Elite Vision Coaching has an impressive background as a Marketing Professional in her native Romania. This combined with her own career change and a passion for continuing education sets the tone for her work. A business mentor for the Prince’s Trust and Well Being Officer for NIAMH, her own trajectory is an excellent model for what it takes a client to maximize their potential and illustrative of the "Design Thinking" she teaches.
An audio of this presentation can be found at: https://www.dropbox.com/s/v6x32tx449nofqi/14%20Laura%20Mocanu.mp3?dl=0
www.evisioncoaching.co.uk
@EVisionCoaching
Designing better user interfaces sets out to teach interface design by talking through concrete examples: what works, what doesn’t work. A good interface consists of a thousand details done right. This presentation is all about those details.
Developed by students at Stanford University, the Design Thinking approach was created to establish a new way to grow innovative products, processes and services. The Design Thinking process consists of six iterative stages which enable participants to seek flexible solutions and innovations concerning the issue they treat.
One important aspect of Design Thinking is the creation and cultivation of ideas within a well-coordinated team. Thus, the team spirit is a decisive element during Design Thinking operations and encourages to produce the best possible results. In addition to the team side of Design Thinking, a flexible and productive environment is crucial to develop inventive ideas and products. The more workable an environment, is the easier it is for employees to visualize and transmit thoughts and new concepts.
Innovation, design thinking, and competitive advantagePhil Barrett
A quick talk from the Cape Town funding fair. Exponentials and the imperative for innovation. The trouble with innovation in corporations. Wicked problems and complex adaptive systems. How design thinking works. What design thinking does do, in Digital. Design thinking counteracts our tendency for poor decision making.
Google Tech Talk given on January 24, 2011 in Mountain View, CA on gamification and how to get three »missing ingredients« right: meaning, mastery, and autonomy.
Are you constantly coming up short on forward-thinking ideas and prototypes that excite your test audience? Time for a new course of action - Design Thinking! Join us in this complimentary training lesson as we introduce you to the five key factors of The Design Thinking Process and show you how to begin implementing innovative and successful project solutions.
How to be a great Art Director or DesignerDavid Bell
'Best of the 33 things I know about Art Direction'
What you will learn form this presentation is how to be a better, or even great Art Director. Following on from my highly successful '33 things I know about Art Direction' presentation here the best of that series. I hope that you find this helpful.
Enjoy.
Ps. And please share if you have learnt something from this presentation.
An end to end design thinking exercise. An inclusive activity for the whole team to participate. From designers, to researchers, to engineers and product managers.
December 2017 presentation covering: What is design thinking? What does it look like in practice? What are some case stories of design thinking being used in the real world? How can we use design thinking in our organization? Where can I learn more?
The Design Thinking process first defines the problem and then implements the solutions, always with the needs of the user demographic at the core of concept development. This process focuses on needfinding, understanding, creating, thinking, and doing. At the core of this process is a bias towards action and creation: by creating and testing something, you can continue to learn and improve upon your initial ideas.
1. EMPATHIZE
2. DEFINE
3. IDEATE
4. PROTOTYPE
5. TEST
Laura Mocanu of Elite Vision Coaching has an impressive background as a Marketing Professional in her native Romania. This combined with her own career change and a passion for continuing education sets the tone for her work. A business mentor for the Prince’s Trust and Well Being Officer for NIAMH, her own trajectory is an excellent model for what it takes a client to maximize their potential and illustrative of the "Design Thinking" she teaches.
An audio of this presentation can be found at: https://www.dropbox.com/s/v6x32tx449nofqi/14%20Laura%20Mocanu.mp3?dl=0
www.evisioncoaching.co.uk
@EVisionCoaching
Designing better user interfaces sets out to teach interface design by talking through concrete examples: what works, what doesn’t work. A good interface consists of a thousand details done right. This presentation is all about those details.
What's makes the difference between good and great design? Or for that matter, between good and great designers?
I don't pretend to know the answer. I've been designing for 10+ years and I still don't consider myself a great designer. What this presentation offers, however, are a few principles I've learned along the path to becoming a great designer.
What slide dimensions should you use for your presentations?Presentitude
When PowerPoint 2013 came along, the size of the default presentation changed from 4:3 to 16:9. So – what size should you use for your slides? This is a quick guide to choosing the right size – and a brief explanation of the difference between the sizes in different versions of PowerPoint.
UX Design + UI Design: Injecting a brand persona!Jayan Narayanan
It is my try to shed light on two often heard but little understood or confused acronyms and its impact on overall brand experience. The presentation originally designed to address a group of entrepreneurs who have little knowledge in design and it's technical jargons.
https://www.linkedin.com/in/jayan-narayanan/
The SlideShare 101 is a quick start guide if you want to walk through the main features that the platform offers. This will keep getting updated as new features are launched.
The SlideShare 101 replaces the earlier "SlideShare Quick Tour".
Web UI Design Patterns and best-practices guide from http://www.uxpin.com -- the best online wireframing, UX & product management suite available anywhere.
Where developers are challenged, what developers want and where DevEx is goingFrancesco Corti
Developing in today's days has never been so powerful but it is also incredibly complex and this is challenging the teams and the businesses to deliver fast a good quality software.
In this speech Francesco summarises his experience of 25+ years in the IT industry, including the work as Product Manager for Backstage (Spotify) and now as part of the Docker's team.
In particular, you are going to learn about the trajectory of the developer experience in the market and what you, as a developer, should be able to leverage and use very soon. For sure sooner than you expect.
This was a usability presentation I gave in February, 2013 at the IIS Cognitive Brownbag. My inspiration for creating and presenting on usability was to encourage my colleagues to take a user-centered perspective when designing software. Another goal was to encourage use of agile development methodologies with a focus on user testing.
Ensure Optimal Performance and Scalability: Implementing a Robust and Reliabl...Steve Feldman
Virtual Learning Environments have become one of the top two supported applications in an educational setting rivaling email for dominance of support and management of IT resources. Applications such as BbLearn require continuous uptime, reliable and predictable performance and the ability to scale with limited resources. This session will present a blue print for implementing a robust and reliable monitoring infrastructure for managing an enterprise learning application under competing demands. We will show you exactly what tools and processes we use in the Blackboard Performance Center of Excellence during benchmarks. In addition, we will present a series of case studies commonly experienced in live deployments that have an effect on performance and/or scalability. The format of this session is lecture-based, but will be filled with real-live demos and simulations.
Ibm worklight - going from xpages mobile to native mobile applicationsMark Roden
Abstract
In this session John and Mark will demonstrate how an XPages developer can make the simple, practical, logical evolution from XPages to IBM Worklight developer.
Have you ever wondered how to easily integrate a mobile phone native feature set with your corporate web applications? We will show that any XPages developer currently building mobile-accessible websites already has the skillset to build native mobile apps using IBM Worklight. We will cover installation, setup, similarities in designer clients, the test environment, the skills necessary and provide a working example.
You have the skills, you have the knowledge. Your only challenge is to come to the session and understand how to make this work. Go from HTML5 to native in minutes.
UX, Front-end and Back-end: How front-end can help these guys?Diego Eis
How front-end can help UX and Back-end guys? How they interact? I tell a little about it in this slides, showing how the front-end can help the back-end and UX.
What if the reason everyone seems so anti-LMS is that they are not structured correctly? LMS design, as one large single system, is setup to fail the OER community. MOOCs are at least a push in the right direction, but their frameworks are often closed, discouraging open development. If we had truly open, community driven platform for the creation of educational resources, we might see more truly OER materials being created.
This is the position ELMS Learning Network (ELMSLN) takes in its approach to edtech design. ELMSLN takes the major functionality of an LMS and spreads it out across a suite of open source tools. The experience is glued together by single-sign-on technologies like LTI to enable the best system selection for the job without sacrificing user experience.
These tools a built on a framework that includes other open systems such as Drupal and Piwik. Piwik allows for a Google analytics style framework but open source and data is hosted with whoever is utilizing it. This can used both for tracking and general data about students, or for statistical analysis of how effective OER are in reaching different global audiences.
Drupal 7, is a highly flexible yet complex CMS used to power high scale development projects. While Drupal is traditionally difficult to work with, ELMSLN packages it up in such a way that's easy both for code developers and content authors to understand. What it brings with it is a community of experts authoring functionality that can all be utilized to deliver courses and OER. The best part is that by aligning with this community, ELMSLN has access to the knowledge and expertise of thousands of contributed modules and highly trained developers who don't need to have any understanding of edtech in order to help improve it!
ELMSLN also comes packaged with support for LTI 1.0 provider capabilities for integration with current LMS offerings. This enables faculty at existing universities and colleges to keep their materials outside the LMS, yet still securely pass their traditional students through to their content seamlessly. ELMSLN's networked approach to edtech development, can allow OER material to reside in one toolset (out in the open) without fear of opening oneself up to PII or FERPA violations.
Part of the resistance to OER production is the technical and privacy barriers to participation, which are at the heart of how ELMSLN has been constructed. Attendees will walk away with a sense of the transformative nature of Drupal, who's using ELMSLN and how to get involved.
Conference talk at DevRelCon London 2019.
At the heart of scalable and intuitive APIs is great user experience, but the UX of an API is rarely considered. Learn how to integrate UX strategies to create improved API experiences using real life examples and lessons learned from upgrading Shopify’s own API.
Top 5 Indian Style Modular Kitchen DesignsFinzo Kitchens
Get the perfect modular kitchen in Gurgaon at Finzo! We offer high-quality, custom-designed kitchens at the best prices. Wardrobes and home & office furniture are also available. Free consultation! Best Quality Luxury Modular kitchen in Gurgaon available at best price. All types of Modular Kitchens are available U Shaped Modular kitchens, L Shaped Modular Kitchen, G Shaped Modular Kitchens, Inline Modular Kitchens and Italian Modular Kitchen.
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.
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...Mansi Shah
This study examines cattle rearing in urban and rural settings, focusing on milk production and consumption. By exploring a case in Ahmedabad, it highlights the challenges and processes in dairy farming across different environments, emphasising the need for sustainable practices and the essential role of milk in daily consumption.
2. I would like to give some context to this
presentation. These slides are from a 2 hour
presentation called Design for Developers.
2
3. The goal of Design for Developers is to teach
interface design as a set of rules: there are
some good default values for a lot of design
decisions that you should remember, there is a
“scientific” way of approaching things like
alignment, even though many designers will tell
you it’s something you should “feel”.
3
4. Some slides only contain a few words or
images so the slides don’t distract from what
is being said. Since you are probably viewing
this online, I reworked the entire presentation
and added these sticky notes to add what I
talked about when displaying the slide. They
look like this.
4
5. 1 Introduction & design theory -
2 Practical tips and tricks -
3 Practical tips and tricks, cont. -
4 Q&A: throughout -
5
13. So this is my company’s website, ( http://
wolfslittlestore.be/ ) as you can see it’s
mostly about interface design. Under work
you can see I do a lot of stuff; webdesign,
logos, HTML & CSS, design for iOS. But all of
it comes down to designing interfaces.
13
14. The kind of design I do is interface design...
14
16. I don’t really care too much for interactive
presentations or branded games. While they
have their right to exist as promotional
material, it’s not the kind of work I want to
spend my life doing.
16
18. It’s about creating a great product
Take something that blows and make it
better. That’s probably what the people at
Dyson were thinking when they applied their
vacuum knowledge® to hand dryers.
Product of the year for me.
18
21. You’ve got the power
I think everyone has the power to make a
good product because it’s more about
knowledge and applying that knowledge
instead of having strong visual skills. I
believe we can extract a lot of rules from
common design knowledge. That’s what I’m
gong to do in this talk.
21
22. Theory
Let’s start with some theory on what makes a
good interface.
22
25. Examples of desirable qualities
Fast Easy to use
Fun Accessible
When thinking about interfaces, and what
you’re going to make, you make a list of
desirable qualities we want our interface to
have.
25
26. Fast
Fast (app performance)
Fast (time to task completion)
Maybe we want our interface to be fast — in
terms of performance — or we want it to be
fast in terms of task completion.
26
27. Easy to use Productivity
If we make our application easy to use, that
might just hurt productivity (e.g. no advanced
mode, lack of shortcuts, wizards for
everything). Even though I like to design interfaces for the
“general public” I have a special love for
advanced modes and ways to get your task
done ASAP even if it requires some training/
learning.
27
28. Considerations
Build accessible apps
because it’s the right
thing to do (morally)
Accessible
Does anyone in the
intended audience
have a disability?
e.g. cockpit software
for F16 pilots
Do we have the dev
resources to focus on
accessibility?
28
29. Let’s take this interface for example. I haven’t
ever used it to be honest, but this us Lotus
123, the competitor to Excel back in the days
of MS DOS.
29
30. Not easy to use/learn Inaccessible
Fast (performance) Fast task completion
30
31. If we list our desirable qualities and compare
them with the program we have here, we
might come to the conclusion that it’s not
easy to learn, not accessible (to persons with
sight or hearing disability for example; there
is no VoiceOver like on Mac, there is no
multitasking to run something like JAWS in
the background.
On the positive side, it’s probably blazing
fast on current computers, and since it’s all
keyboard based I can only guess the time to
task completion is also pretty good.
Not easy to use/learn Inaccessible
Fast (performance) Fast task completion
31
32. Let’s expand on this example with another
example, a Point of Sale system. A POS
system is used at a register, when you go to
a shop and buy something basically.
Example: POS system
32
36. The opposition between making an
application easy to use vs. making it so you
can complete your task quickly becomes
clear here... since the employees in our
imaginary shop all get trained do we really
want to use the slick “Easy to use” system
when maybe we want the system that
enables us to do our task as fast as
possible?
36
37. There’s a Belgian supermarket, Colruyt, that
tests everything, optimizes everything, and I
think they thought long and hard about their
register/cashier system too. It’s not very
modern, but employees know how to work
the system in an efficient manner because
they are trained to do so and the software
enables them to be fast.
37
38. Would you rather bit F5 + F8 to serve a
customer or go through a wizard with next/
previous options?
38
39. Business...
The appropriate interface helps with the
business side of things of course. Wikipedia
says Colruyt has a cool €475 million profit in
book year 2009-2010.
39
40. (I hate shopping there)
Unfortunately the experience of shopping
there is not really what I want, I’d rather pay
a bit more and don’t feel like I’m shopping
around in a prison. But that might just be me.
40
41. Why did I put this theory part in the presentation? I want everyone to think
about what they’re building and for who they’re building it.
Even though kids are growing up with computers these days, the current
generation of software is becoming flat and less usable to expert users.
While I <3 Apple software a lot of what they do feels dumbed down. I’m very
frustrated making this 150+ slides presentation in Keynote because there is
no automation whatsoever. I can’t align things automatically, I have to copy
paste this note thing from slide to slide manually.
41
43. Goals
• You want your designs to look passable
without the intervention of a dedicated
(expensive) designer
• You want to be able to create web
applications on your own, or with a team of
developers only
• With a little time and some tricks this is not
hard to do, especially for web applications
43
44. You’re a developer so:
• You use your IDE and never ever open
Photoshop or Illustrator unless you have to
• You write scripts to solve problems
• You love your terminal and database schemes,
not so much your ruler and color palettes (if you
have them)
44
48. Who in the audience has ever tried to learn Photoshop?
It’s big and vast... there’s many tools and palettes and it’s easy to get lost.
I took me years to become productive in Photoshop and I understand why
people are advocating designing in the browser.
48
49. Text
I feel at home here, I know what to do, I have the shortcuts in my fingers, I
know what all the tools and palettes do.
49
50. You don’t have to learn Photoshop (or any graphics program for that matter)
to deliver a proper software design. As I said before it’s a matter of
knowledge and applying this knowledge. As a web developer you have an
extra edge in a sense that you can apply design frameworks easily thanks to
the power of HTML (structure) and CSS (presentation) whereas sharing the
design of one Java app with another is not convenient, if even possible.
50
51. Practical tips & tricks
Now... on to the real meat of the
presentation. The practical tips and
tricks. What you’ve been waiting for I
guess!
51
52. Practical tips & tricks (1)
A Typography -
B Alignment -
C Light & shadow -
I divided this up in sections, first up are typography, alignment and light and
shadow. These are the most important parts.
52
54. Readability
• Generally you want a readable typeface, in
interface design you want a very readable
typeface that works in small sizes
• This leaves you with very little choice on the
web:
55. Verdana The quick brown fox jumps
over the lazy dog
Lucida Grande The quick brown fox jumps
(Fallback: Lucida Sans Unicode) over the lazy dog
55
56. Droid Sans comes with Android and is also optimized for small size display;
Segoe UI is the font used in Windows Phone 7 and parts of the new
Windows I think. Solid choice if you’re doing Microsoft software.
Droid Sans The quick brown fox jumps
over the lazy dog
Segoe UI
56
57. Why these fonts?
Specifically designed for UI: compare
Verdana to Times: which will be more
legible at small sizes?
Verdana at 36px Times at 36px
If you’re interested in typography at all, and you want to know
more why this is like it is, try http://typophile.com/node/12028
58. Why these fonts?
Hinted at low sizes
The two fonts at the bottom
will not be named... hint: one
is universally hated by
designers and the other
caused a stir when it was
used as the subtitle for
James Cameron’s Avatar
59. Gill Sans
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.
Palatino
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
Some
culpa qui officia deserunt mollit anim id est laborum. fonts have their roots
in print, they are wonderful if
used for the right purposes.
Gill Sans is a great typeface
Impact
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
with British roots, Palatino
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duisfor a book,
could be perfect aute irure
and Impact, wel...
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
59
61. Why some fonts are better for interfaces than others
Verdana
1iIL
Gill Sans
1iIL
Here’s the same character
string in Verdana and Gill As you can Excel set in Gill Sans might
Sans. give some problems: what if you need cell
I1, you would read it as II
61
62. zero versus “o”: difference can be critical
A crossed zero can make the difference between a font that works for financial applications and one that
doesn’t. Maybe you want to display a serial number that has both O and 0 (zero) in it. This i from a blog post
about Axel by my favorite typographer, Erik Spiekermann. http://www.fontshop.be/details.php?entry=386 . It’s
a very economical typeface perfect for spreadsheets.
62
64. Relative readability
This is a pretty well known picture among designers, it displays the relative readability between a book and a
blog post on a screen set in 16px. Basically we all use type sizes that are way too low. 16px works for reading.
Why not use this browser default instead of making the text tiny?
64
65. Font sizes
• When in doubt, make it larger, especially if it’s
for reading (any long form content in
paragraph form)
• All texts on the web that are meant to be
read should be at least 14px big!
65
66. Font sizes
• You can go smaller in interface depending
on your font, e.g. if you use Lucida Grande
or Verdana you could go for 11, 12 or 13px.
66
68. Reading length
• There's a reason newspapers are set in
columns, that books are not wider than they
are... practical printing reasons, but also a
scientific reason: it's harder to read a text when
lines are too long
• Rule of thumb: paragraphs should never be
longer than 60 characters, so limit them in
width
68
70. Font services
• Use Typekit ($50/yr for low traffic sites)
• Use Webtype if you have money ($40/yr/
typeface)
• There are very little fonts in Google web fonts
currently that are worth using
• Use with caution (performance, quality of
fonts)
• Good design is not free in general
70
71. All efforts to optimize for performance on my own Wolf’s Little
Store website were kind of cancelled out by using 2 fonts from an
external web provider. If you care about performance at all, don’t
use @font-face.
71
72. Line height makes all the difference:
1.5 line height 72 1.0 line height
73. Line height
• I keep returning to these same values:
• Use a line-height of 1.1 for headings
• Use a line-height of 1.5 for paragraphs
73
76. How to align things?!
Much has been written about the dark art
of aligning things: there’s whole books
about aligning and grid systems, mostly
dealing with paper sizes and proportions.
I want to show you 3 things that might
make you better at aligning without
having to overthink it.
76
77. Alignment
• Law of proximity (gestalt)
• Screen interface design: work with the number 6. 6,
12, 18, 36... (example)
• Grid design example
• Use space appropriately
77
79. The law of proximity
The law of proximity – Spatial or
temporal proximity of elements may
induce the mind to perceive a
collective or totality.
Wikipedia
79
81. The law of proximity
As you can see, the left circles form a
group, on the right side there’s 3 groups,
all of this is done by spacing between
elements only. Why is this so important
and what does it have to do with UI
design?
81
82. The law of proximity
The law of proximity says that elements
that are closer together will be perceived
as a group. Since the spacing is even
between every comment here it’s hard to
find out who wrote which comment.
82
83. The law of proximity
Compare this to a design where there is
clear spacing between the comments.
The author is on top (as per convention)
and the avatar reinforces who is talking.
83
85. Base font size: Base line height (x1.5)
2x6
12 = 18px 3x6
Reading font size: Base line height (x1.5)
16 = 24px 4x6
85
86. 6px as our “unit”
Major elements spacing 6 units
Regular spacing 4 units
Minor spacing 2 units
86
87. Example
This part of the presentation is about how
I keep returning to the number 6 for
aligning and spacing UI elements. It
makes sense: all the numbers we use for
our defaults (1.5 line height, 16px font
size for reading, etc.) form multiples of 6
when used in simple calculations: 12, 18,
24, 36, ...
87
88. Start off with a grid, I used an online grid
calculator (here: http://www.29digital.net/
grid/ ) and defined my column and gutter
widths so are multiples of 6.
88
89. Here’s that same grid visualized. I used
Photoshop but you might as well do it in
HTML/CSS if you’re used to that.
89
90. As you can see, if we think of 6 as our
unit, there are 4 units between columns,
and each column is 16 units wide.
90
93. The height of content area if flexible, for
the header I used a multiple of 6 again.
93
94. For the spacing between the areas I used
a multiple of 6 again. It’s easy, just keep
returning to the number 6.
94
95. I add some text, this is from Moby Dick
(book in the public domain). Now, it still
looks like **** so let’s do something about
that.
95
96. I set the font to 16px since this is my
default for reading, then add spacing
between the paragraphs.
96
97. I add a heading which has a font size of
24px, once again tying into the number 6
97
98. Look, the spacing between elements is
not arbitrary, it’s all a multiple of 6, and
the reason I made my paragraph 4
columns wide ties into the line length
reasoning as discussed earlier. It’s a
ruleset that makes sense.
98
99. I move the text to the middle since I want
to add a navigation etc. to the website.
99
100. I know how my grid works so I don’t need
to display it all the time now. I go to my
standard colors (more on that later).
100
101. I keep on designing... again keeping 6 in
the back of my head. For example, the
padding in the comments is 12px, and
the line height of the navigation items is
24px.
101
102. We have a design that looks passable
without much designing really: we applied
some guidelines, that’s it.
I’m not saying it looks like the bomb, but
we have a solid base to work upon here.
102
103. I use this strategy all the time, look at my
site, all the spacing is based on 6...
103
107. Use space appropriately
This is the Netflix iPad app, I’m all for
proper whitespace, but this is just not an
appropriate design for the iPad. You have
all this space, why not use it e.g. to
display the film posters too?
It looks like they just stretched out the
existing iPhone app. This is a common
problem with most Android tablet
software these days.
107
108. Use space appropriately
Compare with something like the
iPhoto design for iPad that makes
appropriate use of the space. Big fan
of the designer www.mikematas.com
108
112. Take a second to look at this photo
and look at the reflections, the knobs,
the shadows being cast.
112
113. In real life...
• Shadows are never pure black (radiosity)
• Objects higher than other objects cast a
shadow on the lower object
• Some surfaces are reflective and some are
not
• When we press a button it lowers
• Light is cast from a direction
113
114. Shadows are never pure black
The first box looks kinda like what you would see in a common “developer
design”. Try to soften it a bit more by using a greyish tint (middle), I like to
make my shadows a bit blueish grey (third box). It’s kinda hard to see but
all the little details together often make a design great instead of just good.
114
115. Drop Shadows will ruin your design if you
don't do it right. Things should be right up
against their surface which means using a
1-3px Drop Shadow size. And 0-3px
distance. This isn't WordArt.
Mike Rundle, flyosity.com
115
116. Window shadow
The window shadow on Mac OSX is a bit overdone but it does make a
good example that you should think of objects on top (windows, modals)
to be physically on top and thus cast a shadow. This helps with the
metaphor and helps people understand what they’re seeing.
116
117. Recipe for a good button!
Light to dark gradient
Try to think of light as
coming from a certain
direction. The most natural
direction is from the top (e.g.
the sun). Thus, a light
coming in from the top
would make the top part of a
button lighter, and the
bottom part darker. This is
why your gradient runs from
light to dark, not just
because you thought it looks
nice.
Clear verb Clear lines
117
118. Recipe for a good button!
Distinctive active state
It’s not realistic to change
the color of a button when
you press it but it does help
to reinforce which button
was clicked.
In real life the button would
probably lower a bit thus
creating an inner shadow.
Inner shadows work for
“pressed” look
118
119. Don’t just flip the gradient direction!
Just flipping the gradient
direction is the equivalent of
the environment light
Light changing direction when you
direction hover over/click a button,
this makes zero sense.
It’s also way too subtle.
Light
direction
119
120. Most interfaces: think of light coming in
from a 120° angle
Text inputs have shadows Modal boxes cast a 120° drop
on the top and left shadow (more shadow on bottom
and right), be subtle
120
122. Practical tips & tricks (2)
A Color -
B Icons -
C Reusable design -
Next up are three parts, the first about color, then icons, and to end reusable
design.
122
140. There’s a green background, dark green for the
heading, some softer green for the text, and
then a clear button. All work very well together,
of course, they’re all variations on the same
color.
140
141. For example, here’s the page title, instead of
just using white they used a tint of blue,
blending properly with the background color.
This looks better.
141
142. I don’t use too much color to make a point
about simplicity.
(I also don’t have this 6th sense for colors
that some designers seem to have)
142
143. I’m not the only designer just resorting to
B&W, here’s http://www.subtraction.com/ by
internet famous Khoi Vinh.
143
144. Kuler might be a good tool for color but I
don’t really work with too many palettes in
interface design, I mostly stick to what I
know that works already (white/grey/black +
accent colors + standard message colors,
e.g. red for error and green for success)
144
145. I don’t have a sixth sense for color, I can
apply the color theory I know, but mostly UI
design doesn’t need a lot of color, so I
wouldn’t worry too much about it either.
145
146. Fake harmony
A way to fake color harmony in a kind of
engineered way. See the video at http://
methodandcraft.com/videos/creating-harmonious-
color-schemes
146
147. This is Campaign Monitor again, here they use a
shade of dark grey with a blueish tint instead of
just dark grey on a white background. I often do
this too, it looks prettier and adds some life to a
page. (you can apply the same logic to buttons,
backgrounds, etc.;
147
151. Contrast Not everyone has an Apple Cinema
display: most people have a cheap
computer with a crappy screen. If you
#EEE (very light grey) is evil, use a light grey like #EEE then there’s
use at least #D5D5D5 (grey) a huge chance only part of your
audience is going to see it. Pro tip:
Test your designs on your mother’s
computer.
You can even see the difference in
screen quality between a Macbook
and an iMac. The Macbook has much
worse contrast, especially if the
screen angle is not optimal.
What they see What you think they see
151
153. Icons Not so much to say about icons,
they’re an essential part in the
interface to easily recognize actions
and parts without having to think too
much.
• Invest in a good icon set
• Pixel icons are ideal for web applications
• FamFamFam will only get you so far
153
155. Even multi million dollar companies
get away with still using FamFamFam.
(I think they should hire an icon designer and redo
their visual design a bit... the product is great
though and that’s what matters in the end.)
155
156. Collect good things in your personal library
I went freelance in January. Must have spent over
€800 on icons this year. I consider it an investment,
since drawing custom icons for every project would
be a disservice to my clients with so many good
sets out there.
156
158. I like Pictos too, http://pictos.drewwilson.com/
158
159. Something relatively new: @font-face icon fonts.
Try Fico, by Belgian designer Lennar Schoors.
http://fico.lensco.be/
159
160. Icon rule #1:
Only use an icon
when it's well known,
otherwise use text, or
text + icon
160
161. Example 1
What does this mean? It’s pretty clear... we know
this from traffic, we know the exclamation mark,
it means “warning”.
161
162. Ambiguity
This one is a little tricky. The right button below
means add, and I can see that the toggle
switches between a grid and a last view, but what
about the loop icon? Does it mean zoom? Does it
mean view details?
Multiple meanings are a common icon problem,
this can be resolved by using labels.
162
163. Text + icon when in doubt
When in doubt, use text + icon, like here.
The top two icons (refresh and add) are pretty
clear and don’t need a label
163
165. Just like you create functions to reuse
in code, you should have a design
library with elements you can reuse
(Web devs have it easy thanks to CSS)
165
166. Bootstrap from Twitter is possibly the best
looking design framework I’ve seen: http://
twitter.github.com/bootstrap/
166
167. A lot of the knowledge mentioned in this
presentation is applied perfectly in Bootstrap.
Hooray for http://www.markdotto.com/ !
167
168. This site for example was coded up with
Bootstrap in one evening by a developer with few
visual skills. Looks passable, even good to me!
168
169. jQuery Mobile recently released 1.0, if you’re
doing something that’s mobile only, this might be
a good framework candidate.
I played around with the beta and they do a lot of
things right by default.
169
170. There’s frameworks out there for responsive
design too, http://goldengridsystem.com/
170
177. So, this presentation is coming to an end.
As we walked through typography, alignment, light & shadow,
color, icon usage and reusable design I hope you learned
something new that you can apply to your work to make it better.
There’s certain parts of designing that we can make into
guidelines and rules of thumb. Applying these rules will make
your design better and in many cases good enough.
Nothing beats a dedicated designer though!
177
178. If you want to become a smarter person read every single book
and article mentioned on the following slide.
178
179. Web resources
http://flyosity.com/tutorial/crafting-subtle-realistic-user-interfaces.php http://twitter.github.com/bootstrap/
http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/ http://jquerymobile.com/
http://www.uie.com/articles/three_hund_million_button http://goldengridsystem.com/
http://blogs.msdn.com/b/jensenh/archive/2008/03/12/the-story-of-the-ribbon.aspx http://subtlepatterns.com/
http://www.asktog.com/columns/076AppleFlatlandPart2.html
http://www.mikematas.com/
http://www.asktog.com/columns/075AppleFlatlandPart1.html
http://pictos.drewwilson.com/
http://picons.me/
http://fico.lensco.be/
Books Designing the obvious by Robert Designing the obvious by Robert
Defensive Design for the Web: How Hoekman Jr. Hoekman Jr.
to improve error messages, help,
forms, and other crisis points by
Designing for interaction by Dan
Jason Fried & Matthew Linderman The Elements of Typographic Style
Saffer
by Robert Bringhurst
Designing Web Usability by Jakob
Nielsen Getting Real by 37signals http://
gettingreal.37signals.com/ Detail in Typography by Jost Hochuli
Don’t make me think! by Steve Krug
179
180. Hire me.
If you like what you’re seeing, I can apply my
knowledge to your application too, or give this
presentation for your company. Get in touch:
mail@wolfslittlestore.be
180
181. Follow me on Twitter
Here’s the link:
http://twitter.com/wolfr_
181
182. Subscribe to the blog:
Here’s the link:
http://wolfslittlestore.be/journal/
RSS:
http://feeds.feedburner.com/Wolfslittlestore
182