Design Guidelines for Agencies, Part 3: Preparing Photoshop Files for Web Design
Preparing proper Photoshop files is an important part of designing for the web. If youre creating web page layouts in anything other than Photoshop, see my previous post in this series.
In this installment Ill cover how to prepare Photoshop for web design. Preparing your finished design files for production will be covered in another post. The topic of web design is a deep well and there are more than enough books and websites out there to sufficiently cover the topic. For further reading, see the bottom of this post for some links.
Screen Real Estate
Whats the optimal size for a website? A few years ago, most usability experts were recommending a maximum size of 800 x 600 pixels (actually, it ended up being 760 x 480 when you subtracted all the real estate the browser frame chewed up). The new standard is 1024 x 768 due to larger monitors and their higher screen resolutions. A size of 1024 x 768 is a guideline; you may decide to make your site larger or smaller. The final size of your website will depend on several factors: content, design, fixed-size elements such as banner ads, the target audience and client requests. Designing sites for hand held devices (like the iPhone) requires a different set of guidelines which I wont be covering here.
Your client might request that all of their important home page content reside above the fold. This may have been a reasonable request a several years ago, but now its irrelevant due to how web usage habits have changed over time.
Document Settings
When you open a new document in Photoshop, youll be presented with a document settings panel in which you can select size, resolution, color mode and bit depth.
Resolution is 72 pixels per inch for on-screen design. It would be higher (266-400ppi) if you were designing for print. Thats one of the advantages of designing for the web: you design at actual resolution or, in other words, what you design is what you get.
Color mode should be RGB since thats the native mode for anything viewed on-screen.
Color bit depth should be set to 8 bit. This yields a palette of 16 millions colors. The web-safe color palette (216 colors) is another antiquated web standard, due to advances in computer hardware.
Site Structure
One thing to consider when setting up your site is whether it will be centered or locked left. This effects how your site will behave if the browser window is expanded beyond the borders of your site. A centered site, such as netflix.com, will reposition itself to stay in the middle of the browser window while a locked left site, like Newfangleds, will stay attached to the left side of the browser window and expand to the right. Its important to consider what happens to your sites background when the browser window is expanded, especially if youre using a non-repeating image or pattern.
Another consideration is whether your site will be fixed or fluid. A fixed site will maintain its set width no matter how wide the browser window is extended while the content of a fluid site will expand and contract with the browser window. Actually, even most fluid sites use a mix of expandable and fixed content. Amazon.com has a fluid header and main content with fixed width side bars. Which should you use? Thats like trying to decide which is better: Coke or Pepsi. Your choice will depend on the needs of the client, the target audience and the content of the site. You can read about the advantages and disadvantages of fluid vs. fixed here.
The web is a dynamic medium (unlike print, which is static) and your site will render differently based on which browser, OS platform and monitor its viewed. However, that doesnt mean you should disregard grids and page templates. Setting up a grid for a website is just as important as it is for a magazine or newspaper and it can save you from reinventing the wheel every time you create a new page for your site. Your grid structure will vary depending on whether youve chosen to make your site fluid or fixed. Mark Boulton outlines some simple steps to designing grids on his blog; and his SXSW presentation (PDF) is excellent as well.
Creating page templates will help you avoid having to lay out every page in the site. No matter how complex the site is you should be able to break it down into a handful of template pages (each with its own grid) that can handle any content situation. Since the home page is the visual front door to a site, it usually is a one off design that contains functionality or components not found on any other page in the site.
Next time: How To Prepare Your Website Designs for Production
Web Design Resources
By no means a definitive list, just some of my favorite sites.
A List Apart
articles on graphic design, interface design, user experience design, typography
Vitamin
resource for web designers, developers and entrepreneurs
Mark Boulton
simple, clean and effective web design
Andy Rutledge
articles and opinions on design professionalism, techniques and culture
Cameron Moll (portfolio)
inspiring web designs
Web Designer Wall
design ideas, web trends, and tutorials
Which Ads Bother You?
When you type a URL into your browsers address bar, you expect to go straight to its homepage, right? Thats why it drives me nuts when I encounter an advertisement first (see screenshot below). This is happening more and more lately. I even have seen this several times when visiting the New York Times homepage, though its somewhat unpredictable as they must use a more sophisticated cookie approach than Cnet.
On the other hand, ads that pre-load media content dont bother me. Below are two examples, one from Cnet and the other from Hulu. Both videos load an advertisement first, but what I appreciate is that they also provide a time countdown to when the video you actually want to watch will begin. Knowing that I only have to sit through a few seconds of ads at the outset makes me much more likely to wait.
With Hulu content, the longer the video, the more ads the viewer must watch. Notice that on this screenshot, the white dots that appear on the videos timeline indicate when the show will pause for a commercial. I find this completely tolerable, but I wonder if it is because Ive always associated commercials with television viewing. One thing that gets bothersome with longer content is that Hulu plays the same commercial over and over again throughout the video rather than varying sponsors. Hopefully theyll work this minor kink out. If you have to sit through commercials, variation makes the experience much more tolerable.
Going back to the first type of ad, I wonder why I have such a hard time with them but not with the pre-loading ads on Cnet or Hulu? I think the difference is that if I click a link to an individual piece of content, like the video review on Cnet or the TV show on Hulu, Ive made a specific type of decision where my expectation for the content is higher. However, if I simply go to a website, even if I go there regularly, Im not certain that there will be any particular content Ill want to experience until Ive had a chance to scan through the page. Im pretty likely leave if nothing interests me, which is why encountering an advertisement before Ive even had the chance to scan for content of interest is frustrating. I hope this is an advertising practice that dies out quickly.
Social Media and the Collective Visual Memory, Part 3
At aTED talk back in 2007, architect Blaise Aguera y Arcas demonstrated a Seadragon zoomable UI-enabled interface called Photosynth. Photosynth creates incredibly detailed and spatial representations of places and objects by assembling the data from multiple images from social sources, like Flickr. The demo was incredible (I posted about it here).
Fast forward to this week at SIGGRAPH 2008: The Photosynth research team demoed an update to their technology, and its significantly better. See the video below:
Passwords on the way out?
Via Mitch, I saw this article in the New York Times about replacing passwords as a method for accessing private accounts online. Id be interested in this for sure, though it looks (at first glance) like the big limitation would be for those who want to access their online accounts from multiple machines. On the other hand, I often find myself considering that kind of accessibility a necessity, but then I realize that I almost never access my email or any other online account from any machine other than my own laptop, so a hardware-specific option wouldnt be that bad. In the meantime, Ill continue to maintain my file of 54 different 12-character passwords and try to update them every few months... sweet....
4nVs09QjxE5b anyone?
Interview: Tom Diederich, Cadence Design Systems
Tom Diederich
Social media/Web community Manager,
Cadence Design Systems
An experienced corporate communications professional, project manager, journalist, and teacher, Tom was drawn to online communities during the Internets early days. He began blogging in 1996 (though he called it his online journal) when working in Tokyo as a journalist to keep friends and family informed of his adventures there. Since then, Tom has worked to build online community at various companies including Intuit and Symantec, and now, Cadence.
CB: What fascinates you about the web?
TD: Its simplicity and complexity. Its evolution. I got “online” in 1995 and was blown away that first time at the monitor of my Mac when I logged in. All that information at your fingertips! I was working in Tokyo at the time and that first experience reminded me simultaneously of the movie “Blade Runner,” which was filmed there, and the novel “Neuromancer,” which was set in nearby Chiba City -- where I also lived a couple years earlier.
CB: What would you change about it?
TD: I’d make it easier to work with – the ability to create a rich, natural, interactive experience with an intuitive interface for both users and the builders of Web sites. Create what you want, how you want, and in your own style. No limitations. And to make it “aware,” that is, the site is able to learn, grow and evolve based on how it is used.
CB: Youve been blogging since before the term blog was coined. How has blogging changed since then and what makes it important to you?
TD: I started my “online journal” in 1996. (Here’s a link to that first entry – since moved over to another server). It was very much a blog, though I didn’t think to post comments from the friends and family who sent them to me via e-mail. Back then it was just the fastest and most cost-effective way for me to stay in touch with them from the other side of the world. Today blogs are more than a novelty. Anyone can start a blog, at no cost, and in just a few minutes with tools like Google’s “Blogger.” And they are interactive. A blog is a conversation.
I have two blogs today: one is a continuation of the “Diederich Journal” that began in the 90s; the other is a blog called “Conversations Matter,” a group of marketers, community managers, product managers and ordinary people who work in some capacity with social media.
How else have blogs have changed? They are becoming an important part of doing business – they enable smart companies to cut through the noise (jargon) of the formal marketing message and deliver, for example, a particular employee’s point of view in everyday English (or whatever language you speak). That’s powerful, as it adds a level of credibility. It also enables customers and potential customers to join the conversation and make up their own minds whether or not they should take that business seriously. But for me, the most important thing that blogging is changing is the freedom and voice it gives journalists. I’m a journalist by training and spent a decade as a reporter in the ‘90s. I’m old school in my belief that journalists should be objective – totally objective. “Just the facts, ma’am.” The reporter then presents the facts in a manner that enables the reader to make up his or her own mind. Fox News, more recently CNN -- and now a growing number of formerly respected news organizations – have agendas. Their reporters have agendas. Why? They are owned by mega-corporations and those execs dictate what is and what isn’t news. Nowadays you often get a one-sided (or slanted) perspective on very select topics. Blogging, when in the hands of the independent journalist, cuts through all of that crap. They get the facts and then present all sides of a story. Of course, they don’t always check facts as carefully as journalists did in the old days -- which is also very dangerous -- but in those cases the readers generally come in and, like the editors of old, make the corrections via comments.
CB: What technology has had the greatest impact on how you do your job?
TD: Like technology, my job has evolved over the years. I was a journalist; then a marketing writer; then an internal communications manager – and the leap to “social media” came naturally when I got my first experience working with a user community at Intuit. If I had to pick one, the technology that has had the greatest impact on how I do my job nowadays is associated with “online community” platforms, namely discussion forums and blogs. Companies specializing in enterprise community platforms include: Lithium, Telligent, Web Crossing, Jive, LiveWorld. There are many others. Getting the right platform is key to a successful community.
CB: Who has influenced or helped you the most in your career?
TD: Three people: The late Phil Porter, who was my first journalism instructor at Ohio State. Later that summer I was an intern at his newspaper, covering Ohio politics and general news. Phil taught me how to ask the right questions, organize my thoughts and then put together a decent news story from my notes. A fringe benefit was that I went from getting Cs to As in English courses immediately following his Journalism 101 class. Also, Michelle Glover, my boss at both SGI and Intuit. She taught me how to survive in the corporate jungle. And how to write (and think) from the corporate perspective. Finally, Scott Wilder, the guy who started Intuit’s first online community – and today manages several of the company’s customer communities.
CB: What makes you uniquely suited to your role at Cadence?
TD: I’d have to say my life experience (as corny as that sounds) and my experience building and managing a successful customer community at Symantec, the Symantec Technology Network. Plus all of the great stuff I learned from Intuit’s online communities.
CB: What makes Cadence a cut above its competitors?
TD: Our new website puts community front and center – right on the landing page of cadence.com. I don’t think there is another company in our industry (or many others) that does that.
[Editors Note: I was first introduced to Tom after he commented on my recent blog post reviewing the new Cadence website. ]
CB: If you had one sentence to pitch your latest and greatest idea, what would it be?
TD: Plastics.”
Just kidding! (OK, this will have to be when technology catches up with my brain): The creation of an online community platform that learns and evolves naturally based on user activity – like the human brain learns things such as how to play the piano.”
CB: I believe that everyone has a specific and unique talent that comes in handy at just the right time. It might be something most people know about you or something very few know. What is your super-power?
TD: This sounds like some new-age hooey, but it is “empathy.” I can tune-in to a person, or a group of people (even a huge group like an online community) and pick up on their vibe or “personality.” If I work at it, I can fit right in and do it very fast – in any situation or environment. That’s how I got along so well in the Peace Corps, and then working in Japan for seven years (I never did experience the culture shock that seemed to affect several of my fellow expats). This “super-power” works well in the trenches of Silicon Valley, too.
CB: If the worlds technological and economic systems were to collapse and revert society to locally-focused, agrarian communities, what role would you assume?
TD: I’d get an old-fashioned printing press and become a newspaper publisher and literacy advocate/teacher. When the light of the Roman Empire was extinguished and the Dark Ages reigned, the general population slowly lost the ability (and desire) to read and write. Just imagine if we had not lost the collective knowledge stored at the Library of Alexandria… Mankind stagnated for centuries during the Dark Ages and illiteracy was, in my opinion, one of the main reasons.
Browser of the Future?
Aurora (Part 1) from Adaptive Path on Vimeo.
Adaptive Path has designed a future browser concept named Aurora for Mozilla Labs Conceptual Browser Series. Four walk through videos featuring everyday scenarios show how Aurora would retrieve, display and contextually relate information.
While I like some of the elements presented in the concept such as natural interaction (a la iPhone) and contextual data relationships, I find the overall UI complex and non-intuitive. For example, the browsers data cloud spatial view is a mess; it reminds me of my cluttered dining room table (from which I can never find anything, even if Im staring right at it). Also, the over-reliance on icons without text identifiers will leave the user hunting and pecking for the correct action item.
What I found more far more intriguing (and executable) is the dummy NYT sports page used in the first video. It was designed by Andy Rutledge from Unit Interactive and contains some great UI concepts.
A fool with a plan can beat a genius with no plan.
I just read this quote in a short interview with T. Boone Pickens in the New York Times magazine. I think hes absolutely right!
Planning is critical to the success of just about anything worth doing (not to say that some people get lucky), which is why weve been slowly placing more and more emphasis on strategy here at Newfangled and in our blogging. Its not because its trendy, its because it just makes sense.
John McCain asks a question on LinkedIn
John McCain asks, What new ideas or technologies should we be investing in today? using LinkedIn. I think its pretty neat to see candidates using this technology in this way.
View from the Corner
Heres my view from the corner, taken just moments ago. See how excited Jason is (hes the third guy from the left)? He just put his first site live!
Eric, you can see where we moved you, too...
Everyday Design
There are many instances of design that are part of our everyday lives but dont wind up in Communication Arts or win Webbys. The Nutrition Facts label is a beautiful piece of information design that millions of people see every day but most dont give a second thought.
Prior to 1990, there were no standards for displaying nutrition information on food packaging. That year, Congress passed a law requiring the FDA to develop a new, universal label. It had to convey complex information in a manner that anyone could understand, it had to be devoid of any color or complex graphics to withstand poor quality printing and it had to be as small as possible to accommodate the demands of food manufacturers who did not want to relinquish valuable label real estate.