Designing and Implementing Beautiful, Flexible Interfaces

Click to watch "Designing and Implementing Beautiful, Flexible Interfaces"

Design is hard. Implementing a design can be even harder. But fear not! With a good handle on how to use Photoshop and a solid understanding of CSS, the limits on what can be accomplished can be lifted.

In this session I'll cover best practices for designing in Photoshop and implementing those designs with pixel-perfect, yet flexible CSS and HTML. I’ll walk through designing key interface elements in Photoshop and then jump over to the browser to show best practices for implenting a design.

This session will dive right into advanced Photoshop techniques including:

  • Using layer styles alone to style interface elements
  • The importance of iconography in a UI and how best to incorporate icons
  • Blend modes and the way they help or hurt your design
  • Saving time with Smart Objects
  • Adding texture using Patterns
  • Creating a Style Guide to organize and maintain interface elements

Once we have a design to work with, we’ll move on to implementing the design using the following CSS methods:

  • The crazy and awesome things you can do with box-shadow
  • Images, gradients, and layering backgrounds to create depth
  • Using pseudo elements to avoid unnecessary tags
  • Scalable vector icons using @font-face
  • Adding texture to text with mask-image

If you can design it, you can create it on the web.

Speaker(s): 
Track: 
Frontend
Experience level: 
Intermediate
Time slot: 
Wednesday 17:00-18:00
Room: 
Sydney

Comments

Are you gonna reveal the secret photoshop font pixels to rem calculations ;)

Morten, I probably won't get into rems since I'm not crazy about their current support among browsers (IE8). See: http://caniuse.com/#feat=rem. Besides, SASS makes it easy to work with em sizes!

yup and even easier to work with rem ;)

#nerdalert

Think the secret is, use fireworks for webdesign. Photoshop is created for image manipulation and not for designing websites.

@dreamlabs: To each their own. I think the important thing is to get past the debate over which is better and work on improving the way you use whatever tool you choose. There is no silver bullet. Photoshop has advantages over Fireworks which has advantages over Photoshop. Thanks for your thoughts!

You're absolutely right, and also I have made many many many designs in Photoshop. My comment was not ment as critique.

I recently switched to Fireworks and experienced a more efficient workflow, from design to html and a better re-use of repeating components which massivly reduces the file size.

At the end ofcourse, you should use the software which you're comfortable with and helps you reach your goals.

I've created a Gist of all the links I mentioned in the session here: https://gist.github.com/3434335.