A presentation from the Beyond Tellerrand conference held in Düsseldorf in May 2017. I also presented a version of this talk at An Event Apart, Smashing Conference, Render, Frontend United, and From The Front.
Huffduffed (54)
-
Adactio: Articles—Evaluating Technology
-
109 RR Extreme Programming with Will Read
-
Joshua Porter | dConstruct 2008
dConstruct is an affordable, one-day conference aimed at those building the latest generation of websites. The event discusses how to design websites that not only work, but are an enjoyable experience for the user.
Tagged with user experience design conference event brighton clearleft
-
Brian Fling | dConstruct 2009
dConstruct is an affordable, one-day conference aimed at those building the latest generation of websites. The event discusses how to design websites that not only work, but are an enjoyable experience for the user.
Tagged with user experience design conference event brighton clearleft
-
The Power & Beauty of Typography
dConstruct is an affordable, one-day conference aimed at those building the latest generation of websites. The event discusses how to design websites that not only work, but are an enjoyable experience for the user.
Tagged with user experience design conference event brighton clearleft
-
The Designful Company
dConstruct is an affordable, one-day conference aimed at those building the latest generation of websites. The event discusses how to design websites that not only work, but are an enjoyable experience for the user.
Tagged with user experience design conference event brighton clearleft
-
Jam session: what improvisation can teach us about design
dConstruct is an affordable, one-day conference aimed at those building the latest generation of websites. The event discusses how to design websites that not only work, but are an enjoyable experience for the user.
Tagged with user experience design conference event brighton clearleft
-
Boil, Simmer, Reduce
The actual process of design, the path you take on the way to creating something, is in many ways a “meta object” that can be applied to any design problem.
Ever since his first experiences with the humble ZX81 back in the early eighties, Brendan has continued to explore the interplay of people, code, design and art both in his role leading the team at mN and on brendandawes.com, a personal space where he publishes random thoughts, toys and projects created from an eclectic mix of digital and analog objects.
In this session Brendan talks through his three step process: boil—filling your head with many ideas and possibilties, simmer—taking time to consider, and finally reduce—removing things till there’s nothing left to take away.
http://2010.dconstruct.org/speakers/brendan-dawes
Brendan Dawes is Creative Director for magneticNorth, a digital design company based in Manchester, UK. Over the years he’s helped realise projects for a wide range of brands including Sony Records, Diesel, BBC, Fox Kids, Channel 4, Disney, Benetton, Kellogg’s, The Tate and Coca-Cola.In 2009 he was listed among the top twenty web designers in the world by .net magazine and was featured in the “Design Icon” series in Computer Arts.
-
Richard Rutter – Typography in Responsive Web Design » UIE Brain Sparks
Richard: I talked about why good typography is a necessary component of a good user experience. I opened up by quoting some scientific research that was done fairly recently. It had a few crucial things that are really good for us to know.
One is that it proved that good quality typography is responsible for greater engagement during reading. What that really means is that participants in the research significantly underestimated the time taking to read type which was set well.
The overall conclusion of this research is that good typography induces a good mood. In other words, good typography is inherent to a good user experience. It then became necessary, I felt, to try and talk about some of the things that I think make for good typography. What is good typography.
I spent some time talking about responsive design with typography as its basis, about paying attention to microtypography, the tiny little things to get right in your designs. Choosing and pairing fonts carefully. I also went into some technical detail about your options for loading Web fonts, particularly with a view to loading fonts over slow connections on phones, for example.
Throughout the whole talk, I built up an example page. I started this off by picking on a simple paragraph of text, and setting that for comfortable reading. Then using a few media queries, end-based media queries, so they’re based on the text size, to adjust things like line lengths and so on for different screen dimensions. That paragraph is comfortable to read, regardless of the screen that you’re trying to read it on.
I looked at a few other things along those lines, such as type scale, for example. When you’ve got a very small screen, you haven’t got the scope to have really big headings, for example. That’s obvious, but you look at many responsive designs at the moment, and you’ll see some have got huge headings which take up the entire screen, and you have to scroll straight away to even get to the first paragraph.
I talked about a few other things along those lines. When it came to microtypography, I was trying to concentrate a fair bit on the OpenType features, which are features of fonts, which were available to us with CSS3.
Those are things like different types of numerals, so you can have lining numerals and old-style numerals, which are like capital numbers and lower-case numbers, if you like. The different scenarios in which you would use those.
Picking out one of typography’s old favorites, which is using real small caps, as opposed to tiny little capital letters. Tried to convey why those are different, and why it’s important to remember they’re different.
Choosing fonts and pairing fonts, in particular. With choosing fonts, let’s have a look at that to start off with. I was thinking about the requirements that you would have before you go and choose a font. You can get yourself a reasonable short list of practical things that font’s got to do for you.
Does it have the characters in there that the reflect the languages that are being used on the site, for example? Does it render well at the sizes that you think you’re going to use it on, on different screens and different operating systems?
All of these things that you can try out to decide, from a purely practical point of view, whether the font is right for you, before you even go down the lines of more subjective views. Does the font say what the text is saying?
Pairing fonts, I gave a few hints about how to try and make that easier. Picking a superfamily which includes a sans and a serif, for example, that have been designed by the same designer to work together. That’s a really easy way of knowing if they’re going to work. Picking fonts by the same designer which are different fonts but may still work together, this kind of thing. Using type foundry websites to help along the way about which typefaces individual foundries are saying go together.
There’s lots of information there to help you make these choices beyond “Does it just look right?” or “Does it look wrong?” I showed a few little things about the internal shapes of the letters, to try and explain a bit why some fonts look right together, and some clash.
All along, building up an example page, to try and put all of these into context.
https://www.uie.com/brainsparks/2013/05/29/richard-rutter-typography-in-responsive-web-design/
-
Resilient Webdesign
Page 1 of 6Older