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.