The Details in Web Design

I’ve been doing a lot of reading in the area of web design and development lately and one theme has been popping up more and more: a good designer pays attention to details. Throughout the ages graphic design as a whole has been extremely focused on details. An artist working on something as simple as a printed panel would need to make sure everything was absolutely perfect because once the project goes to press, there’s no turning back… well… at least not without having to pay an arm and a leg for it.

Yet, it seems that the attention to detail that was so faceted with traditional graphic design somehow disappeared, or became overlooked with the birth of web design. Now granted, when people first started designing for the web the options were extremely limited, but with today’s limitless capabilities using things like CSS, JavaScript, and Flash, pretty much any detail you could imagine can be brought to life.

So what is it that makes the web less detail oriented? Are the designers less skilled? Being one, I should hope not. I believe that it is a mentality that so many of us fall into just by interacting with the web on a daily basis. We’re so used to instant gratification and everything being done at the speed of a mouse click that it almost feels like the processes used to make those things should be just as fast. Clearly no one should be able to design a site in mere seconds, but many times I even find myself thinking “well I can just launch it and include it later” yet more times than not, it’s never revisited. Web design is such a fast paced industry that there is almost an urgency to get things done in record time, but when things are rushed there is no time for the details.

Something as simple as a tooltip on rollover, or slight color adjustment on a section of a graphic to make text more readable can greatly increase the effectiveness of a design. It’s easy to be passive with the web, especially when clients continually ask for design aesthetics that you may not agree with, so here’s a list of tips that I’ve found to be incredibly helpful:

  • After your first run though a design, expect there to be changes. Send your design not only to your colleagues but people who don’t work within the industry and ask for their gut-reaction. An interesting take on this is the “5 second test”. You have someone look at your design for 5 seconds and ask what they remember. If they say the things that the site is meant to broadcast, you’re on the right track. Also by having people who aren’t designers give their opinions, you’re going to hear a lot of things that you wouldn’t even think about. Designers typically have a much higher tolerance for things that are maybe too abstract for the average viewer.
  • Collaborate with your colleagues. Before sending a design off for client review take the time to have an in-depth discussion with your colleagues or anyone else involved with the project on your end. Go over each element with a comb and discuss how things might be altered to provide better branding, present more clear-cut content, and reach your client’s goals.
  • After collecting these suggestions, read over your specs again. This keeps the mission of the site fresh in your mind as you’re taking a new look at the design, encouraging you to think beyond just your notes about what to change, and more so why to change.
  • When making small changes, call someone over and have them watch you change it on the fly. Ask them if one change is more effective or useful than the other. If working in Photoshop, maybe save a copy and lay the designs side-by-side. If working in Dreamweaver, duplicate your CSS file and make changes to each separately. Oftentimes it’s easier to pick something out when there’s a comparison.

Bottom line: the web has infinite potential for truly great and effective designs. Constantly updated tools and capabilities leave the mind to wander through endless possibilities, it’s just a matter of setting aside the time to really focus in on the little things. If asked, would you be able to give a reason for each detail in your design? If not, you might want to look at it a little bit harder.

Adobe Labs and New Betas

Adobe Labs

Adobe Labs provides you with the opportunity to experience and evaluate new and emerging innovations, technologies, and products from Adobe.

Labs fosters a collaborative software development process. This allows customers to become productive with new products and technologies faster and the Adobe development teams to respond and react to early feedback in order to shape the software in a way that meets the needs and expectations of the community.

At Adobe Labs, you’ll have access to resources such as:

  • Prerelease software and technologies.
  • Code samples and best practices to help accelerate your learning curve.
  • Early versions of product and technical documentation.
  • Forums, wiki-based content and other collaborative resources to help you interact with like-minded developers and Adobe.

If you are forward-thinking and enjoy the challenge of working with the most current technology and products—despite a few rough edges—we are looking forward to working with you in Adobe Labs!

New Betas

Adobe® Dreamweaver® beta

(May 27) New features help teams and individual developers alike reach the next level in performance and functionality.

Adobe Fireworks® beta

(May 27) Create, edit, and optimize web graphics more accurately and faster than ever with the enhanced toolset.

Adobe Soundbooth® beta

(May 27) New tools for video editors, designers, and others who need to accomplish their everyday audio work.

Adobe GoLive Goes Dead

Just incase you may have missed it…

Adobe has announced that it will discontinue its one-time flagship website creation tool, Adobe GoLive. The rumor mill has long held that Dreamweaver, a web development tool that came into the Adobe fold following the 2005 acquisition of Macromedia, would one day replace GoLive and now it seems that the day has finally arrived.

Although GoLive is still for sale on the Adobe site, Devin Fernandez, GoLive’s product manager, tells Macworld that the company believes Dreamweaver is a better fit for today’s web developer.

Adobe has been touting Dreamweaver over GoLive for some time, complete with a “switcher” website dedicated to convincing GoLive users that Dreamweaver was better suited to their needs.

The demise of GoLive shouldn’t come as too great of a surprise considering that the switcher site itself reads: “before purchasing Adobe GoLive 9 software, consider Adobe Dreamweaver CS3, the market-leading tool to design, develop, and maintain websites and web applications.” That’s not exactly the kind of faith in GoLive that inspires purchasing confidence.

If you’ve got a brand new shiny copy of GoLive 9, fear not, Adobe plans to support GoLive users with online tutorials and help, as well as assistance for those that want to migrate to Dreamweaver. There will also be special $200 upgrade price for GoLive users who want to make the leap to Dreamweaver.

GoLive isn’t the first app to bite the dust as a result of the MAcromedia acquisition, previously Adobe retired Macromedia’s Freehand app in favor of Adobe’s homegrown Illustrator CS3.

For more information, go to…

Adobe’s Open Screen Project

The Open Screen Project is dedicated to driving consistent rich Internet experiences across televisions, personal computers, mobile devices, and consumer electronics. The Open Screen Project is supported by technology leaders, including Adobe, ARM, Chunghwa Telecom, Cisco, Intel, LG Electronics Inc., Marvell, Motorola, Nokia, NTT DoCoMo, Qualcomm, Samsung Electronics Co., Sony Ericsson, Toshiba and Verizon Wireless, and leading content providers, including BBC, MTV Networks, and NBC Universal, who want to deliver rich Web and video experiences, live and on-demand across a variety of devices.

The Open Screen Project is working to enable a consistent runtime environment – taking advantage of Adobe® Flash® Player and, in the future, Adobe AIR™ — that will remove barriers for developers and designers as they publish content and applications across desktops and consumer devices, including phones, mobile internet devices (MIDs), and set top boxes. The Open Screen Project will address potential technology fragmentation by allowing the runtime technology to be updated seamlessly over the air on mobile devices. The consistent runtime environment will provide optimal performance across a variety of operating systems and devices, and ultimately provide the best experience to consumers.

Specifically, this work will include:

  • Removing restrictions on use of the SWF and FLV/F4V specifications
  • Publishing the device porting layer APIs for Adobe Flash Player
  • Publishing the Adobe Flash® Cast™ protocol and the AMF protocol for robust data services
  • Removing licensing fees – making next major releases of Adobe Flash Player and Adobe AIR for devices free

For more information, go to…