Photoshop is one of the most extensive design suite ever. It is used by professionals all over the world for it’s power and features. But many of you like me who don’t know about Photoshop that much want simple tools that can help you get done with basic designs without loosing the core essence of keeping the design appealing and user friendly.
The Adobe Photoshop software is bloated, it crashes right at the moment you forgot to hit save, and it produces a design that is nothing more than a useless and non-functioning image to send to clients.
Despite loathing the software that is the staple of our industry, we can’t live without it. High fidelity mockups have spoken in a way that we just can’t beat with any other applications… until now. Let’s explore the next stage in the evolution of the web. Here’s how to kill Photoshop and do responsive web design in real-time with the only app we need: the browser.
Why Kill Photoshop?
1. It’s Double the Work.
The main reason to kill Photoshop is because it doubles or even triples your current workload. You can spend hours of your precious time inside of Photoshop and what do you get? A picture.
2. Clients Can’t Use It.
This brings me to my second point. Photoshop produces a mockup that clients simply can’t use. To quote Steve Jobs, “Design is how it works”, and if your clients can’t use what you’ve built then you’re missing a huge piece of the puzzle. Once your clients get to use your design and they find that it doesn’t work for them, if you’ve used Photoshop you’re back to square one.
3. You Can’t Make Changes Live.
If you’re designing in the browser you can make changes to your design in real-time. Let’s say you have a client drop in the office and they want to change the color of the main headline (or gasp, the size of the logo), but they’re not quite sure what color they want it to be. You launch your browser with a single tool (more on this later) and iterate as many colors quickly to find the perfect shade of light-ish, aqua-ish, color of my second wife’s Mercedes, blue. (you know exactly what I mean)
Client wants a red headline? Who needs Photoshop when you can make changes live in Firebug?
4. CSS is Ready.
For years there were certain things that we needed Photoshop for that CSS just couldn’t do. These included things like buttons, shadows, borders, etc. Now that CSS is all grown up, we can do many of the stylistic elements that we crave in CSS, and Photoshop is needed less and less with every new release.
5. Photoshop is Expensive.
Part of the beauty of the web is that it’s income-agnostic. Anyone can get into web design with a basic PC (gross) or an older model of Mac (yum, that’s better). The problem for years has been that you needed a machine that could handle the load it required for the latest version of Photoshop that you had to mortgage your home to get in the first place. You can keep from having to sell your little sister to buy Photoshop now that you can design straight in the browser.
6. Photoshop is Static.
Now that we’ve established that Responsive Web Design is the future of the web, why spend time designing a website in Photoshop that isn’t fluid? If you feel the urge to design each breakpoint (where the Responsive Design breaks) in Photoshop, then return to my first point and change “Double the Work” to “Six Times the Work”.
Working inside of Photoshop only gives you an image that clients can’t use.
7. Photoshop Has No Prototype Value.
Sure you can prototype the look of a website inside of Photoshop, but you can’t iterate on the fly. The new evolution of the web places an enormous value in the ability to let a design evolve with use. Designing in the browser also affords you the luxury of creating multiple style sheets for your markup to drastically change the look and feel of your site with just a few changes in the style sheet link. From there, you can again fine tune your design live to really hone in on what the client wants.
8. You Start with Content, Not Style.
A good web designer understands the holy grail of designing for the web: great markup. Content out or the content first approach to design isn’t just a fad, it’s gospel. In his famous article, The Web is 95% Typography, Oliver Reichenstein of Information Architects, argues:
“95% of the information on the web is written language. It is only logical to say that a web designer should get good training in the main discipline of shaping written information, in other words: Typography.”
Oliver Reichenstein argues that the web is 95% Typography.
It’s important to note that “shaping written information” refers to style, but my point here is that if the content that you use is 95% of your design, then the majority of your time in Photoshop is wasted on 5% of a great design. In that light, you’re also spending that time in the wrong order. Designing your content first and coding semantic, standards-based markup is the foundation of a great design and not something you approach as an after thought of Photoshop. Having this markup first allows you to iterate your styles quickly without having to reinvent the wheel every time you make a change.
Now that we’ve killed Photoshop, we need to get into the nitty gritty of how to still make a living without our favorite, yet most frustrating app. After all, talking about what’s broken without offering a solution doesn’t do anyone any good.
Here’s my process for designing without Photoshop:
1. Choose Your Text Editor.
The text editor is by far the most important tool for the web designer. It’s the lifeline app that we absolutely can’t live without, not Photoshop. Although everyone with a computer has access to a free text editor, there are three main editors that seem to currently be the most popular.
SUBLIME TEXT
Sublime Text 2 is the most widely used among the Treehouse team.
If you’ve watched any of the most recent Treehouse Tutorials, you’ll notice that the designers (and developers for that matter) on the teaching team have all been using Sublime Text 2. It’s a clean text editor with much of the functionality you need, while getting rid of the stuff you don’t.
CODA 2
Coda 2 from Panic is a great editor for designers and works great with Transmit for ftp.
Coda 2 is the latest installment from Panic. It has many extra great features and works nicely with a built-in ftp functionality that lets you quickly upload your files to your server. It’s important to note as well that many designers prefer Coda because the interface has a much more “designed” feel to it.
TEXTMATE
Text Mate has been a go to editor for designers and developers alike.
Textmate has been the stripped-down text editor that many people have loved for years. It’s simple, yet gives you the color differences and collapsing that you don’t get with the free editors.
2. Create Your Markup in HTML.
A great design should start with the content. Although getting content from a client is harder than getting them to approve a Photoshop mockup, designing from the “content out” gives you the basis you need to decide the approach you want to take. How can you design the best solution when you’re not sure of what needs to be said? Our jobs as designers are to be great communicators and establishing what the client wants to say is a great place to start.
Once you’ve got your content, mark it up in html using the best practices of creating great, semantic markup. Make sure your markup is completely accessible to those that have disabilities as well as making it ready for readers like Instapaper or Readability.
3. Create Your CSS Reset and Stylesheets.
Now that you have the html structure of your website, decide on the best CSS reset so that you eliminate all of the built-in styling from the individual browsers to give yourself full control of your styles.
Once I’ve decided on a reset, I usually create multiple stylesheets in my text editor, with media queries at popular breakpoints, and save them. I create multiple stylesheets like most people create multiple mockups in Photoshop. All of have to do to show a client a different look is change “style1.css” to “style2.css” in the link in the head tag of my html document. Once they’ve decided on which look they like, we can work together in the browser to make the final tweaks. For now, we’re just setting it up so we have this ability once the design is complete.
The Magic Equation for Responsive Images will be set by your baseline CSS reset.
Once I’ve got my stylesheets created, I usually hop on over to Colour Lovers or Kuler to find a color palette I like based on the colors from the client’s logo or branding guidelines. Then I place the color values in the comments atop the CSS file so I have them for reference throughout my design process.
4. Upload and Hookup Your Javascript and jQuery.
The next step in our setup is to define the different types of Javascript files we want to use for our project and make sure that they’re loaded and the scripts are placed in our code to “hook them up”. Here are a few of the Javascript files I’ve used on multiple projects:
FITVIDS.JS
FitVids, from the lads at Paravel, Inc, is the best plugin I’ve found for creating responsive videos.
If you’re going to be using video in your design, FitVids.js from Paravel is a must have. You’ve likely encountered this plugin on just about every responsive site you’ve visited lately. I don’t know what I would have done without it.
FITTEXT.JS
FitText.js, also from Paravel Inc, makes sure that your headlines always look good.
FitText.js is another Javascript plugin from Paravel that allows you to create fluid headlines that fill the container that you’ve given them. It leads to a better design and one that doesn’t look broken at certain break points.
RESPOND.JS
What would web design be without having to look out for other browsers? Even more than Photoshop, this is probably the biggest frustration in the world of web design. Luckily, there are genius people out there that create great Javascript like Respond.jsto take care of the browser support for us.
5. Open Your Browser of Choice.
In order to design using the browser, we’re going to have to pick one, naturally. The big three are Safari, Chrome and Firefox. Designers typically choose one based on their own preferences or biases, but all three are great and have their own developer tools.
FIREBUG
Firebug is a developer tool you can use with Firefox to tweak your CSS live in the browser.
One of the great things about designing with Firefox is the Firebug developer tool. I’ve used this one for a long time and have had a great time using it to design in the browser.
6. Know The Magic Equation.
The Magic Equation for turning pixels into percentages in responsive web design.
The most important key in Responsive Web Design is knowing the magic equation. This isn’t necessarily a post on how to do Responsive Design so I won’t go into great detail here, but knowing how to convert pixels to ems and percentages is absolutely vital.
7. Build Your Fluid Grid.
GRIDSET
Gridset is a web app developed by the team at Boulton Design to help you create the perfect grid.
Gridset, the great new tool from Mark Boulton and the awesome crew at Boulton Design, will allow you to build the perfect responsive grid for you new project. I’ve used it a lot lately and recommend it to anyone looking to experiment with different grids. It also allows you to save grids from other projects for future use.
FRAMEWORKS
If starting your grid foundation from scratch isn’t for you, then Bootstrap, Foundation, and Skeleton are a just a few of the Responsive CSS frameworks that are available to you. They come complete with grid structure, content layout, and built-in CSS for buttons, etc. Frameworks enable you to get off the ground and running even faster, and they have a structure that has been proven over and over again to be reliable and flexible.
8. Set Your Fonts, Type and Layout.
Now that you’ve got your basic grid laid out, it’s time to consider how you will structure and style your text. Knowing what your reader’s needs are, and then designing the proper content structure for them, will lead to the best product possible.
TYPECAST
Typecast allows you to try different fonts, font sizes, line heights and layouts in real-time.
I’ve had the great pleasure of using a new web-based tool for designing content-first layouts called Typecast. Rarely have I ever had so much fun using an app to set type and content style.
Using the fonts from the great web font services like Typekit, Fonts.com, Font Deck, and Google, you can use Typecast to see how your fonts will look in real-time and right there in the browser. It’s amazing and you’ve got to check it out. It’s currently in beta, but after they personally took me through the app, I see it as being a huge game-changer.
9. Test, Test, Test.
Since Responsive Web Design has gained so much traction, that means that people everywhere are creating great Javascript to aid in its growth. A few websites you can use to test your designs in the browser are Responsinator, Responsive.is, and Responsive Design Testing, just to name a few.
10. Edit Your Images.
Here is one of the biggest challenges facing a world without Photoshop. We still have to take care of crafting and preparing our images. Luckily, we have new alternatives such as Acorn that are less expensive and a lot less bloated. Also, if you’re on a tight budget, you can just Google free online image editors and pick the one you like the most.
Conclusion
I know that this topic is a sensitive one. For years designers have used Photoshop to push our craft forward. I’m not so naive to think that Photoshop will disappear overnight, but I wanted to show you, our great reader, that the future of Web Design is upon us.
Two great strategies, Designing in the Browser and Responsive Web Design are both here to change our industry and change the way we work. I hope this article opened your eyes to some new possibilities and some new tools. Go forth and create, but do it in the browser!
Test out these strategies and tools, decide what works for you, and write me to tell me about it. I can’t wait to hear how it goes…
This post was authored by Josh Long Of of Treehouse and was originally published on the Treehouse blog
