Designing in the browser isn’t really a new concept, just a relatively unused one. It’s been championed by a few prolific personalities in the web design community, but we at Worthwhile haven’t had the opportunity to give it a try until just recently when designing for a mobile-optimized site we’re working on. If you aren’t [...]]]>

Designing in the browser isn’t really a new concept, just a relatively unused one. It’s been championed by a few prolific personalities in the web design community, but we at Worthwhile haven’t had the opportunity to give it a try until just recently when designing for a mobile-optimized site we’re working on. If you aren’t familiar with the concept, this is a good place to start.

So why would you as a designer want to design in a browser instead of Photoshop? Well other than that fact that it means you don’t have to suffer through using Photoshop anymore, we have three big take aways from our first foray:

Prototyping

To be fair, Photoshop wasn’t meant as a web design tool. It’s a photo editor, and that really shows when trying to get the UI to do what you want. Not only can you make faster changes while in a browser, but you can test out ideas and iterate much more easily. You can also design real interactions in a browser and see how they feel instead of just how they look, something that isn’t possible in a static tool like Photoshop.

Exact Results

Designing in Photoshop is great, but due to rendering differences across browsers, and things you just can’t do easily in Photoshop, your live site will often differ slightly from what you see in your .psds. Designing in the browser means what you see is what you get. This also comes in handy when presenting to clients, in that what you present to them will be exactly what they see when the final site is delivered. They can interact with a site when you present it, other than just having to stare at static images and try to imagine how it will feel to use.

Shortened Handoff

In the more traditional process, designers create comps (usually in Photoshop) and then hand off to developers for coding (or do it themselves). Because you can iterate your design easily and figure out what works well while you’re coding in the browser, once you’ve arrived at your solution, you’ve also finished coding it! Designing in the browser saved us a ton of time on the project as a whole. By eliminating handoff time, we cut hours, stayed under budget, and left more time for fine-tuning at the end.

Conclusion

The one requirement to designing in the browser is that you as a designer also need to know how to front-end code if you’re going to be efficient. If you have that skill set, I highly recommend giving it a try. Designing in the browser is where dreams are made of. There’s nothing you can’t do.

Next up for us? Applying this process to a larger web project and seeing how it affects our work flow.

Have you tried designing in the browser before? What are the pros/cons that you see?

We’re stoked to release a project next week that’s been in the works for awhile now. Sadly, I’m not at liberty to disclose any further information at this time. All I can say is that it’s going to be good.]]>

We’re stoked to release a project next week that’s been in the works for awhile now. Sadly, I’m not at liberty to disclose any further information at this time. All I can say is that it’s going to be good.

Using photography on your website can be a great way to connect with your users on an emotional level and help communicate your message quickly. Unfortunately, it’s often misused and abused. How can we avoid such misuse-age and abuse-age? Follow these three checks to help improve the way you use (or don’t) photography on the [...]]]>

Using photography on your website can be a great way to connect with your users on an emotional level and help communicate your message quickly. Unfortunately, it’s often misused and abused. How can we avoid such misuse-age and abuse-age? Follow these three checks to help improve the way you use (or don’t) photography on the web and you’ll be well on your way.

Is it required?

Chris’ post this week about making sure your goals are set before you design your site was a good one, and it applies to every page of your site. Too often we use photography as a last ditch effort to “make the page pop” more or to “add some color” when often we’re just throwing useless content on the page that competes with the real goals. You’ve all seen the blog posts where it’s obvious they did a quick Google Image search for a photo to include seconds before hitting “Publish”. This reminds me of a great quote from the designer of Google Analytics and one of the great minds behind TypeKit:

“When you’re just using design to decorate instead of communicate you’ve gone too far.“
- Jeffrey Veen

Jeff reminds us that using photos just to decorate a webpage is often a hindrance to the communication of your message. Nielsen’s recent study also shows that these photos are ignored by users. Stop spending time searching for an unneeded photo and spend it on making your content easier to comprehend!

Is it real?

Photos are great, but user’s can tell when they’re fake. While stock photography may be tempting, especially on a tight budget, Nielsen’s study shows you’re usually wasting your money as stock photos also are largely ignored by users.

Using stock photography forces you to settle for photos that are just “good enough” instead of ones optimal for your site’s layout, goals, message. Trust me, I’ve spent many an hour looking for suitable ones and have had to settle for using ones that “just work.”

When using photography featuring your actual staff, clients, or products, the time spent on a page by a user is longer in duration (see Nielsen’s example about staff bio photos), often meaning a greater chance of connecting with your user and leading to a conversion.

Is it relevant?

Photography needs to enhance the content on your webpage. If your website were an auction listing for a pair of football tickets, you could easily justify in your mind about how a photo of a football makes sense to include on the page. Unfortunately, even if that’s the most unique, well composed, and well edited football photo, it probably does nothing to add value your listing (assuming your description is good). How much more useful would it be to include a a seating chart of stadium, so I know where I’ll be sitting if I were to buy your tickets?

A simple example, but i think it illustrates the point well. Just because it’s a good photo doesn’t mean it’s good for your website.

Conclusion

Selecting photography for your website takes effort and discernment. But it’s important to remember that photography is content, just like text. Both need to be carefully crafted for your websites’ goals, messages, and users. If you think photos are required, make sure they’re relevant too. Invest in a photographer that leaves you with real photos your users pay attention to.

If you couldn’t tell from our last two posts, we just launched the Tech After 5 iPhone app last week. This was my first time designing for iPhone so I wanted to make sure I was well equipped before diving in. In the process we came across some great resources, so I thought I’d share [...]]]>

If you couldn’t tell from our last two posts, we just launched the Tech After 5 iPhone app last week. This was my first time designing for iPhone so I wanted to make sure I was well equipped before diving in. In the process we came across some great resources, so I thought I’d share them for those of you thinking of diving in to app development on iPhone. Here’s what our toolbox ended up looking like:

Apple’s Human Interface Guidelines
The best documentation for any mobile device out there. They’re strict for a reason: to produce apps with a consistent level of quality and interaction. Don’t even think about designing (or developing) for iPhone until you’ve read them.

Tapworthy: Designing Great iPhone Apps
This actually went to print after we were well into the project, but I heard Josh talk at SXSW a few months before, and it was an overview of a lot of what went into his book. Consider this another prerequisite to iPhone app development.

iPhone Stencil Kit
Incredibly handy while wireframing out your app. This iPhone stencil includes most of the important standard UI elements, allowing you cleanly sketch out screens with a high level of speed, quality and consistency. You can even download template iPhone PDFs to sketch on. Stencils for iPad, Android and websites are available too.

iPhone 4 GUI PSD
I can’t even estimate how much time this great PSD from the guys at Teehan+lax saved us. It’s insanely thorough but also neatly organized. If you find it useful, consider giving them a donation.

Review
Testing your UIs on an actual iPhone is essential. Apple provides an iPhone simulator with their SDK, but you can’t truly get a sense of how it will feel unless you test it on an actual device. Review makes this incredibly simple through magical wireless transfers of your comps over to your iPhone’s screen straight from Photoshop or via drag and drop.

Have any other resources to share? If so, let us know!

The term “fold” was originally used in the print industry, specifically applied to newspapers. The fold is used to describe the area of content on the front page that’s visible before needing to unfold the paper to read the rest of the article. So, editors always placed their most marketable content above the fold to [...]]]>

The term “fold” was originally used in the print industry, specifically applied to newspapers. The fold is used to describe the area of content on the front page that’s visible before needing to unfold the paper to read the rest of the article. So, editors always placed their most marketable content above the fold to capture the attention of those walking by news stands.

Somehow this term has made a migration to the vernacular of the web. Marketers and consultants started pushing it, and as a result many clients think that if their content is going to be seen, it needs to be shown in the ~600 pixel high area that most common screen resolutions can see before users have to scroll. This has resulted in a lot of cluttered websites with ruined designs and terrible information hierarchy. Let’s tackle a few misconceptions about the fold so we can prevent such travesty from happening to you!

Myth 1: “Users don’t know how to scroll!”

A very interesting statement considering you most likely had to scroll to read this paragraph. It was the content that shaped your interaction with the page! In a study on user scrolling, ClickTale found that 91% of the page views were long enough to contain scroll-bar. Of those, 76% were scrolled to some extent. As it turns out, scrolling is not a secret ability only gifted to a select few, users know how to scroll and they are doing it with reckless abandon!

Myth 2: “If it’s not above the 600px mark, they won’t see it.”

In today’s web, the fold is so varying that even if you plan your content to fit inside a certain pixel height, monitors and devices used to access the web range from small resolutions on phones to large resolutions on many of today’s laptops and widescreen displays. In the ClickTale study, a 600px fold was useful for less than 10% of the cases.

Myth 3: “The more content above the fold the better!”

I won’t preach on the value of whitespace today, but the more content you try to shove into a small amount of space, the less clear, and understandable it’s usually going to be. CX Partners did a great eye tracking study showing that less content above the fold actually encourages users to scroll the rest of your page.

Takeaways

1) Be more concerned about the quality of your content than where it’s positioned. Layout is definitely important, and your main call to action should usually be prominent to the user, but you don’t have to shove every piece of content on your homepage into a certain area for users to read it, in fact, they’re more likely to skip it entirely if you do so.

2) Use that content to guide your users down the page. Here’s an example of how, while also further enforcing the point that scrolling is not the next mutation of the black plague. Even though it’s simpler than your website might be, you can still use the same techniques to encourage users to channel their inner Christopher Columbus and explore your content.

3) There are good things we can take away from “the fold.” The top of the page is still the most effective place for content. Make sure on an initial visit it’s clear what your message is and what the user needs to do next. Just like newspaper headlines, if your main content isn’t carefully crafted, it’s unlikely they’ll “buy the paper” and explore the rest of your site.

Here are some resources I used in writing on the fold and some other helpful links if you’re interested in reading more on the topic. If you have anything to add feel free to comment!

Unfolding the Fold
ClickTale Scrolling Research Report V2.0 Part 1
How to Discuss “the Fold” with a Client
The Myth of the Page Fold: Evidence from User Testing

Do you feel like you’re always a step behind everyone else in your industry? Does your project never turn out quite as well as you envisioned? Are you embarrassed to show off the work you have finished? Increase your quality of work by: Evaluating Your Purpose Why are you taking on this project in the [...]]]>

Do you feel like you’re always a step behind everyone else in your industry? Does your project never turn out quite as well as you envisioned? Are you embarrassed to show off the work you have finished? Increase your quality of work by:

Evaluating Your Purpose
Why are you taking on this project in the first place? Is it because they’re willing to pay a lot of money? Maybe because you think it’ll make a good portfolio piece? Oh, I get it, you want to win awards and be recognized, so because it’s a high profile client, you can’t turn it down. Sorry, but if these are the reasons driving your client selection, it will rarely, if ever, result in good work.

We design to communicate & make lives better. The focus isn’t on us, it’s about our client’s message and making that clear to the user. If you can’t get excited about their message, you’re going to have a hard time translating that into your process once you dig in to the project.

Using the Best Tool Available
We have egos. We like our processes and the tools we use to do our work. I fear we get hung up on these and close ourselves off to better possible alternatives. It all comes down using the right tool for the job. That’s all our processes & the software we use are. Tools to communicate. Sometimes that means changing your process to accommodate for unique project requirements, using a service that’s paid instead of free and using software that isn’t open source. It may even mean using Flash (gasp!). Don’t get hung up on the tool. Find the tool that allows you to communicate best and use it.

Executing Your Ideas
Here’s the hardest part. It separates good from great. The ability to take your purpose, the tools you’ve selected, and actually get the job done well. We’ve all been there. We have an awesome/creative idea and start working on it, but it just doesn’t come out of the oven like we envisioned. Identify why you aren’t able to execute and take the necessary steps to fix the problem. Is it a lack of productivity? There are plenty of tools available. Do you spend too much time discovering how to do something and end up with little time for actual development? Maybe you need to outsource skills you aren’t good at. Other solutions might include a shake up of your process, improving communication between team members, or even hiring/ firing someone.

What’s keeping you from doing good work? Is it a wrong focus? Do good work and bigger clients, larger budgets, and recognition will follow. Are you using the wrong tools? Open up yourself to alternatives and you’ll find better, more efficient ways of working. Are you having problems executing ideas? Identify the source and find out how to fix it. Remove the obstacles from seeing your ideas realized.

There’s a lot of talk going around about CSS3/HTML5, progressive enhancement, etc, but not until now have we had a well structured book to help prepare us web developers for the changes that are coming behind the scenes of tomorrow’s websites. Dan Cedarholm, a well known web designer & speaker on all things CSS3, follows [...]]]>

There’s a lot of talk going around about CSS3/HTML5, progressive enhancement, etc, but not until now have we had a well structured book to help prepare us web developers for the changes that are coming behind the scenes of tomorrow’s websites.

Dan Cedarholm, a well known web designer & speaker on all things CSS3, follows up his Bulletproof Web Design book with another great guide for those looking to build for the future.

What I like about Dan’s book is that it doesn’t cover just the visual improvements that CSS3 will make much easier to implement (though his sections on RGBa, font replacement, and web typography are great), it also documents structural and layout elements that can increase consistent user experiences. Fluid grid layouts, modular float management and more will help designers & developers create more flexible websites. The book grants you access to download example files used throughout the book and are a big help when developing your own projects. Dan uses everyday language and an easy to follow structure to help keep it from sounding like a technical manual. While the book isn’t hard to read, the real benefit comes from working with the template and seeing just what’s possible for your projects.

Why it’s worth the read: Great writing, great content & easy to follow tutorials will help you be more forward-thinking in what’s possible on the web today. Learn how to make development easier for everyone touching the project, and how you can promote the value of it to your clients.

Recommended For: Web Designers & Developers, Project Managers
Price: $26.39 from Amazon

The terms progressive enhancement and graceful degradation have been floating around the web for a little over a year now. They refer to the way advancing technologies like HTML5 and CSS3 are used to serve up the best possible product to web browsers that support them while still giving those that don’t (see: Internet Explorer) [...]]]>

The terms progressive enhancement and graceful degradation have been floating around the web for a little over a year now. They refer to the way advancing technologies like HTML5 and CSS3 are used to serve up the best possible product to web browsers that support them while still giving those that don’t (see: Internet Explorer) a usable solution.

We’ve been weaving CSS3 into our sites for a few months now, but it really came in handy when I wanted to continue Cornerstone’s brand throughout some of the web elements in their new design.

Cornerstone had just approved this new logo identity before coming to us for their needs on the web:

The lighter green section has rounded corners on the top right and bottom left that I wanted to repeat throughout the site. Though some may not even notice, this gives their new design a little extra punch to help it stand out from the generic templates plaguing so much of the web today.

Before CSS3 web developers achieved rounded corners using images. It’s not a bad solution, just not the best. Images cause an increase in page load time and since we’ve added them to multiple parts of the site it would be a pain to swap out these images in the future if we needed to.

Enter border-radius:

With CSS3 compatible browsers like Safari and Firefox gaining market share we made the call to use these new technologies to give Cornerstone’s users the best possible experience while also decreasing our development time. Thanks to the border-radius property and the convenience of being able to apply it to specific corners of an element we could easily achieve the desired effect on multiple areas of the site:

When users with browsers who’ve not yet adopted CSS3 view the site they may miss out on the added detail, but they still get the same functionality as everyone else, and that’s what matters:

Conclusion? If you’re a web developer, consider using CSS3 for some of your upcoming projects. It’s an easy way to enhance the appearance and usability of your site while avoiding a lot of development time spent on optimizing for older browsers. Of course, implementation depends on who your users are, but even then it’s still extremely useful for quick prototyping. Also, try to go beyond using techniques like border-radius solely for buttons or borders. Find ways to deliberately enhance your design using these exciting new features.

I can’t remember where I first heard of Do You Matter?, but it doesn’t change the fact that it’s one of the greatest design/business books I’ve had the opportunity to read. From the title, one might guess the book is going to hold a lot of design propaganda. Even though I myself am a designer, [...]]]>

I can’t remember where I first heard of Do You Matter?, but it doesn’t change the fact that it’s one of the greatest design/business books I’ve had the opportunity to read.

From the title, one might guess the book is going to hold a lot of design propaganda. Even though I myself am a designer, admittedly this was a cautionary concern going into the book. However, Robert Brunner (who hired Apple’s Jonathan Ive and shaped their industrial design language) and Stewart Emery (Success Built to Last) do an amazing job of delivering solid business advice that manages to avoid sounding one-sided. Sure they’re both pushing design, but they also explain how every other side of business helps reinforce how your clients think of you. Going beyond the actual design of a product, they explain the extra steps needed to help make your customers not only buy from you, but love you (and there should be a big difference, even in your mind).

The title alone is thought provoking. Financial success isn’t equated to relevance in the business world, it’s how people think about your company (see: your brand). While that may sound simple to you, Do You Matter? has no shortage of  examples of big-time industry leaders making poor design decisions, directly leading to business failure.

How did Samsung go from being regarded as the low-end maker of cheap electronics to highest rated in their industry? How did the RAZR bring Motorola success and then nose-dive off the charts? More importantly, how does your company go from just another business to one that truly matters? Do You Matter? provides great answers to these questions and also some deeper design theology that will re-shape how you think about design.

Although the authors back up what they say with great examples from the likes of Starbucks, Dell and Jones Soda, I would have liked to see how design has made smaller companies go from good to great. Even if those may be harder to come by, more variety among the bigger corporations used would have been useful too. Don’t get me wrong, there are dozens of design success stories to be had from Apple, but it almost felt like Do You Matter? relied too heavily on their success through design when I know there are other companies they could have drawn from to support their claims.

Why it’s worth the read: If you’ve never thought of design being the catalyst driving your company’s relevance, Do You Matter? will open your eyes. If you already have, you’ll reinforce and even grow your understanding of design with solid reminders that you’ll want to go back and refresh yourself with again and again.

Recommended For: Anyone
Price: $16.49 from Amazon

When you hear the words “brand” or “branding” what do you think of? Most would relate it to a company’s logo, their colors, or their packaging design. While a logo and solid packaging design certainly aid in establishing a connection with your market, your brand goes far beyond that. I know I used Publix as [...]]]>

When you hear the words “brand” or “branding” what do you think of? Most would relate it to a company’s logo, their colors, or their packaging design. While a logo and solid packaging design certainly aid in establishing a connection with your market, your brand goes far beyond that.

I know I used Publix as an example in my last blog post, but they highlight this well:

Shopping at Publix is an experience. Publix isn’t trying to be the cheapest place to purchase groceries. They seem to have an honest desire for quality (both in food and service) that’s reflected in the packaging of their own store brand products.

Sure, I could buy a dozen eggs for less elsewhere, but at what other grocery store do they open the carton at check-out and send an employee to fetch a replacement when they discover a cracked egg I had forgotten to check for?

When does a shelf stocker stop from his current task to ask if I need assistance when he notices I’m inquisitively scanning aisles for an item I can’t find?

When a company realizes that a great experience equals a great brand.

So Publix holds their customer service as a vital piece of their brand. Does that mean good customer service is their brand. No. Ultimately the Publix brand is what I and many others think it is. You can have a great logo, a great mission statement, and a great product, but that alone will never give you a great brand. Your brand is what others think it is! Publix has developed expectations in their customer’s hearts before they even get to the grocery store. I know I’m going to get good service when purchasing any food, interacting with any cashier, shopping on any day. That translates into a positive brand experience. Their design merely supports and affirms that.

In “Do You Matter? How Great Design Will Make People Love Your Company”, Robert Brunner and Stewart Emery put it like this:

“Character is built on ethics, on behavior, how people treat others, and how they treat you, and that’s how you build an idea of who they are. It’s the same thing with a brand.”

We arrive at a conclusion of a company’s character (or brand) just like we would with an actual person. Sure, I know Publix has set out to maintain a certain quality of service, but I actually see it when I’m there, I feel it where I’m there. Not in their packaging design (though I think it’s great), but in the experience I enjoy when shopping. Anyone can say they value service, but it’s another thing to back it up, and Publix does it well.

I think this is why sites like Craigslist succeed. Their site design isn’t anything spectacular (though I’ve helped fix that using this), but I have good expectations when using it, knowing that I’ll probably find what I’m looking for at a great price and that if I need to list something it’s really easy to do while reaching a wide audience.
Think about quality brands you frequently invest in and why you do. Though their logo may be the first thing that comes to mind, your experience with them is what really drives your loyalty. Now turn the tables on yourself. Are you providing quality experiences for your customers? What do they say your brand is?