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 Aten Design Group's process for designing and ways to implement a design in a flexible, responsive way.

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 talk about ways to implement 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 keep your markup clean
• Scalable vector icons using @font-face
• Adding texture to text with mask-image
• Using blend modes in the browser!

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

Slides: 

Designing Interfaces.pdf