Turn a Photoshop User Interface into a Responsive Website

Next Course: TBA
  • Phillip Peet
  • Phillip Peet

There are a distinct number of advantages to designing a website in Photoshop prior to coding it: #1. You can work collaboratively on a project allowing a designer to focus on the creative graphics whilst a developer can focus solely on the code; #2. You have a reference that can be used to guide your implementation; #3: It is much easier to have the graphic assets prepared prior to the implementation so that it doesn’t hinder your [a web developer’s] coding or workflow.

Following on from the responsive principles covered in Learn How to Code Responsive Websites you will prepare a Photoshop user interface for implementation. You will plan and prepare assets, create HTML page structure and apply CSS styles. Using viewport detection, media queries and mobile menu techniques you will optimise the mobile viewing experience.


  • A layered Photoshop User Interface
  • A cross device consistent website
  • A scalable mobile optimised website


Morning Session
1000-1030: Analyse Photoshop Layout & Prepare Assets
1030-1130: Plan/Commence HTML Implementation
1130-1200: Convert and Link Font Face Replacements
1200-1300: Apply External CSS and Format your HTML Page
Afternoon Session
1400-1445: Implement/Format Menu System
1445-1530: Add Viewport Detection and Media Queries
1530-1600: Upload and Cross Device Test your Implementation
1600-1700: Implement Internal Layouts

Enrolment Information

This workshop will be run at General Assembly in Sydney on Saturday 23 April 2016. To enrol or for more information please visit the official Turn a Photoshop User Interface into a Responsive Website page. Lunch is included in your ticket price.

Prerequisites & Preparation

This is an intermediate-advanced level workshop. Prior to enroling you should have either attended Learn How to Code Responsive Websites workshop or otherwise had some previous exposure/experience creating HTML/CSS layouts. If you have any questions or would like some more information/advice feel free to contact me via phillip@philbossdesign.com.au.

Before attending this workshop please ensure that you have

  1. Brackets, an open source code editor installed
  2. Preferably Firefox web browser and Firebug extension
  3. Adobe Photoshop installed

Download PDF Outline

Leave a Reply

Your email address will not be published. Required fields are marked *