Designing a Single Page Product Website in Photoshop and HTML

Learn the complete design and development workflow for a compelling single-page product website! This comprehensive Photoshop tutorial guides you through the entire process, from initial concept to a fully functional website.

First, we'll explore website design concepts and create a detailed wireframe document to map out the structure. Then, dive into Adobe Photoshop – the industry-leading tool – to design the visual layouts. You'll master creating design elements, structuring website sections, and designing for responsive design with mobile devices in mind.

Once the visual design is complete, we'll transition to development using powerful web technologies. You'll learn how to bring your design to life with HTML5, CSS3, jQuery, and Sass with Compass.

By the end of this Photoshop training, you'll be proficient in:

• Setting global and helper styles for consistent design.
• Styling specific website sections with precision.
• Integrating plugins to enhance functionality.
• Implementing media queries for optimal viewing on various screen sizes.

Software Required:

• Adobe Illustrator CC 2014
• Adobe Photoshop CC 2014
• HTML5
• Sublime Text 3
• CodeKit 2

This tutorial is perfect for anyone looking to build a modern, effective product website with a strong visual foundation. Master the art of web design and Photoshop for web design!