After a nice and short chat with Jacob Thomas (@jakeup) I was motivated to write my first post related to web design. My passion.

How do we start creating a great web design? Every designer has his own routine. This includes collecting all the assets, reviewing the information from the client and doing a research about the branding/product/app of the website, we are going to make.

After having all these information in our hands we prepare to work on the layout and wireframes of the website. It’s always a good recommendation to start using a real piece of paper and do a sketch with your bare hands like this.

What now? We have to go back to our computer and to our design software. In my case, I use my dear and beloved Photoshop.

Offtopic: I’m not going to talk in this post about how we deal with the art direction of a website.

Ok, in Photoshop, we create a new blank canvas. But what we don’t realize is that it is actually not our real blank canvas. Our canvas is the browser. And don’t forget that we have the monitor display showing the browser with your website in it.

Like an art painting, you can see that every paint goes with a nice frame. There are some exceptions, but that is not what I want to put down here. Because, in web, we have rules. Rules that we cannot deny. Without such rules, GUI design simply won’t exist.

We must understand that the people who will see your creation, will see it from a browser and more importantly, from a bright monitor display or any other device. The device is our frame. The safe area.

In final and shorts words, I recommend you to use a white canvas with a browser as a frame. You can download this Photoshop Browser Template and start creating from there and you will see my point.

And finally, don’t forget to check the Paper Browser.