From our sponsor: Chromatic - Visual testing for Storybook, Playwright & Cypress. Catch UI bugs before your users do.
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.
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
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.
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.
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!
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.
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.
I think this article is absolutely awesome:)
I’ve started to design websites in the browser, and I’m trying to achieve everything with CSS.
So far its working and I love it!
Silver
Great views Patrick, but along with providing advise on the perfect css build, do also guide to some resources to help accomplish all of what you said.
Cheers!
Good read. I have always just started in an editor of choice and gone from there. I’ve never sliced and diced, but there are many ways to accomplish the end result.
I now scetch out designs and find that my production rate is much greater.
Very interesting… I think you’re right : CSS3 is already the key of webdesign. I enjoy it.. but sometimes I think I love photoshop. I’m going to miss it 😉
Patrick – I also don’t really use Photoshop much. I much prefer starting off with my own custom boilerplate template and then editing directly in the browser, adding successful changes to the CSS. This means we can design on the fly and see how our work is actually going to look.
Now, imagine if we could do this, but also pull in the power of Photoshop tools. Easier ability to change colours, create schemes for colour typography and layout, a more feature rich in-browser editing suite. I don’t know if anything like this exists but I think it could be great.
Excellent article. This struck me, ” My personal belief is that every web designer should be able to code up the HTML/CSS of their designs.” I’d take it a bit further and say that if designers can’t code up their design in HTML/CSS, then they’re not web designers.
Very true. And developers should be able to design what they code, otherwise they’re not web developers
Yes I agree with DP and JRB, but make sure the web development you are trying to develop should not be called “IMPOSSIBLE SYSTEM”. I mean like using ctrl+alt such as Ctrl+P to print, Ctrl+S to save. Because i know that all system/programs will be built in by Android/iPAD/Symbian or other Wireless technology. So keyboard with Ctrl, Alt, etc. will be gone in the future for all touchscreen enabled devices.