Archive for category Design

Less is Better

Less is Better: “

A fascinating conversation with 37Signals’ David Heinemeier Hansson.

David Heinemeier Hansson is one of the most influential voices on the Internet. He is the author of the immensely popular Ruby on Rails programming framework, is a noted blogger and media figure, and is elegantly opinionated when it comes to the best ways to make great software. People follow David’s lead in droves, and for good reason: as a partner in the multi-million dollar company 37signals, David is one of the most successful young entrepreneurs in today’s Web economy.

Creators of Basecamp, Campfire, Highrise, and Backpack, and authors of the widely read Signal vs. Noise blog, 37signals is an advocate for all things simple and beautiful. We are delighted to share this interview with David about a range of topics—from software development to the productivity gains associated with making people happy.

Audio clips of the interview are included throughout the interview transcript.

Read the rest of this entry »

No Comments

40 Free Tutorials on Advanced Drawing Techniques – Vectortuts+

40 Free Tutorials on Advanced Drawing Techniques – Vectortuts+: ”

HOMETUTORIALSARTICLESFREEBIESVIDEOSABOUTSUBSCRIBE BY RSS | EMAIL | OTHER
HOME  \  ARTICLES  \  INSPIRATION  \  40 FREE TUTORIALS ON ADVANCED…
CATEGORIES
CONTESTS
INSPIRATION
INTERVIEWS
NEWS
TECHNIQUES
WEB ROUNDUPS

40 Free Tutorials on Advanced Drawing Techniques
Feb 19th in Inspiration by Chris Spooner
The traditional form of drawing and sketching is a highly sought after skill. Develop your personal drawing abilities by following this collection of 40 great tutorials on advanced drawing techniques, including general theory, useful tips, comic inspired art and some methods for transforming your creations into digital format.

Author: Chris Spooner
Chris is a web designer, logo designer and vector illustrator. Find Chris’s portfolio and blog at SpoonGraphics.

1. How to Draw a Car

Use a range of pencil drawing techniques to create an American classic, the Corvette. This tutorial from DueysDrawings.com covers the process from roughing out the initial outline through to shading”

(Via .)

No Comments

Jason Santa Maria – Make Yourself Presentable

Make Yourself Presentable: “

My first time speaking professionally in public was back in 2005 at the first An Event Apart in Philadelphia. While not my first time speaking in front of a big audience, it was the first time I had to prepare a slide deck and use Keynote.

Before and after comparison of slides

Before and after view of a slide deck. On the left, you can see the bright red used to slides that need work, as well as black and grey for title slides, and blue for quotations.

A sample title slide

Two basic rules: simple and big

A sample image slide

When I use images, I almost always use them full screen and free of distraction.

A sample subsection slide

Keep your title slides to a few words, then speak through the rest of the story.

A sample quotation slide

A sample quotation slide.

Understandably, I was nervous, so beforehand, I had scribed lots of notes to guide me as I was speaking. On the big day, I used Keynote’s ‘presenter mode’ which allows the presenter to see their notes while the audience sees the normal slides. A few slides in, I realized my grave mistake: I had entirely too many notes than would fit on my small screen, and no way to access the hidden ones. I was lost.

I didn’t completely bomb, but I wasn’t great either. The mishap threw me off and made my delivery dry and hurried. I had spent so much time writing the talk, I hadn’t even thought about what I wanted to say. I was onstage without a point—or one that I was aware of without my notes.

At that point, I realized that I couldn’t let technology do the talking. Maybe it was watching people like Jeffrey or Eric, whose presentation styles are loose and conversational, but I realized that if I had any hope of injecting a bit of myself into a talk, I would have to get the information into my head rather than on my screen.

Since then I’ve done a good bit of public speaking, and I’ve never given a talk that way again. I’ve collected some pointers below that help me prepare on what I want to say, but I give no assurances. These are things that work for me; what works for you might be completely different. Public speaking, especially good public speaking, is tough as hell, and I don’t claim to be an expert.

Your Slides Are Not Your Talk

Even though slides are what most people equate with ‘the talk,’ depending on your presentation style, they are actually one of the least important aspects.

Focus on what you want to say. I start out by making outlines in a notebook and flagging things I know I have information on, or things I need to research further. If you’ve read anything I’ve written over the years, you’ll probably see this process is similar to how I do many things, building with small steps and not worrying about the final product too early.

I try to find a story whenever possible, or at least try to give a talk a natural arc. Collections of assorted tips and tricks can be great if you’re that kind of speaker, but I’ve found this doesn’t work as well for me. Most times I like posing an argument then supporting and building on it over the course of a talk.

So how do you find your arc? Focus on the message that you’re trying to convey and make sure all your points support it. That, and don’t worry about the design of your slides until it’s time to start worrying. When I start working things up in Keynote, I use just three colors for slides. Black for titles, grey for secondary titles, and blue for quotations (if any). I transfer my outline into Keynote and build a structure around those three colors. When I hit an unknown slide, where I know something should go but I don’t know what that something is yet, I drag a red swatch from the color palette onto that slide to change the background to bright red. I can go back later and see where the problem areas are at a glance. (This is not dissimilar to Cory Doctorow’s tip for inserting ‘TK’ when writing.)

Working this way allows me to build and write a talk in stepped approach. I introduce a limited number of slide types to help me reign in my thoughts and stay focused. I go through the deck in multiple passes, adding more detail and refinement each time until the story really starts to take shape. Only then do I start to worry about the actual design of the slides.

Don’t Be Small

I have two basic rules for slide design: simple and big. Type should always be big enough to read from the back of the room, and simplicity is best to convey information quickly. For instance, when I use imagery, I only use images that take up the full slide. And usually without any text. Just a simple big picture and then I fill in the rest of the story during the talk. I generally lean towards having lots of slides because I like having lots of examples or alternate ways of presenting information.

Throw Yourself A Line

I often think of a slide as the little graphics superimposed next to a news anchor’s head on TV. There is just enough space to convey a starting point to a thought, not always the thought itself. It’s your job as the presenter to deliver the story. I often employ short titles and phrases of one or two words and talk around that thought. This not only has the advantage of forcing you to turn your attention to the audience instead of worrying about what your slide says, but it also makes the presentation more special. You, the speaker, not the slides, are conveying the information. This isn’t something that can just be read and your presence inconsequential.

I never memorize what I want to say. Instead, I rehearse so that I know the concepts I’m trying to convey. The slides serve as my mental triggers: I see the title of the slide and it makes me remember the important parts of the idea I want to discuss. Then I just talk through the key points, which has the added benefit of bringing about a natural improvisation during the presentation, and hopefully, helps me act a bit more naturally. I never use presenter notes or the presenter display mode anymore, I see exactly what the audience sees.

Reading Can Be Deadly

You are not invisible up in front of everyone, so merely reading bullet points off a slide that anyone in the audience can clearly read themselves is not enough. Your mood, body language, and delivery all affect the message. The presentation is just as much about you as the material you’re presenting.

(Via Jason Santa Maria: Articles.)

No Comments

Ivan Sutherland’s Sketchpad

Ivan Sutherland’s Sketchpad: “

Mid-’80s presentation from Alan Kay showing off Sketchpad, a simply incredible vector drawing application written by Ivan Sutherland in 1963. 1963! This is astonishing. (Via Swiss Miss.)

(Via Daring Fireball.)

No Comments

10 User Interface Design Fundamentals

10 User Interface Design Fundamentals: “

Photo of a submarine control panel

It’s no great mystery that truly great user interfaces are the ones that are engineered to stay out of the way.

‘Staying out of the way’ means not distracting your users. Rather, good UIs let your users complete goals. The result? A reduction in training and support costs, and happier, satisfied and highly engaged users.

When getting started on a new interface, make sure to remember these fundamentals …

Editor’s Note: Kyle will be talking about User Interface Design at The Future of Web Design NYC.

1. Know your user

‘Obsess over customers: when given the choice between obsessing over competitors or customers, always obsess over customers. Start with customers and work backward.’ – Jeff Bezos

Your user’s goals are your goals, so learn them. Restate them, repeat them. Then, learn about your user’s skills and experience, and what they need. Find out what interfaces they like and sit down and watch how they use them. Do not get carried away trying to keep up with the competition by mimicking trendy design styles or adding new features. By focusing on your user first, you will be able to create an interface that lets them achieve their goals.

2. Pay attention to patterns

Users spend the majority of their time on interfaces other than your own (Facebook, MySpace, Blogger, Bank of America, school/university, news websites, etc). There is no need to reinvent the wheel. Those interfaces may solve some of the same problems that users perceive within the one you are creating. By using familiar UI patterns, you will help your users feel at home.

Graphic comparing an email inbox with CoTweets inbox
CoTweet uses a familiar UI pattern found in email applications.

3. Stay consistent

‘The more users’ expectations prove right, the more they will feel in control of the system and the more they will like it.’ – Jakob Nielson

Your users need consistency. They need to know that once they learn to do something, they will be able to do it again. Language, layout, and design are just a few interface elements that need consistency. A consistent interface enables your users to have a better understanding of how things will work, increasing their efficiency.

4. Use visual hierarchy

‘Designers can create normalcy out of chaos; they can clearly communicate ideas through the organizing and manipulating of words and pictures.’ – Jeffery Veen, The Art and Science of Web Design

Design your interface in a way that allows the user to focus on what is most important. The size, color, and placement of each element work together, creating a clear path to understanding your interface. A clear hierarchy will go great lengths in reducing the appearance of complexity (even when the actions themselves are complex).

5. Provide feedback

Your interface should at all times speak to your user, when his/her actions are both right and wrong or misunderstood. Always inform your users of actions, changes in state and errors, or exceptions that occur. Visual cues or simple messaging can show the user whether his or her actions have led to the expected result.

Screenshot of BantamLives interface showing that it provides feedback with a loading action
BantamLive provides inline loading indicators for most actions within their interface.

6. Be forgiving

No matter how clear your design is, people will make mistakes. Your UI should allow for and tolerate user error. Design ways for users to undo actions, and be forgiving with varied inputs (no one likes to start over because he/she put in the wrong birth date format). Also, if the user does cause an error, use your messaging as a teachable situation by showing what action was wrong, and ensure that she/he knows how to prevent the error from occurring again.

A great example can be seen in How to increase signups with easier captchas.

7. Empower your user

Once a user has become experienced with your interface, reward him/her and take off the training wheels. The breakdown of complex tasks into simple steps will become cumbersome and distracting. Providing more abstract ways, like keyboard shortcuts, to accomplish tasks will allow your design to get out of the way.

8. Speak their language

‘If you think every pixel, every icon, every typeface matters, then you also need to believe every letter matters. ’ – Getting Real

All interfaces require some level of copywriting. Keep things conversational, not sensational. Provide clear and concise labels for actions and keep your messaging simple. Your users will appreciate it, because they won’t hear you – they will hear themselves and/or their peers.

9. Keep it simple

‘A modern paradox is that it’s simpler to create complex interfaces because it’s so complex to simplify them.’ – Pär Almqvist

The best interface designs are invisible. They do not contain UI-bling or unnecessary elements. Instead, the necessary elements are succinct and make sense. Whenever you are thinking about adding a new feature or element to your interface, ask the question, ‘Does the user really need this?’ or ‘Why does the user want this very clever animated gif?’ Are you adding things because you like or want them? Never let your UI ego steal the show.

10. Keep moving forward

Grandpa Bud: If I gave up every time I failed, I would never have invented my fireproof pants!
[Pants burn up, revealing his underwear]
Grandpa Bud: Still working the kinks out a bit.

from Meet the Robinsons

Meet the Robinsons is one of my all time favorite movies. Throughout the movie Lewis, the protagonist, is challenged to ‘keep moving forward.’ This is a key principle in UI design.

It is often said when developing interfaces that you need to fail fast, and iterate often. When creating a UI, you will make mistakes. Just keep moving forward, and remember to keep your UI out of the way.

Editor’s Note: Come hear Kyle speak about User Interface Design at The Future of Web Design NYC.

Photo credit: flickr.com/photos/lostamerica

(Via Vitamin Master Feed.)

No Comments