Designing a Single Page Product Website in Photoshop and HTML
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.
Table of contents
- Setting up the Project Folder and Files 9m
- Building a Concept and Wireframe for the Hero Section 10m
- Building a Wireframe for the Features and Pricing Section 10m
- Building a Wireframe for the Gallery and Testimonials 8m
- Setting up the Photoshop Document 8m
- Designing the Header with Navigation 9m
- Designing the Header and Hero Background Image 10m
- Designing the Basic Elements for the Features Section 8m
- Adding Text and Icons to the Features Section 8m
- Designing the Pricing Tables Section 10m
- Designing the Gallery with Product Mockups 9m
- Designing the Testimonials and Footer 10m
- Reviewing the Design for Consistency 9m
- Designing the Mobile Navigation 9m
- Setting up for the Development Process 9m
- Building the Header, Hero, Features, and Pricing Sections 9m
- Building the Gallery, Testimonial, and Footer Sections 8m
- Slicing the Assets from the Design 10m
- Setting up Global and Helper Styles 10m
- Styling the Header with the Logo and Navigation 8m
- Styling the Hero Section 10m
- Styling the Features Section 9m
- Styling the Pricing Section 9m
- Integrating and Styling the Gallery Plugin 9m
- Styling the Testimonials and Footer 10m
- Developing the Scrolling Navigation 9m
- Styling the Mobile Navigation 10m
- Toggling the Mobile Navigation and Review Responsiveness 10m
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