Web Design With A Text Editor
Wireframe & Moodboard Doing Over Photoshop
If you think designing a website with a text-based input tool seems a bit counter intuitive, then you’re right. It is. Yet I am glad I no longer force myself to work within Photoshop or other image editors. I used to spend hours with Photoshop; putting together pixel perfect comps with its inadequate text rendering and its unwillingness to do pixel-level adjustments, not to mention its regular crashing when doing simple tasks like layer duplication. That sucks, and I no longer have to deal with it.
Aside from my personal vendetta, there are other reasons I no longer use Photoshop for web design. Have you ever been asked “Why does this look different to the comp you showed me?” by a client, only to find out they’re viewing the site in an older browser like IE7 or, gasp, IE6? Wouldn’t it be good to avoid those false expectations which result in disappointment? Showing a client how awesome a website looks in newer browsers is a much better feeling than showing them how bad it gets in older browsers.
As much as I dislike Photoshop, I’d be lying if I said I quit using it because it was so bad. I quit using Photoshop because I found using a text editor better. Once I knew how to code (I got fed up not being able to build what I designed), I found it hard to be adventurous inside image editors. I no longer thought about websites as text and images, instead I thought of them in terms of elements and CSS styles.
I’ve seen people criticise this approach, saying things like removing Photoshop from your design process takes away room to experiment and push things around. They’re right… kind of. The one thing that’s great about working with an image editor is the ability to move elements around really quickly. While you can’t click and drag elements around in a browser (for the moment at least), you can do that kind of stuff with pens & paper.
Wireframing, especially with pen and paper, is a great way to get an idea out of your head and see what it looks like. It’s also a great way to show someone how you’re thinking because it’s fast and easy. What’s really awesome is when you wireframe with a client. Wireframing is a temporary deliverable, so while it can be worth delivering accurate wireframes in later stages, pixel perfection certainly isn’t required.
While wireframes are great they aren’t powerful enough to take on their foe, Photoshop, without their trusty sidekick: moodboards. Moodboards do what they say on the tin, their job is to set a mood/feel/vibe/graphic style of the website you’re designing. Their job isn’t to look like a website, so keeping away from website layouts and dimensions is advised. Don’t spend loads of time on them either, they’re moodboards not works of art; one hour tops.
Combining both wireframes and visual styles happens in a text editor and browser with HTML & CSS. Generally, I’ll write the markup needed for the structure of the page and then add in images and details later on. The greatest bit about this process, and perhaps its downfall, is its open ended. The website continues to evolve and there is no “completion”, like you get when developing from a Photoshop comp. Hence billing hourly would be appropriate, although I’ll save that for another post.
Cutting Photoshop out of my process has shortened the time between conception and delivery as well as adding opportunities for discussion with clients. It’s also opened my process up somewhat, clients now see the stages their website goes through and have more discussion because of that which makes them feel more included. The only drawback is it requires the designer to know HTML & CSS. Really though, HTML & CSS are pretty easy to pick up, they just take a bit of time to get in your head.
A Few Useful Tools
After moving to a text editor and browser, I’ve found some tools that make development a heck of a lot easier.
Color Picker is a great little tool that I really couldn’t live without. Before I found this, I had to go into photoshop to select a colour and get a hex code.
Webkit inspector / Firebug are so useful. Want to experiment with stuff like colours, padding and text-decoration without leaving the browser? Well you can with these. I can’t find a decent link explaining the Webkit Inspector (maybe I’ll write one), but right click in Google Chrome and select “Inspect element” to bring it up and fiddle with it for a while, it’s fairly intuitive.
Zen Coding is a great time-saving tool if you use it enough to remember the syntax.
Copy Paste Character for when you can’t remember the HTML code for nice curly quotes.
Inuit.css is a new but awesome CSS framework written by Harry Roberts. It’s a great tool if you’re experienced with CSS and you’re looking for a way to speed up early stages of development. It’s also completely free.
![<=======[ :]-<](http://dribbble.com/system/assets/3862/1601/screenshots/338485/retro_snake_shop_-_dribbble.png?1322786286)
4 Responses to ‘Web Design With A Text Editor’
This is pretty much how I’ve worked over the last year, beginning the work in HTML & CSS and then fleshing it out where needed by dropping into Photoshop.
I like what you said about a designer having to learn HTML & CSS, I did some work experience for a company a few years ago, the designer only using Photoshop and the programmer having to slice up designs. I showed them a bit of CSS and by the time I came back to work for them again their work flow had changed, with their productivity greatly increased due to the designer now taking care of all the slicing up of designs. It’s a small shift but it’s important
Yeah, I think learning how a bit about code changes a person’s perspective more than anything. When you start thinking about websites in terms of how things are served to the browser and how HTML is structured something starts to change and you have to adjust to it.
I didn’t move straight out of Photoshop into using moodboards (did wireframes already), it was more of a gradual process. For a while I’d do what you’re doing now, and take what I had in HTML & CSS and then stick that into Photoshop and play with it there. Only problem I found with doing that was I’d still feel restricted by the box model and found it hard to find “creative” solutions.
I like moodboards because they mean I don’t have to think about the box model, or worry about how something is going to work inside the browser. It allows me to focus on the aesthetics and emotions of the problem I’m trying to solve.
Nice article man.
I think both tools have their pros and cons.
I love Photoshop but I also like to code. My latest theme “Simple”, which you can seen at encide.net was entirelly designed using only Notepad++… and my brain…
(except some minor graphics)….
hallelujah