Marker Design

Mobile Design Projects

Lesley — Wed, 30 Jun 2010 00:12:06 +0000

With the improvement of smart phones, especially the iPhone and iPad, task-oriented services are booming. We’ve done several great web apps that are not reflected in the portfolio due to the simplicity of design and nondisclosure agreements, but I wanted to note a few mobile projects that have come our way recently. While not enough to warrant a new portfolio section, they’re worth highlighting in the hope that we can do more in the future!

eReader App
A recent exciting opportunity was to update the user interface for the ebook 7 Habits of Highly Successful People. The revised reader app is meant to be used as the base of future titles. It hasn’t been fully implemented at this time, but it’s an improvement over the previous version. Developed for Mobifusion. See the current app in the iTunes store.

Wiley Retail Screens
We designed screens to be inserted into various Wiley mobile apps that allow each of the titles to link to a multi-retailer screen for purchase. Developed for Wiley Publishing.

CATGuru App
We redesigned and refined the information architecture of this mobile app. Designed for smaller handsets, CATguru prepares students for the Common Admission Test (CAT), a test conducted by the Indian Institutes of Management (IIMs). Developed for Mobifusion and Pearson Education.

Have an online or mobile app we can help with? Contact us!

Basic Principles of Web Design

Lesley — Mon, 07 Jun 2010 17:01:25 +0000

Give your site some love!
Your website is one of the key places to connect to you user, so it’s important to do what you can to capture, and keep, their attention. Below are some basic ideas that can help do that. Like putting together a puzzle, all the pieces need to fit together just right to make it work.

Most of these examples are homepages, often the starting point for most users, and the best place to establish a positive connection and sense of branding to your user.

Clear Messaging

Short and clear brand messaging, right up front. What does the company do? Why should someone look around more? Say it in one short sentence. Direct copy that incorporates words for SEO will increase the odds that the site will show up in search results.

Box.net conveys what it does in two short lines. I love the friendly illustration that reinforces the core business concept.

Visual Hierarchy

Make the prioritization clear on the page. Lead your visitors to core concepts and calls-to-action with contrast in color and copy size and a good use of whitespace.

37 Signals starts with their overall company statement in front and their core brands secondary, but clearly high in priority.

Concentrate Calls-to-Action

What is the single most important click you want your user to make? The 2nd most? Highlight calls to action in order of importance. Too many similarly weighted links all over the page causes unecessary hunting for important content. Help your users out and they’ll stay longer.

Keeping the page simple, typekit directs you to the main areas that they want you to head over to… ‘try it for free’. I wonder if they’ll change their button to red.

Grouping Content

Grouping similar content makes for faster page comprehension. And remember white space is good. Use it to focus attention in certain areas and add visual breathing space on the page.

If you can get past the amazing photography, natgeo does a great job of grouping it’s content simply but effectively. The yellow blocks by the headlines makes for an easily scannable page.

Clear Navigation

A few navigational items with short, clear names are more useful than long and hard to understand ones. Make sure the wording is clear to the user, not ambiguous industry terms or phrasing that is cute but unclear. Anticipate content your users may expect to see.

Rosettta Stone based their navigation on how their product is to used. Using clear words, the user can tell where to go based on their usage of the product and it allows Rosetta Stone to target messaging to that user type.

Simplicity

Make sure everything on the page, including all copy, has a purpose. Pages with excessive copy or distracting design elements are not helpful to the user. Like watching a typical hollywood movie, nothing happens without a reason, make it so.

Papernstitch simply states what they do at the top, clear navigation to reinforce the concept and get user to areas they are looking for. The rest of the page simply displays great products, which is what the site is about.

Tara Parker-Pope Site Launch

Lesley — Fri, 07 May 2010 14:32:06 +0000

We were fortunate enough to help out on the launch of Tara Parker-Pope’s redesign. Since she was starting with a prebuilt theme, we only helped with the design of the header banner, art direction to tweak theme colors/fonts and photo research. We love her Well articles on the NYTimes and was a pleasure to help bring her ‘brand’ on the web.

Another great project with Annik at Title TK Projects and Hugh Hunter.

Usability Findings

Lesley — Mon, 22 Feb 2010 16:35:39 +0000

While not new, this post from Smashing Magazine on 10 Useful Usability Findings and Guidelines is worthy of noting and keeping around as it is a round-up of specific issues and the of the results of the studies done on them.

INTERESTING POINTS

Users Scroll
The debate as to whether users scroll or not was one that came up often a year or two ago, so it’s great to see a study that says they do indeed scroll. Of course keeping key content ‘above the fold’ is still important, but all is not lost if it does fall below.

Blue is the best color for links
Good to know, but I’ll admit as a designer, a tough one to cater to at all times. It makes sense on sites like google and yahoo to have standard color links when you hope to have the world’s population clicking on them. But, if you have a specific look or branding that needs to be iterated on a site, it’s not going to be appropriate at all times. As long as a link is clearly delineated in some way, whether it be a much different color or underlining, it will still be usable. When appropriate, I try stick to blue.

Effective user testing doesn’t have to be extensive
That it doesn’t take many people to find the holes is helpful to know. I try to pay attention to the little voice in my head that might say ‘is this too ___’. Those nagging thoughts are usually right, but when working with large groups, there may be many people with valuable input and they don’t always agree. So it is extremely helpful to know that testing to a very small group is valuable and therefore, in many cases, actually doable.

Text is Interface

Lesley — Mon, 22 Feb 2010 16:35:31 +0000

As web sites become more streamlined, copy becomes even more critical. Leading the user through the site is accomplished not only through design but also, and possibly more importantly (did I say that), through words. The tricky part is to keep the text concise and, as I know from working on this redesign, it is tempting to say too much. There can be the feeling that there is always more information to convey. But, for a website there should be small bits of information that are easily scanned, then the decision can be made as where to go from there. I believe that people read online, but they mostly want to read articles of personal interest.

As a designer, I don’t claim to be a copywriter, but it has helped in mockups to throw suggestive copy, for content and length, rather than lorum ipsum. Often, since I am coming in fresh to the brand, I can provide insight on what someone new (ok, i’m not always the target audience I realize, but i can pretend) is going to be looking for or what would make sense to them.

Here are a few articles that better articulate these ideas (written by real writers).

Web Design from Scratch: Writing for the Web
A List Apart: Learn to Write
Provenance Unkown: Principles of Good Copywriting

3, 2, 1…Launch!

Lesley — Fri, 12 Feb 2010 16:35:47 +0000

Announcing the redesign and launch of Marker Design!

It was time for a long overdue site and brand update after working with the last logo for almost 10 years and the site not quite that long, thankfully.

This time around we went with a wordpress site for faster updates and blog integration. It’s based off the theme simplified2 from Themeforest. And, we are using Museo Sans as an embedded font.

A special thanks to Ben at DevPatch who helped wrangle this theme to our liking.

Next up…tackle the business cards!