“Kill Photoshop!” the people say. There are many reasons to stop using Photoshop and start working the browser instead—a few great ones listed in this webdesign tuts+ article, tips for designing in the browser (Especially the ‘Work Gets Repeated’ and ‘Can be time consuming’ part).
However, many designers don’t know how to start designing websites in the browser—It’s a problem of habit. They’re simply used to Photoshop.
I fortunately started when Photoshop’s influence was less, than say, 5 years ago. Due to that, it was easy and quick for me to make the jump to designing in the browser. Here, I’ll detail how I design sites, for myself and my clients.
Defining colors, typography and more
I then start by making a Webstile (Webstiles is a template that I created myself, to quickly set typography, choose colors, etc. Webstiles’ Demo). I find making a Webstile important, since it clears my mind about the design, and acts as a reference which I can visit whenever I stumble on a problem.
Doing this well is definitely important—here, the foundation of the whole site is defined. It’s important that you work patiently and thoughtfully.
Making a basic site
Next, I pull up a grid (You can use any grid, I personally use one I created myself), and populate it with the content. A content-first approach to web design is simply essential. As Josh Long says in the article about Killing Photoshop:
Content out or the content first approach to design isn’t just a fad, it’s gospel
Once I have content ready, I split the content into easily readable chunks and organize them into areas along the grid, to unify similar content and separate different ones. The content is then typeset with proper heading and paragraph tags. The only colors used at this step are shades of grey—it’s necessary to have a clear visual hierarchy defined, even without colors.
Finalizing the site
Finally, I add colors, textures, images, etc. The site is fully completed by this stage. I ensure that assets are properly gzipped and compressed, and compress the images (Basically, all of the pre-deployment stuff).
In the technical side of things, I use Git throughout all projects, so I committed changes after each major feature addition.
I use YUI compressor as a build script for sublime text, to compress scripts and styles. My server’s htaccess (most of which is based on H5BP’s htaccess) sets caching and gzipping for various assets. On some projects, I use picturefill or retina.js for retina graphics.
Finally, all is uploaded through good ol’ FTP or SFTP.