Most of my work comes from PSD to WordPress, which means I translate Photoshop files to a WordPress theme. So for those of you that are very comfortable with Photoshop and are looking to design your site yourself, here are a few things to keep in mind:
Design with a grid
A grid? Yes, a grid. By grid I mean a CSS grid. The CSS grid can be as simple as having a main content area and a sidebar section. So basically, a CSS grid is how your content is divided.
Grid systems are based on edge to edge pixel withs of the design. Some of the more popular grids are 960px, 1024px (although not as popular as it once was) and 1140px. You can download the PSDs for some of these grid systems around the internet, but here are some links to a couple of them:
As screens become wider and wider, you’ll see designs that are wider and wider. In fact, StudioPress recently put out the latest version of their Genesis framework, version 1.9, and it uses a 1152px grid.
Download the PSD’s or don’t, use the grids or don’t, but please keep in mind the width you start your design with. If you design a PSD that with content that spans 1500px, 1700px or even larger (unless you’re building a horizontal scrolling web site), there is really no way your web developer will be able to match it because it’s far too wide for normal screens. Sure we can scale it, but your text will scale as well, which means they’ll be far too small to read on a screen. Which brings me to my next point:
Font sizes and Typography
There are many ideologies when it comes to font sizing and typography and much of it depends on the kind of site your designing. Web trends come and go, but user experience is here to stay and isn’t a trend! That means readability should be a priority for your design. Most people don’t like having to squint when looking at a website, so why use small font sizes on your website?
I generally try to stay away from anything under 12px, but like to stay above 14px if at all possible. This becomes more important with responsive design as small fonts + small screens = worse user experience!
Some fonts look better than others, but when designing a website in Photoshop, make sure to use web safe fonts! There are many fonts that might be on your computer but might not loaded on other’s computers because of programs you have installed. Or depending on the operating system you use, you may have fonts that others don’t. Mac users should pay special attention to this as one of the most popular Mac fonts, Helvetica Neue, comes standard on every Mac, but not on PC’s.
To aid in opening up the amounts of fonts available to use on the web, font repositories have popped up. One of the biggest and most prominent is Google fonts. Any font available there will be can be used on any web design!
Web Design Coloring
Pretty self-explanatory, but worth a mention. Some colors go better together than others just like many things in life. Peanut butter and jelly, cookies and milk, etc. Colors are the same way when it comes to web design.
Now yes, experimenting and trying out different colors for your color palette is always recommended! But keep in mind that you’re designing your site for visitors and users, so just because you like the ways colors work together, doesn’t mean they will!
Have anything you’d like to add to the list? Have any questions? I’d love to hear from you. Please leave a comment below!