How I designed a website without Photoshop
A case-study on how i re-designed overskrift.dk using HTML and Sass, theming the Twitter Bootstrap platform.
Photoshop has always been my favourite tool ever since I started making websites. It’s always been pretty much the same — open photoshop > make a new document with a grid which is approx. ~1400px wide > and start designing.
When the design was done. I would usually print out paper mockups in A3-format and glue it to black cardboards and also upload JPG images to a web server, so the client could see how it would look in a browser.
There were always many issues when I did it this way. First of all, I couldn’t show animations and when showing something in a browser, people tend to click on stuff, which any sane person, who sees something that looks like a website in a browser would do.
Second of all different resolutions / responsive design is not easy to explain from static mockups and who hasn’t made that long iPhone in Photoshop to show the entire mobile website— YUCK, that is not what it’s gonna look like!
All in all… it’s bad! Cause as I smart man once said….
Design is not just what it looks like and feels like.
Design is how it works.— Steve Jobs
So a few weeks ago I tried a different approach — an approach I’ve started to use over and over again ever since. I was asked to make a brand new UI and re-design the entire website for overskrift.dk based on the twitter bootstrap platform. I was to do all the frontend work and they would afterwards do all the backend work to integrate it with their system. I should note before we move on, that they didn’t want it to be mobile optimised.
Overskrift.dk is a danish social media monitoring service that collects data from twitter, facebook, blogs and other media and shows a detailed overview of the content.
Logo / Identity
Before I began with the website I started out with the logo. The client said they wanted the new logo to be clean and still have references to the old logo (the dots).
I made the new logo in Adobe Illustrator (still working on being better in Sketch). Removed the .dk, the tagline and gave it a more bold and clean font called Noto Sans.
Below here is the result.
The color palette I chose for the entire project was white, orange, black and gray. For the headlines on the website I chose Source Sans Pro and for the body text I chose good old Helvetica Neue. The client really liked the new logo above. With identity in place, I moved on to the next phase…
Wireframes
We had to agree to some sort of structure before we began the design process. Here is picture of what the frontpage looked like before…
After analysing the different pages and talking the old site through with the client. I sat down and sketched all the new pages and ideas on paper, before making the final wireframes in Axure. I did that mostly because the drawings looked pretty shitty. Below here are the initial sketches — in the final axure document the navigation and login field was placed differently.
Design and Code — no photoshop!
After the client approved the wireframes — with almost no changes. I started to design/code the first template, the frontpage, in HTML and themed twitter bootstrap simultaneously with Sass. And No, I didn’t use photoshop to mockup anything. :-)
There wasn’t really a need for it, since we had already agreed on the structure in the wireframes. Neither did I need to discuss colors with the client, since they had already approved the new identity/logo. So from there on I had a pretty clear idea of what the website was gonna look like.
An awesome thing to keep in mind is, that if they wanted to see a different color on a button for example. I didn’t have to go into each layer in a photoshop document and change it. I could just type in another hex / rgba value in my Sass project and it would change it throughout the entire site instantly — no need to make new jpgs or print out anything… SWEEEET!
Note: If you don’t use Sass yet. DO IT, it’s css on speed! ;)
First template done
So after some time the first template was done — the frontpage.
And we had a meeting again. We sat down and I presented the new layout on a retina laptop so all the icons and text would look razor sharp. We agreed on the overall look of the design, the hover states of the different buttons, things that could animate, icons and fonts. I believe It was a great help that they were able to see the site in action and I think it gave them a better gut feeling about the new website.
The best thing was that if they approved it, I didn’t have to start slicing a photoshop document and start coding. The code was already made. As you probably can imagine — this saved a lot of time, not only for me, but also for the client.
Before I went home I gave the URL to the frontpage to the client so they could play around with the site afterwards. At this point they were very happy with the result and the day after they approved the frontpage without any major changes.
The complete site
So I could easily move on to code the rest of the pages directly in the browser. It became easier and easier from here on to make the templates, because if I had themed one element or component in twitter bootstrap, I could re-use this again and again — very timesaving! Here are some screenshots of the end result…
You can check out the live version of the site here — it’s in danish so good luck if you’re not from scandinavia: www.overskrift.dk
Final words
If you’re using photoshop to design websites with and know how to code html/css. I can only recommend to try the above work method. After a couple of times, you will see all the benefits of designing in the browsers, you will start exploring animations that you wouldn’t have thought of doing and your responsive design will actually now be responsive…
So how should you do it… ?
1. Start with the basics: Colors, Fonts — identity
In the project I used white, black, orange and gray. I used different variations of the colors, but all together it was those 4 colors I used as the base for the entire project.
The fonts I chose before I started, but you can also choose them as you design in the browser. Sometimes you find out as you design that some fonts work better.
2. Talk with the client, analyse and make Wireframes
Talk with the client about their needs and discuss all the details you can think of. If they have an old site — talk about what has worked for them in the past and what hasn’t. If they have google analytics. Request access for that so you can see what people are actually using on the site. When you have all details in place, start sketching your ideas for the new site down on paper and make wireframes — also for mobile. It doens’t have to be pretty… but if you want a more professional look, you can use Axure or some other wireframing tool.
3. Start designing in the browser
If you have the color palette, fonts and wireframes I think you’re all set to make a site directly in the browser. If you have build a website before you should know a little about what’s possible and what’s not. If you know Sass that will be a great advantage for you — since you will have it all structured and you will easily be able to make changes on the fly.
You can learn Sass here — there are a lot of guides on the great internet as well.
You can also use a Chrome extension like live reload that can save you a lot of time from refreshing the page constantly when your hitting save in your files.
If you have any feedback or question to this article — you can reach me here: @assentorp
