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.
8 Ways to Improve App Store User ExperienceBryan Rieger
Presentation by Stephanie Rieger of Yiibu for Informa Mobile User Experience conference in London, UK 11/09
Officially called "Developing An Interface For The Future Of Mass Market Software Distribution"
This is the support deck for an introductory class I made for Junior Designers, Developers, Product and Project Managers to introduce them to the proper way to use wireframes.
I did this class already multiple times at General Assembly (London, UK), TechLab (Santa Clara, CA) and internally in my consulting job.
It's updated to OmniGraffle 6.
Same presentation, with Keynote:
http://www.slideshare.net/folletto/introduction-to-building-wireframes-with-keynote
8 Ways to Improve App Store User ExperienceBryan Rieger
Presentation by Stephanie Rieger of Yiibu for Informa Mobile User Experience conference in London, UK 11/09
Officially called "Developing An Interface For The Future Of Mass Market Software Distribution"
This is the support deck for an introductory class I made for Junior Designers, Developers, Product and Project Managers to introduce them to the proper way to use wireframes.
I did this class already multiple times at General Assembly (London, UK), TechLab (Santa Clara, CA) and internally in my consulting job.
It's updated to OmniGraffle 6.
Same presentation, with Keynote:
http://www.slideshare.net/folletto/introduction-to-building-wireframes-with-keynote
Today’s 'smart devices' are a product of the technology and mental models of our past. From a connected lightbulb to a robot vacuum, using most of these devices requires a native app. This in turn greatly limits their contexts of use. Can we really expect users to download an app to interact with a random ’thing’ they encounter at the mall, a space they explore for an hour at the museum, or a city they will only visit for a day? What devices could we build, what 'smart' environments could we enable if users could simply discover, “walk up and use”(and then if needed, abandon) these objects and environments as they do a web site?
This workshop will discuss two new technologies--Physical Web and Web Bluetooth--that can enable on-demand interaction with physical things and spaces using no more than a browser.
Mobile-first is a simple idea with big implications: digital products should be designed for mobile first. Not the other way around.
These are the slides for my 12 minute presentation at IA day 2012. Just a quick introduction to the mobile-first concept.
Props to Luke Wroblewski and Brad Frost. I got most of the stuff in this presentation from their presentations and blogs.
Luke Wroblewski:
http://www.lukew.com/presos/preso.asp?26
Brad Frost:
http://bradfrostweb.com/blog/web/for-a-future-friendly-web/
In this talk I shared the experience of the FigureRunning team in developing Apps for the Android platform, starting from Apps that were designed and developed for iOS.
UXPA2019 Not Your Average Chatbot: Using Cognitive Intercept to Improve Infor...UXPA International
This presentation from UXPA 2019 will review cognitive intercept as pertains to search, and how it extends to an additional domain (live agent chat). Evidence that it helps users and lowers help desk volumes will be discussed.
Adobe Max Modern iPhone App Design with Rick MesserRick Messer
Modern iPhone App Design
Basic practices and modern techniques
An introduction to iPhone app design. Gain a foundation of basics to break into this medium and start designing apps. This session will cover some fundamental iOS principles and describe modern design techniques. Get equipped with a good starting point and avoid some rookie mistakes.
Some Pointers from a Mobile Product Design Agency
iOS Anatomy: Familiarize with terminology, patterns & controls
Examples of modern design techniques
Tips from our process at Funsize
Working with engineers
Modern tools & practices for prototyping
Open Data in the Newsroom: What's the story? (Talk from OK Con 2011 in Berlin)Mirko Lorenz
Data-driven journalism: Data in the newsroom
These are the slides from my talk at OK Con 2011. It provides a brief overview, then discussess barriers and challenges for data-journalism.
NOTE: This version is slightly edited, I primarily cleaned up missing image credits, etc. The message is the same.
CC-BY 3.0
10 Design Commandments for Mobile App DevelopersJigyasa Makkar
Top ten design blindspots for Mobile app developers. Mostly based on my first experiences with Mobile design, as a developer.
Original deck presented at XConf 2011, ThoughtWorks, Pune.
Images used in the keynote are for illustrative purposes only.
Data is all around us, which is both a good and bad thing. Good, because we need it. Bad, because there’s simply too much to know where and how to start using it. This is one of several reasons that marketing teams are currently dysfunctional – I’ll reveal the rest in my talk – but it doesn’t have to be this way. Data-Driven Design (3D) is an actionable evidence-based framework that gives marketing teams (marketers, designers, & copywriters) accelerated access to the data they really need, coupled with a process for understanding how to use that data to make informed changes to the digital marketing experiences you’re creating today. In Oli’s talk, you’ll learn how to use The 3D Playbook to narrow four hundred sources of overwhelming data into the five you actually need.
Today’s 'smart devices' are a product of the technology and mental models of our past. From a connected lightbulb to a robot vacuum, using most of these devices requires a native app. This in turn greatly limits their contexts of use. Can we really expect users to download an app to interact with a random ’thing’ they encounter at the mall, a space they explore for an hour at the museum, or a city they will only visit for a day? What devices could we build, what 'smart' environments could we enable if users could simply discover, “walk up and use”(and then if needed, abandon) these objects and environments as they do a web site?
This workshop will discuss two new technologies--Physical Web and Web Bluetooth--that can enable on-demand interaction with physical things and spaces using no more than a browser.
Mobile-first is a simple idea with big implications: digital products should be designed for mobile first. Not the other way around.
These are the slides for my 12 minute presentation at IA day 2012. Just a quick introduction to the mobile-first concept.
Props to Luke Wroblewski and Brad Frost. I got most of the stuff in this presentation from their presentations and blogs.
Luke Wroblewski:
http://www.lukew.com/presos/preso.asp?26
Brad Frost:
http://bradfrostweb.com/blog/web/for-a-future-friendly-web/
In this talk I shared the experience of the FigureRunning team in developing Apps for the Android platform, starting from Apps that were designed and developed for iOS.
UXPA2019 Not Your Average Chatbot: Using Cognitive Intercept to Improve Infor...UXPA International
This presentation from UXPA 2019 will review cognitive intercept as pertains to search, and how it extends to an additional domain (live agent chat). Evidence that it helps users and lowers help desk volumes will be discussed.
Adobe Max Modern iPhone App Design with Rick MesserRick Messer
Modern iPhone App Design
Basic practices and modern techniques
An introduction to iPhone app design. Gain a foundation of basics to break into this medium and start designing apps. This session will cover some fundamental iOS principles and describe modern design techniques. Get equipped with a good starting point and avoid some rookie mistakes.
Some Pointers from a Mobile Product Design Agency
iOS Anatomy: Familiarize with terminology, patterns & controls
Examples of modern design techniques
Tips from our process at Funsize
Working with engineers
Modern tools & practices for prototyping
Open Data in the Newsroom: What's the story? (Talk from OK Con 2011 in Berlin)Mirko Lorenz
Data-driven journalism: Data in the newsroom
These are the slides from my talk at OK Con 2011. It provides a brief overview, then discussess barriers and challenges for data-journalism.
NOTE: This version is slightly edited, I primarily cleaned up missing image credits, etc. The message is the same.
CC-BY 3.0
10 Design Commandments for Mobile App DevelopersJigyasa Makkar
Top ten design blindspots for Mobile app developers. Mostly based on my first experiences with Mobile design, as a developer.
Original deck presented at XConf 2011, ThoughtWorks, Pune.
Images used in the keynote are for illustrative purposes only.
Data is all around us, which is both a good and bad thing. Good, because we need it. Bad, because there’s simply too much to know where and how to start using it. This is one of several reasons that marketing teams are currently dysfunctional – I’ll reveal the rest in my talk – but it doesn’t have to be this way. Data-Driven Design (3D) is an actionable evidence-based framework that gives marketing teams (marketers, designers, & copywriters) accelerated access to the data they really need, coupled with a process for understanding how to use that data to make informed changes to the digital marketing experiences you’re creating today. In Oli’s talk, you’ll learn how to use The 3D Playbook to narrow four hundred sources of overwhelming data into the five you actually need.
Embracing Uncertainty: Learning to Think ResponsivelyChad Currie
Presented to IxDA Austin on March 6, 2013.
Adopting Responsive Web Design practices means shifting the way we work. Get practical suggestions for streamlining your design process in the multi-screen world.
MIMA 2014 - Changing your Responsive Design Workfloweaselsolutions
Presentation slides from Dustin Tauer's 2014 MIMA Session:
What is your Web workflow? If your situation mirrors that of most organizations, the process often begins with some initial planning and discovery, followed by the design phase. In the design phase, Photoshop is opened and wireframes evolve into static designs. Once approved, these designs are passed to the developer which leads to testing, tweaking, and finally, launch. This workflow is great for traditional websites, but major evolution is needed to account for the changing landscape that is responsive design.
This session will present different strategies and processes for effectively designing and developing responsive websites. We’ll look at how taking a content-first approach rather than a design-first approach can significantly reduce the number of issues and iterations throughout the process. With mobile traffic quickly surpassing desktop traffic, a new workflow process is imperative to helping us be better prepared for the constantly changing device landscape.
An introductory workshop on UX design, taught to design thinking students at the Hasso-Plattner-Institut School of Design Thinking in Potsdam, Germany.
Companion website: http://paperandcode.weebly.com
Software used in the workshop: Sketch, Invision
I had the privilege of being a guest speaker at Plymouth State University's Database Management class. The focus of the lecture was regarding Web Application Design and how it relates to database integration. The discussion centered around my experiences thus far with development with databases and tips I could give.
Making simple, elegant solutions is HARD and often invisible. These are some of the most common things I hear come out of people’s mouths when heading for a bad UX decision.
What makes your website design a success? Often times, wowing the viewers that we unveil or submit a site design to is a metric of success. Although praise and acceptance from our clients and bosses is nothing to be taken lightly, we should all really be focusing on the usability of the design. Website design is the key element in directing users, and what they do, buy, or comment on any given site. Arguably, this can be best achieved with a flat design philosophy. What is flat design? To answer that effectively, we first have to explore what is not flat design.
Form Function Class 6, Manila, Philippines 14/11/2015Holger Bartel
Sweating Details - Slides from my talk at Form Function Class 6 in Manila Philippines on Nov 14th, 2015.
This talk is about sweating details and how small tweaks and changes can make a big difference in any of the web design stages. From optimising the process, via UX and design all the way to performance, this talk covers possible tweaks and recommendations with some practical examples to improve the overall experience of our products.
Prophets presents the 2012 trends in interactive design on http://www.prophets.be/DesignTrends
Our vision of where interactive design is going in the near future and how to respond to it. An inspiring presentation filled with real life examples of top-advertisers with a vision.
More info on www.prophets.be/DesignTrends
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”.
Hello everyone! I am thrilled to present my latest portfolio on LinkedIn, marking the culmination of my architectural journey thus far. Over the span of five years, I've been fortunate to acquire a wealth of knowledge under the guidance of esteemed professors and industry mentors. From rigorous academic pursuits to practical engagements, each experience has contributed to my growth and refinement as an architecture student. This portfolio not only showcases my projects but also underscores my attention to detail and to innovative architecture as a profession.
Dive into the innovative world of smart garages with our insightful presentation, "Exploring the Future of Smart Garages." This comprehensive guide covers the latest advancements in garage technology, including automated systems, smart security features, energy efficiency solutions, and seamless integration with smart home ecosystems. Learn how these technologies are transforming traditional garages into high-tech, efficient spaces that enhance convenience, safety, and sustainability.
Ideal for homeowners, tech enthusiasts, and industry professionals, this presentation provides valuable insights into the trends, benefits, and future developments in smart garage technology. Stay ahead of the curve with our expert analysis and practical tips on implementing smart garage solutions.
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?
Expert Accessory Dwelling Unit (ADU) Drafting ServicesResDraft
Whether you’re looking to create a guest house, a rental unit, or a private retreat, our experienced team will design a space that complements your existing home and maximizes your investment. We provide personalized, comprehensive expert accessory dwelling unit (ADU)drafting solutions tailored to your needs, ensuring a seamless process from concept to completion.
You could be a professional graphic designer and still make mistakes. There is always the possibility of human error. On the other hand if you’re not a designer, the chances of making some common graphic design mistakes are even higher. Because you don’t know what you don’t know. That’s where this blog comes in. To make your job easier and help you create better designs, we have put together a list of common graphic design mistakes that you need to avoid.
2. I would like to give some context to this
presentation. These slides are from a 35 minute
presentation called Designing better user
interfaces.
3. 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.
4. Some slides only contain a few words or
images so the slides don’t distract from
what is being said. This “web” version
contains sticky notes (like this one) that
summarize what I talked about when
displaying the slide during the original talk.
5. 1 Introduction 10’
2 User interface design examples 25’
3 Q&A: throughout -
11. I run a little freelance
design studio
Wolf’s Little Store
12.
13. So this is my company’s website, ( http://
wolfslittlestore.be/ )
Under work you can see what I do: interface
design, web design, branding and identity,
HTML & CSS, photography and design for
mobile devices.
Companies evolve and this is actually a little
bit outdated - I specifically want to focus
more on the interface design part. The next
website will reflect this :)
14. The kind of design I do is interface design...
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.
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.
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.
22. A good user interface =
A thousand details coming together
23. A good interface is a thousand details coming together. The
difference between a good interface and a great one is in all
those details: the spelling of a word, the spacing between
items, the colors used. There’s — literally — thousands of
details that are important.
Today I want to talk about a few of these details.
25. This is a form I get to deal with every few
days, it's the form to transfer money to other
people from my bank.
26. When you get to the part where you have to
select a country, you get a country list with
hundreds of options.
27. Why not put Belgium as a default? Almost all
transfers happen within Belgium.
Another idea would be to list the most
popular countries (Belgium, France,
Germany, Holland) in an <optgroup> at the
top.
28. It might seem like a small thing, but it's one
of those thousand details.
Who sends money to the South Pole?!
31. “ Creating custom dropdowns is usually a tedious
process that requires a ton of extra setup time.
Oftentimes lacking conveniences that native
dropdowns have such as keyboard navigation.
DropKick removes the tedium and lets you focus
on making s@#t look good.”
32. Good intentions:
• Advance the web
• Get rid of ugly dropdowns
• Make something to fix a problem
= a beautiful thing
To me this is a project done out of love, and
the intentions are great. Without people like
the author of Dropkick we wouldn’t be where
we are today with HTML and CSS.
34. For example, the script doesn’t trigger the
native select behavior on iOS.
Custom Native
35. • Close w/ escape
key on desktop:
does not work
with Dropkick.
• Type first letter
to select option:
does not work
with Dropkick.
36. A power user definitely
wants to be able to
type the first letter of a
country: doesn’t work
with Dropkick.
37. In general you want
your
<option>s to
have sensible names,
and not try to hack a
system together when
there is
<optgroup>
38. By customizing your dropdowns you just:
Worsened the site load time & Made your dropdown fit within
rendering time the design
Provided a worse
experience on mobile
Provided a worse desktop
experience for power users
I understand why this guy made it, you want
your form elements to look consistent, but
it’s better to have ugly <select>s that work as
expected than custom selects.
40. Custom is hard.
People always forget things:
Remember not being able to Remember not being able to use keyboard
scroll in Flash sites? Yeah. nav because somebody decided to
implement custom radio buttons and
Remember not being able to checkboxes. Yeah.
save an image from a Flash
site? Yeah.
Accessibility and screenreaders: I’m
not even going to go there. It gets BAD.
41. I often hit this iceberg when I stray
from native controls. For example, Ajax
interactions require more polish than
basic web pages. Custom mobile
menus require more polish than the
built-in version. If the team doesn’t
have the time to polish custom UI, it’s
often better to stick to the boring
native controls that work.
Braden Kowitz, Designer at Google
42. Custom is hard, and to me
custom is really saying that you
have more time to think about the
behavior of a select box than
Apple’s interaction design team.
And that you have the dev power
to fix it. On every platform out
there. So sometimes you just
have to be pragmatic if you’re
building a product.
43. But if nobody took any UI risk there would
not be any innovation out there, so it
depends on what you’re doing. This
screenshot is from Al Gore’s Our Choice, in
my opinion the best e-book there is on iPad,
interaction design-wise that is.
44. This was done by Mike Matas, Bret Victor
and their team. Two names you should
definitely remember if you’re into interface
design.
45.
46. The Tapbots guys are famous for their custom
interfaces. Their business is practically based on
the fact that their apps are 100% custom.
47. Recommendations
• Don’t use custom select boxes
• Don’t try to style them using CSS either
• If you must go custom, realize the consequences
and be humble
• Use a default value that makes sense
• Make sure people can use the keyboard to get
to the first letter
49. My friend asks me to get a coffee... I don’t
know the place he suggests so I look it up.
This site provides a Google maps embed,
which is helpful. Now to get directions, I
want to get the full Google maps website.
Let’s walk through the steps on how to do
this.
58. If the web developer had just left
the code in there that supplies a
link to the bigger version, I could
have skipped at least 5 steps of
the process.
59. <iframe width="425" height="350" frameborder="0"
scrolling="no" marginheight="0" marginwidth="0"
src="http://maps.google.be/maps?
f=d&source=s_d&saddr=Lange+Leemstraat
+388,+Antwerpen&daddr=Oever
+18+2000+Antwerpen&hl=nl&geocode=FUpMDQMdy5BDACnPp
9V3F_fDRzGKem7xhtvLfQ
%3BFRuFDQMd3RRDACn3LZoO9PbDRzH6wBiCH7Hl1A&aq=0&sll
=51.217691,4.396253&sspn=0.008817,0.016222&vpsrc=0
&mra=ls&ie=UTF8&t=m&z=14&output=embed"
></iframe><br /><small><a href="http://maps.google.be/
maps?f=d&source=embed&saddr=Lange+Leemstraat
+388,+Antwerpen&daddr=Oever
+18+2000+Antwerpen&hl=nl&geocode=FUpMDQMdy5BDACnPp
9V3F_fDRzGKem7xhtvLfQ
%3BFRuFDQMd3RRDACn3LZoO9PbDRzH6wBiCH7Hl1A&aq=0&sll
=51.217691,4.396253&sspn=0.008817,0.016222&vpsrc=0
&mra=ls&ie=UTF8&t=m&z=14"
style="color:#0000FF;text-align:left">Grotere kaart
weergeven</a></small> In a sense Google made a bad choice here.
61. Worth noting is that this problem is
extra frustrating on a mobile
device where you don’t really have
a keyboard to quickly open a new
tab and copy/paste text, every
action is slower.
63. Text
The map above is just an image that links to
google maps. There’s a link to the full map
below so people don’t have to copy/paste
address info into Google Maps.
Alternatively I could serve up the image with
the Google Maps static maps API.
64. If I hit the link on mobile I’m taken directly to
the Maps application.
65. Advantages
• Better mobile performance: you only have to
load an image, not a full map
• Can’t get into the Maps scrollbar of death™
• Direct link to Google maps application on iOS
& Android
66. So what is the Maps
scrollbar of death™ exactly?
When scrolling on your mobile
phone or tablet it all works
fine, but as soon as your finger
hits a google maps you start
repositioning the map inside
its container.
http://joggink.com/2012/01/responsive-
google-maps/
67. Recommendations
• Don’t use Google maps embeds for displaying
single address locations
• Of course, using maps to display map data is
warranted (!)
• If you must, always add a link to Google maps
underneath a Google embed
• Better, use the Google Static maps API instead of
an embed if the image is for illustrative purposes,
and link that image to Google maps
69. The next example is very much a detail but
something that tells me the UI designer really
knew what he was doing. Look at the white
arrow [to the left of the word Sponsored]
70. Notice how when the shown image has a
white background, the arrow still shows?
That’s good design.
71. Some guy did a study on readability of labels
in Google Maps.
72. If you zoom in you see that every label has a
white outline/stroke.
73. He compared Yahoo!, Bing and Google maps
and found Google maps to the most legible.
This had to with the aforementioned outlines
“The white outlines of Google's but also with better clustering of information.
city labels are thicker, and you Unfortunately the article is offline.
can't see maps' background
details (roads, rivers, etc.) behind
them. (...)”
http://googlesystem.blogspot.com/2010/12/why-google-maps-labels-look-better.html
74. Here’s an example of my own, this is a little
part of a site I’m building about World War 1,
unfortunately I can’t show the full design
since it’s still in progress. Take a look at the
“video” icon and you’ll see it uses the same
outlining technique to make the icon visible
on any background.
75. If I had used a standard white icon it
wouldn’t have been very visible on white.
78. This is a site of a friend of mine, he runs a
cool coworking space in Antwerp. I take all
my examples out of the real world so I’ll have
to buy him a beer next time and apologize
that I used his site as a “bad” example.
79. If you click an image you get this “lightbox”. This
one by Lokesh Dakar is used on many websites. It’s
not a good implementation: to start with, it doesn’t
really take any advantage of your screen size: if you
have a giant screen the photo will still be small.
81. The problem is not really about the
lightbox “interaction” but about the
quality of the implementation.
82. I don’t want to diss the authors of these
plugins, the web runs on open source
and it’s a wonderful thing.
Lightbox2 was written in a time before
responsive webdesign and back in the
day it was an adequate solution.
These days, if you want to build
something great, you’re going to have to
do better than throw in a lightbox script
from 5 years ago and call it done.
83. Lightbox2:
• Animations between items: slow, adds 1-1.5
seconds to viewing each photo
• Not very usable on mobile devices
• No appropriate use of space: image doesn’t
fill the screen
85. Niko Caignie is an Antwerp
based photographer.
This is his portfolio album on
Google+.
I love how the photos take up
the available space compared to
the tiny thumbnails in most
galleries.
86. Here’s the same shot with a
mazimized browser, notice we
see more images, and they
become bigger.
87. This is a detail view, once again,
super nice use of space.
88. This has nothing to do with the
presentation but because Niko
was kind enough to let me use
his photography as an example
here’s a link to his google+
portfolio: https://
plus.google.com/photos/
105216293260831528847/
albums/5625394812057179681
(this way you can also see for
yourself why it’s a good
implementation!)
89. Recommendations
• No animations between images
• Clever progressive loading
• Keyboard navigation
• Make photos as big as possible
(appropriate use of space)
91. So let’s do something fun and let’s go watch
a trailer at the Apple trailer site.
92. We have a 27” screen so that is cool, we
have megahighspeed internet, so let’s watch
this baby in 720p.
93. Say what? The video opens... in a box? Look
at all this screen space NOT used for video.
94. Mysteriously enough if I open up the video in
Apple’s Safari there is a full screen button.
95. Apple should know better
• Chrome doesn’t show the fullscreen button,
Safari does so it’s perfectly possible in Webkit
• It’s perfectly possible in all desktop browsing
using Flash, this is probably a political issue
The user experience suffers
96. The good
YouTube. Always has the option to go
fullscreen. Good responsive design: bigger
screen, bigger video.
98. What does this icon mean? A paper plane?
Apparently it means “send”. There is not a
lot of space on these screens so it’s natural
to try and display functionality using only
an icon but it surely can get confusing.
99. Apple is guilty of the same design
mistake... you could argue it’s a thing you
have to learn, that the flyer means send.
100. The iPhone uses a send label, this is pretty
straightforward and for me the way to go.
Language is one of the clearest interfaces.
101. Same icons
Anyone used the new Facebook app for
iPhone? There’s two icons, they look the
same...
102. ...lead to 2 different screens
...but they lead to 2 entirely
different screens. Not much to
say except: be consistent.
Mistakes happen to the best of us
— the Facebook app is hands
down one of the best examples of
great interface design.
104. A standard way to go about spacing would
be even:
h1,
h2,
h3,
h4,
p
{
padding-‐bottom:
12px;
}
105. Consider that headings should be closer to
the paragraphs they’re related to:
h1,
h2,
h3,
h4
{
padding-‐top:
12px;
padding-‐bottom:
6px;
}
p
{
padding-‐bottom:
12px;
}
106. Difference between left and right...very
subtle but leads to better rhythm and a
clearer relationship between a heading and
the content following that heading.
107. A good user interface =
A thousand details coming together
109. To reach an epic quality level, you NEED to
care about all of these details and more. A
good interface designer is a pragmatic
perfectionist. It’s not enough to just focus on
the visual part, you need to focus on
EVERYTHING.
111. In the old days, when someone started to
learn a craft, they would start off as an
apprentice and go to different masters to
educate themselves in their craft.
Ideally every master was a bit different so the
apprentice could learn from varied points of
view and form his own.
Eventually the apprentice would become a
master of their domain.
Applying this to modern UI design I believe a
good UI designer should dip their toes in
other jobs and fields like copywriting,
backend development, photography, print
design, business, marketing, front-end
development and so much more.
112. Thank you!
Follow me: @wolfr_ on Twitter
E-mail me: mail@wolfslittlestore.be
Read the blog: wolfslittlestore.be/journal
113. Follow me on Twitter
Here’s the link:
http://twitter.com/wolfr_
114. If you liked this presentation
Check out my previous presentation Design for
Developers. You can view it here: http://
www.slideshare.net/Wolfr/design-for-
developersonlineversionlong
115. Are you a talented UI designer?
I’m always looking for people to work with. One
of my goals is to become the go-to company
when talking about UI design. Obviously I can’t
do this alone. If you live in or around Antwerp,
Get in touch: mail@wolfslittlestore.be
116. Subscribe to the blog:
Here’s the link:
http://wolfslittlestore.be/journal/
Through RSS:
http://feeds.feedburner.com/Wolfslittlestore
117. Resources
Web content mentioned in this talk
http://marketingland.com/review-galaxy-nexus-android-4-phone-1409
http://joggink.com/2012/01/responsive-google-maps/
Web content around the subject
http://www.designstaff.org/articles/design-details-2011-11-29.html
http://www.andybudd.com/archives/2011/12/why_designers_are_holding_themselves_bac/
http://tapbots.com/blog/design/designing-convertbot
http://littlebigdetails.com/
Books you should read
Defensive Design for the Web: How Designing the obvious by Robert
to improve error messages, help, Hoekman Jr.
forms, and other crisis points by
Jason Fried & Matthew Linderman Designing for interaction by Dan
Saffer
Designing Web Usability by Jakob
Nielsen Getting Real by 37signals http://
gettingreal.37signals.com/
Don’t make me think! by Steve Krug
118. 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