Design It to Build It: What to Consider When Designing for the Web

Okay, so I’m getting to the point with CSS that I can usually design and create everything in the browser — I can’t remember the last time I sliced up a Photoshop layout and layer comped my sprites. For me, Photoshop is becoming more and more of a prototyping or blue printing tool: it’s basically just a canvas for creation. When it comes to the actual construction of the site, the only things I really take from the mockup is anything that I can’t create with CSS, the rest is just a map to guide me.

Think Differently

For years the process of designing a website using a Photoshop, Fireworks, Illustrator or any other graphics application was to mock it up, make sure everything looked perfect, then slice it up into pieces and put it back together — like a puzzle. CSS has basically made this process obsolete, you can accomplish so many things via CSS that you could only previously do in Photoshop. And with CSS3 even more things are possible.

Because designing in the browser is now more viable, it’s important to consider a few things when designing realistic mockups that will make the construction of the web site quicker and easier.

Consider:

• Realistic fonts
• Image-less Buttons
• Display size(s)
• Images
• What can be done with CSS?
• Is it possible?

Just a side note, when I talk about these considerations below I’ve added some great examples of live websites that have been built with minimal, if not any, Photoshop intervention. These examples may not directly apply to topic, but to the article as a whole.

Realistic Fonts

There is a countless number of really great fonts floating around out there on the web and we all want to make an impact or statement with some amazing font we have found. But part of web design is designing for the user and making sure all typography on the page is readable and accessible. Before designing, consider what fonts are either web safe or feasible on the web and try to avoid fonts that will be difficult to recreate through HTML/CSS/JS.

http://www.psynai.com/

Image-less Buttons

Buttons can be the bane of a developer’s existence. It’s a good idea to design buttons that can be created using CSS or Javascript. There are a lot of benefits for this: live text, adaptable buttons, no images to load, no more button sprites and no more size specific background images to mess with. Image-less buttons can save huge amounts of time in development, so before you create some super fantastic button in Photoshop consider whether its super fantastical design can be achieved in CSS, if so go for it, if not, buy your developer a couple of large pizzas and a case of Red Bull.

http://eighthourday.com/

Display Size(s)

With so many different sizes of displays from 320×480 to 2560×1440 you’ll need to consider how you are gonna figure out how your design will be rendered in many different sizes. Responsive design is a tricky beast so to simplify the process of design, ask yourself these questions before you begin:

• Who’s the audience, are they mobile?
• Is the content centered or left justified?
• Will it need to be responsive?

Not all sites will be used for smaller mobile devices, but it’s a great idea to consider how the site will represented in the standard 1024×720 all the way up to 2560×1440, and you may even need consider how your design will be viewed both horizontally and vertically. But the most important thing to remember is that the design needs to be feasible for the web — avoid horizontal scroll bars!

http://pcnw.org/

Images

No more slices and no more puzzle pieces. With any standard web site the only real images you need are a logo image, maybe a repeated background image for texture and any inline content images. In most cases, anything that used to require an image slice now can be created with CSS. CSS gradients, rounded corners, transformations, and a countless number of other CSS selectors can be used to recreate these types of images.

http://www.bountybev.com/home.html

Can it be done with CSS?

As you are joyfully creating a masterpiece in Photoshop, just ask yourself if all of the elements can be created with CSS. CSS is a very powerful tool and surprisingly, most design elements that are created in Photoshop can be easily replicated using it. Before you start cutting out images, buttons, rules, or anything else out of your design try to figure out if you can create them in CSS first. This can make development so much easier and more dynamic in the long run. Some elements in your design may never be able to be recreated with CSS so try to keep these elements to a minimum.

http://vijufest.ru/

Is it possible?

Don’t design some super huge, intricate background image that needs to be sliced in forty different pieces just to be able to load quickly. Don’t design a site that is 1280 pixels wide. Don’t design a site that is not feasible for the web. Get familiar with display sizes, image limitations, file limitations and just general limitations of the web.

The web is a pretty open and flexible place and you can pretty much create anything you want, but there are some natural restrictions that you need to consider before you start designing. Just make sure you’re not trying to create something that can’t be built. If you don’t know what development limitations there are it’s a good idea to code up a site every once in while so that you can get familiar with what can and can’t be done on the web. My personal belief is that every web designer should be able to code up the HTML/CSS of their designs.

http://benthebodyguard.com/index2.php

You can always change it

One huge thing to consider when designing for the web is that you can always change it. The web is super easy to update, you’re essentially only an upload away from chaining anything about your design. Don’t spend so much time sitting in front of Photoshop trying to perfect the design. Consider the web as an editable canvas, it’s not rigid like print design where you have to make sure everything is pixel perfect when you send it off to the printers.

The bottom line is that you are designing for the web. In as much as we think print design is the same as web design — it’s not. It has its own set of problems and its own set of limitations so its best to get familiar with them and get familiar with what can be accomplished via HTML/CSS/Javascript code. And just for giggles, try designing a building a website without ever opening Photoshop, I think you will be surprised at what can be accomplished when designed solely in the browser.