Simple play icon Course
Skills Expanded

Designing a Single Page Product Website in Photoshop and HTML

by Jan Zavrl

Learn the design and development workflow for a single page product website. Software required: Illustrator CC 2014, Photoshop CC 2014, HTML5, Sublime Text 3, CodeKit 2.

What you'll learn

In this Photoshop tutorial we'll look at the design and development workflow for a single page product website.We'll begin with how to design a concept and subsequent wireframe document. Then we'll use the leading tool in the field, Photoshop, to design the actual layouts for the website. This will include preparing the basic design elements, separate sections and also the mobile device elements for responsive layout.Once we have the layout finished, we'll use technologies such as HTML5, CSS3, jQuery and Sass with Compass to develop the website and bring our design to life. By the end of this Photoshop training, you'll be more comfortable setting some global and helper styles, styling specific sections of the website, integrating plugins and setting media queries for different screen sizes. Software required: Illustrator CC 2014, Photoshop CC 2014, HTML5, Sublime Text 3, CodeKit 2.

About the author

Jan Zavrl has been involved in the web since the age of 14. Always on the hunt to learn new things, he began with teaching himself about design and development throughout high school and college. During college he landed a job as a designer and developer at web agency, Enki which later won several website and digital agency awards. He now specializes mostly in front-end and Drupal development while still designing intriguing web interfaces as the owner of Iuvo, a design and development studio wh... more

Ready to upskill? Get started