Skip navigation
Help

Web Usability

warning: Creating default object from empty value in /var/www/vhosts/sayforward.com/subdomains/recorder/httpdocs/modules/taxonomy/taxonomy.pages.inc on line 33.

Vexing Viewports

“The Web is Agreement.” Jeremy Keith’s eloquent statement neatly summarizes the balance that makes it possible for us to build amazing things. Each week, new devices appear with varying screen sizes, pixel densities, input types, and more. As developers and designers, we agree to use standards to mark up, style, and program what we create. Browser makers in turn agree to support those standards and set defaults appropriately, so we can hold up our end of the deal.

This agreement has never been more important.

That’s why it always hurts when a device or browser maker does something that goes against our agreement. Especially when they’re a very visible and trusted friend of the web—like Apple.

You see, Apple’s newest tablet, the iPad Mini, creates a vexing situation: Its device-width viewport tag defaults to the same values as Apple’s original iPad (768x1024 pixels), even though the Mini's screen is physically 40 percent smaller. That means every button, graphic, link, and line of text on a web page on the iPad Mini appears tiny—even when we try to do the right thing and build flexible, multi-device experiences.

Two iPads, one too small.

But Cupertino isn’t the only culprit out there. This is a problem that’s been brewing since we started using the viewport—and it has to do with not just pixels, but our own practices as well. Let’s take a step back and understand what’s really causing today’s woes—and what all of us need to do about it.

The trouble with pixels

Today’s viewport woes can be traced right back to pixels—yes, those tiny elements we work with every day.

The first pixel challenge is quantity. The more pixels in the display, the more information can be displayed. But as these are physical pixels whose number can’t be altered after the fact, a second factor comes into play: the screen’s physical size.

Imagine two two-inch-wide displays (about the width of the iPhone), as shown below.

Two devices, each with a two-inch-wide display. The one on the right, at 640x960, would pack four times as many pixels into the same space as the 320x480 screen on left.

The first is 320x480 pixels, the second 640x960. This gives the second display four times as many pixels as the first, but fits all of them into the same physical space. This smaller pixel size results in content that is also smaller—making it crisper, but much harder to read as well.

This is exactly what happened on the Nokia E60. In 2005, most mobile phone displays were about an inch and quarter wide, with an average of 176 pixels in that width. But the E60, which sported a “huge” 352x416-pixel display, crammed twice the number of pixels into a similar amount of space. The result: A gorgeous, crisp—but often hard-to-read—display.

The E60 also introduced a now-familiar problem: how users would manage to surf “big” sites on a tiny device. Nokia’s solution was a new browser, the Mini Map. This browser behaved similarly to today’s smartphone browsers by first rendering the full-sized page, then scaling it to fit the available screen size. Superimposed onto this rendering was a transparent red box that could be repositioned using the device’s joystick. Clicking the joystick would zoom the content indicated within the box.

Enter viewports

Mini Map was probably one of the first commercial uses of a dynamic viewport—a construct designed to dynamically change the size or scale of the visible screen area in order to improve the user experience. But it was far from the last.

In 2007, Apple released the iPhone, a much larger device than the E60, but one with a similar problem. Even on a “huge” two-inch display, surfing the “real web” on an iPhone meant loading large pages onto a small device. Apple chose to solve this problem through a series of carefully orchestrated enhancements.

The first was the creation of a virtual viewport similar to the one Nokia designed for Mini Map. When encountering desktop websites, the browser would render them at their full size (based on a default canvas width of 960 pixels). It would then scale them down to fit the two-inch display. Users could interact with the page to scroll and zoom in on areas of their choice.

Apple didn’t stop there. It also developed a new viewport meta tag. Sites not using the tag would be rendered using the default, legacy-web viewport of 980 pixels. But developers who opted to use the tag could declare the viewport for their sites, including setting the width to the all-important device-width value. This value tells the browser, “please pick a width that fits this specific device’s screen best.”

Other mobile browser vendors were quick to follow Apple’s lead. Nowadays just about every mobile browser supports the viewport meta tag, including the device-width value. This provides us with an even playing field: It respects the efforts of those who take the time to adapt sites for the multi-device web, while those who haven’t yet made this transition still receive a “good-enough” default experience.

Mini problems

The value device and browser vendors assign to device-width is directly related to that device’s physical dimensions. Physically smaller devices need a smaller device-width value (which will result in larger content). Set a value that’s too large, and most content will be too small to comfortably read.

And that’s why Apple’s iPad Mini has a vexing viewport. It uses the same 768-pixel device-width as the regular iPad, even though its physical size is much smaller. One would expect to see a device-width more in line with those of similarly sized tablets like the BlackBerry PlayBook or second-generation Samsung Galaxy 7″—around 500 to 600 pixels, as shown in this chart.

Because of this device-width, web pages appear 27 percent smaller on the iPad Mini than they do on the Google Nexus 7 (calculated based on the relative size of device pixels)—all because Apple decided to describe the device’s viewport as 768 pixels.

Solving for content size

One of the first places this causes problems is in text: More pixels in a smaller space means that fonts sized in pixels will look correspondingly dinky.

Of course, many of us aren’t sizing in pixels anymore—we’re using relative dimensional elements like ems, right? Only, that doesn’t quite solve the problem this time.

When we use ems, we imply a certain trust that the browser’s baseline font size at the default zoom level—1em or 100 percent in unit parlance—is sane and readable. But that’s not always the case. The browser’s baseline font-size value (1em) roughly equates to a 16-pixel square. This ratio serves as a ligament that binds absolute and relative units, but it can vary from browser to browser.

On the iPad Mini, font-size at baseline is precisely 16 pixels. That may have worked fine when fewer pixels were packed into our screens, but on a dense display with an improperly defined viewport, that’s going to be uncomfortably small.

Not all browsers toe the 1:16 em-to-pixel line, though. The Kindle Touch’s browser, for example, has a high-density viewport, but adapts by using a 1:20 ratio, kicking the default font size up a few pixels for readability.

This might not fix all of iPad Mini’s viewport problems, but at least the content would be legible.

Three seven-inch tablets. Note the difference in rendering.

So why did Apple do this?

To understand why Apple would release a product with such a vexing viewport, we don’t have to look further than our own habits.

In the wake of the iPad’s initial release, web folk worldwide scrambled to adapt sites to look good on the new tablets. Somewhere along the way many of us collectively settled upon pixel-based notions of tablet-ness, and those notions often resulted in fixed, 1024x768-pixel layouts precisely targeted at these devices.

Were Apple to decrease the device-width value for the iPad Mini on account of its smaller physical size, it would guarantee a second scramble as existing tablet-adapted sites assuming a 1024x768 viewport suddenly looked unexpectedly wretched on the new device.

The responsibility here goes two ways. Browser makers need to provide reliable baselines of viewport and text sizing, yes. But we as implementers also need to stop grasping for pixel-perfect control over our layouts (the “control” is an illusion, anyway).

A way forward

The only way for us to move forward is together. As developers and designers, we need to hold up our end of the bargain and be mindful of how we do our work—and that means letting go of the notion of pixel precision once and for all. We need to earn the trust of browser makers so they hear us out when things just frankly aren’t right. We hope this article illustrates we’re trying to do the right thing. We hope browser makers acknowledge that and follow suit.

Standards and consistency are more important now than ever before. Please let browser makers and device manufacturers, like Apple, know that we rely on consistent and reliable decisions about default viewports and their zooming. We’re willing to hold up our end of the agreement, and we need them with us.

Let’s move into the future—together.

RSS readers: Don't forget to join the discussion!

0
Your rating: None

  

Editor’s note: Welcome to a new column in the UX Design section on Smashing Magazine! Each month we’ll pick a handful of popular questions asked by our readers around good practices in designing smart and usable experiences. They will be answered by Christian Holst, a regular author here on Smashing and founder of Baymard Institute. Prior to co-founding Baymard Institute in 2009, he worked as a usability engineer in the hearing aid, credit card and consulting industries.

Adaptive Layout Vs. Responsive Layout

In which kinds of sites/projects is it better to use an adaptive layout (fixed break points)? In which kinds of sites is it better to use a responsive layout (fluid grids)?

A responsive layout[1] is in theory always better than an adaptive layout, but in some cases an adaptive layout is a more pragmatic solution.

An adaptive layout will give you more control over the design because you only have a handful of states to consider. In a responsive layout you easily have hundreds of states — sure, most of them with very minor differences, but they are different nonetheless — which makes it harder to know exactly how your design will look. This makes a responsive layout more difficult to test and predict with absolute certainty. That said, this is also the beauty of a responsive layout. By allowing some uncertainty on a superficial level, you gain certainty on more fundamental levels. Sure, you can’t predict with pixel-perfection how the design will work in a 943 × 684 pixel viewport, but you can rest assured that it works well — that the fundamental features and layout structures are meaningfully deployed.

An adaptive layout has its merits because it can be a more pragmatic solution that is cheaper to implement and easier to test. An adaptive layout can be considered the cheaper sibling of a responsive layout and can thus be appealing if resources are tight. This is especially true when dealing with an existing website, where a complete rewrite is not always feasible. In such cases, an adaptive layout can be a good (and more manageable) start. Dan Cederholm argues this case well in his article “Adapted”.


Image source: Trent Walton.

One argument often brought up in favor of an adaptive layout when compared to a responsive layout is that of typography — in particular better control over line lengths and avoiding orphaned header text. Trent Walton has jotted down some good thoughts on the matter. In essence, by changing font sizes (this is easy when using em), you can ensure readable line lengths (50-75 characters per line) in your responsive layout. This leaves the issue of potentially orphaning header text. While one may argue that this is the nature of the web, there are cases where seeking maximum control over a page headline makes sense. In these cases, using a plugin like FitText comes to our rescue, allowing us to avoid orphans.

[1] The definitions of responsive design and adaptive design are manyfold. Jeffrey Zeldman argues that restricting the term responsive design to a technological approach may prove too limiting and that the overall goal is device agnosticism, and we should thus include fixed breakpoint designs in our definition of responsive (web) design. Moreover, Aaron Gustafson defines adaptive design as “creating interfaces that adapt to the user’s capabilities (in terms of both form and function)” with responsive design as a subset meaning “fluid grids, fluid images/media & media queries.” In this answer I’ve intentionally limited the scope of discussion to layout, hence the use of responsive layout and adaptive layout. The definitions presented in the question are used throughout the answer, namely that responsive layout equals fluid grids, and adaptive layout equals fixed breakpoints.

User Interface (UI) Consistency Across Devices Vs. Device-Specific UI Conventions

In designing a product that will span various devices (i.e. Netflix or Pandora), what’s more important: consistency of the brand and UI, or designing to appropriately follow the guidelines of that specific device (i.e. designing a common experience on the iPhone, Android, television, Xbox)?

There are three important factors you need to consider: your focus (as a business), how familiar your users are with your UI, and how different your UI and functionality are on different platforms.

  1. Focus: There may be branding reasons to keep a consistent UI across your platforms, perhaps especially for lesser-known brands that are still fighting to establish an identity in the minds of their customers. However, users are typically more familiar with the device-specific UI conventions than those of a brand. Jakob Nielsen often states, “Users spend most of their time on other sites,” and while we’re not just talking about websites here, it is much the same principle (on a smartphone, simply replace “sites” with “apps”).
  2. Familiarity: Are most of your users spending hours a day using your service? Have they used it for a long time? Or are the majority of your users infrequent or newly acquired? Let’s say you have a business or productivity service and you know the majority of your users spend lots of time in it all year long. In this case, familiarity across the applications trumps device UI conventions, because the user has invested a significant amount of time learning your unique UI. On the other hand, if users haven’t spend that much time with your services and haven’t built strong cognitive and emotional ties to your designs and features, then device-specific UI conventions will generally result in better usability.
  3. Functionality: This has two aspects: a) Is your service only solving a single problem with a single feature, or is it more advanced? and b) Is there a difference in functionality and features across the various devices? If the features you offer on different platforms vary greatly, then adhere to device UI conventions, since cross-platform consistency will yield little benefit in terms of usability (using the same branding and general aesthetic design won’t help the user if the features are widely different — in fact, they could potentially cause harm as the user will think there’s overlap when in fact there isn’t). On the other hand, if you’re solving a single, simple problem, then diverging from device UI conventions is okay since users will very quickly learn your unique UI and you’ll potentially be able to solve the UI problems specific to your feature more readily than the generic device conventions afford.

In short: sticking to device-specific UI conventions where appropriate is a good, if slightly simplistic, rule of thumb.

Balancing Usability Research With Unique And Creative Concepts

How should I balance research, user feedback and usability testing with personal experience, instinct and trying to create a creative, unique, compelling experience? Basically, how much should users influence or guide the solution I am designing? It is “user” experience after all :)

The concept of your product, service, app or website is at the core of your user experience. It’s where you differentiate yourself from the competition and where you create true value to the customer. So develop your concept as creatively as possible and make it as original as possible. Then, when it comes to the real-life implementation, read up on user research, study UI conventions and perform usability testing as much as your concept allows.

Usability research and testing are what make your services easier and more seamless to use (which are truly important qualities in a competitive landscape), but they are not the reason people choose to use a service in the first place — they do that to solve a problem or fulfill a need. So first come up with that ingenious new concept, and then draw heavily on user research when implementing the service.

Usability tools are there to test and validate your designs, allowing you to continuously iterate your design based on user behavior and perceptions — an optimization process that should continue throughout the product’s life cycle.

Optimal Positioning Of Form Field Labels

What’s the best way to position form labels for an input field? Above the field, to the left, to the right? What about inline labels?

In short: for most input forms found on the web, such as contact forms, account creation and e-commerce, optimal form usability would be to place the label above the form field. Matteo Penzo’s eye tracking test on form label placement from 2006 confirms this.

On mobile devices the placing the label above the form field will ensure maximum width for the user input.
On mobile devices, placing the label above the form field will ensure maximum width for the user input. To the left you see Macy’s mobile checkout, where placing the label next to the form field results in a field so narrow the test subject couldn’t see the typo in his e-mail address. To the right you see an example of the recommended approach with the label above the form field.

Placing the label above the field is even more important if the form will also be accessed on mobile devices in portrait mode, due to the narrow screen. The user might otherwise have to deal with form fields that aren’t long enough to display the entire input, or end up doing a lot of sideways scrolling and panning between label and field. However, the exact opposite may be true of landscape mode, where the miniscule height of the viewport may be eaten up by the touch keyboard, potentially pushing the active field’s label out of sight.

An exception to placing the label above the field is for long forms that have very frequent and repeat usage, where the user needs to be able to quickly identify a few specific fields in a long list. In such cases, having the labels to the left of the form field makes it easier to scan. The same would go for a pre-filled form where the user needs to edit only a specific set of fields (e.g. when editing account profile information).

An example of inline labels, where the label acts as placeholder text in the form field.
An example of inline labels, where the label acts as placeholder text in the form field.

Inline labels, where the label is placed inside the form field as placeholder text, are horrible from a usability perspective. During our e-commerce checkout usability study, we saw numerous test subjects have serious issues with inline labels in Apple’s checkout process. While the approach makes for a simple visual appearance, the form is very difficult to interact with because each field loses its context the second the user starts typing. In the study, this not only made it more difficult for the subjects to fill out the form fields, it also made it very difficult for them to correct validation errors since the labels were missing.

Note that the importance of optimal positioning of the form field labels (and form field usability in general) are of course closely related to how many form fields the user has to fill in, and how often the user will need to complete the form. If it’s a single-field, single-use newsletter sign-up form, then choose whichever approach and design fits best with your overall layout. (Even inline labels would be acceptable in such a case.) But as soon as you have more than a handful of fields — e.g. a checkout process or a sign-up form that requires an address — I’d strongly recommend that you reduce friction as much as possible by following common form field usability guidelines, such as positioning the labels above the form field.

Any Questions?

If you have any questions that you would like me to tackle for a future Usability Q&A column here on Smashing Magazine, please ask them in the comments below!

(cp) (jc)

© Christian Holst for Smashing Magazine, 2012.

0
Your rating: None

  

When users land on your website, they typically read the content available. Then, the next thing that they will do is to try and familiarize themselves with your website. Most of the time this involves looking for navigation.

In this article, I’ll be analyzing the navigation elements of a particular category of websites, i.e. portfolios. Why portfolios, you ask? Because they represent an interesting blend of creativity and development techniques. As they offer an intriguing user interface and interaction, this often borderlines with what is ultimately defined as an enjoyable user experience. Should aesthetics, originality and creativity come at the expense of usability? Can they reside on the same website in harmony?

Portfolio Navigation Main Image

These themes will be explored through a brief analysis of eight portfolio websites, carefully selected by the Smashing Team and, well, scrutinized by me! My critique will encompass a blend of usability and user experience guidelines, as well as personal opinion based on my experience. Please feel free to provide your opinion in the comment section beneath this article. Also, kindly note that the websites are presented in no particular order.

Dawid Wadach

My first impression of Dawid Wadach’s website was “Whoa! Mine-sweeping! That’s surely not good usability!” For those of you who are not aware of the meaning of the term “mine-sweeping”, it refers to the the action of moving the mouse pointer over screen components (usually images) to reveal links. Although children like to mine-sweep in order to find links, both teenagers and adults hate it.

Dawid Wadach
The apparent absence of navigation is the first noticeable thing on wadach.com.

It was only after stopping to read what I was randomly and rapidly uncovering with my mouse that I actually noticed that the hidden parts contained the portfolio of websites designed by Wadach. At this point I sat back and started looking for the website’s navigation.

Dawid Wadach
Hovering over the white area uncovers some of the projects undertaken by Wadach.

To be fair with Dawid, the menu is indeed visible as it’s located in the form of a button right next to his logo. My criticism towards this implementation is that after hovering over this button, I expected it to automatically show all the menu options. This was particularly true because there was no visible change in the menu button, nor on my mouse pointer when I hovered over it. Indeed, you need to click on the menu button in order to be provided with the main navigational elements.

That, in my opinion, is not good practice, and I feel that the main menu could have very easily been rendered visible at all times without altering the visual element of the website. Indeed, that is what Dawid did, although he wrongly placed it in the website’s footer.

Dawid Wadach
The main navigation menu on Dawid Wadach’s website.

On a more positive note, with regards to the hover effects of the main menu, they are very clear. The font itself is large and contrasts very well with the semi-transparent black background. The website also includes utility navigation at the top left hand corner, which is a good location for such navigation. It also includes features to share the website via social networks and to remove the mine-sweeping effect at the bottom left and bottom right hand corners.

Ironically, the links to all these features contain a hover effect on mouse-over (unlike the main menu button), which is a good usability practice. Additionally, the designer opted to change the user interface of the browser’s scrolling. In general, this is not a good usability practice, as it makes it harder for the user to locate and use the scroll. However, in this case the change was only done for aesthetic purposes, and the scroll interface does look like and behave like users would expect it to.

Conclusion

In conclusion, I feel that from a design and development perspective, the website is very well implemented. It makes great use of HTML5, CSS3 and JavaScript to provide a smooth and pleasant user experience. It is minimalistic and clean, so the user is not overwhelmed with clutter. From a usability perspective, though, I think that slight improvements to the navigation—especially making the main navigation visible at all times—will result in greatly improving the overall user experience, without affecting the whole look of the website.

Harry Vorsteher

When you’re greeted by a Flash animation explaining to you how to use the navigation (before actually seeing the website itself), well, it’s not a good sign. I personally think that the majority of users would do the same as I have, and close this animation before trying to understand what was being explained.

Users have become accustomed to certain conventions and are never eager to divert from the way they expect things to look and behave. Therefore, introducing a new, complex navigation mechanism was not a very good choice from the website’s designers (from a usability point of view).

Harry Vorsteher
The website greets its visitors with an animation explaining how to operate the navigation.

Upon closing this animation, users are greeted with two groups of navigation links, presumably linking to photo galleries. The reason why they were grouped in this way is not apparent until one clicks and drags the big wheel that lies at the center of the page. Depending on whether you opt to turn it clockwise or counterclockwise, this will scroll the photos to the right, or to the left, respectively.

Harry Vorsteher
The wheel mechanism that needs to be mastered in order to navigate through the website.

Provided that you notice and understand how to work the wheel navigation—as well as clicking on any of the categories as a means to see the photos in thumbnail format—navigation is painful, but bearable. But the excruciating pain comes when you opt to click on any of the thumbnails to see the large version of the photos.

The website background changes from light grey to a darker shade of grey, the photo occupies a large portion of the screen, and the navigation disappears. The mouse cursor also changes to a “left arrow” when you are close to the left-hand side of the screen, a “right arrow” if you are at the right-hand side, and a cross with the words “close” if you are at the very center.

This will enable you to see the previous photo, go to the next photo or close the current photo respectively. Unfortunately for the user, there is too much movement with the mouse cursor changing shape, the photo moving along the y-axis (depending on the mouse location), and an irritating pre-loader for every mouse click.

Harry Vorsteher
Horizontal and vertical scrolling (without scroll bars) is essential for viewing each image.

Moreover, if the user opts to click on the full-screen option, this removes the browser’s chrome, and further complicates navigation. In my opinion, this website basically sums up why Flash has been branded as evil amongst all usability and user experience professionals.

Conclusion

To sum it up, the user interface and the photos present in this website are truly nice and inspiring, as is the capability of the Flash developer. The navigation itself is very interesting and complex to develop. Thus, from a design and development perspective, the website is truly one to admire. However, I personally think this website is a usability nightmare, and it will inevitably lead to user frustration.

Because of its flexibility, Flash allows room for abuse. Unfortunately, several designers are more concerned with showing off their expertise rather than focusing on the user.

I am not particularly fond of the choice of using Flash instead of JavaScript libraries to create the animations for the galleries. Without resorting to recommending a re-design of the entire website, I think that some quick fixes would be to create a conventional menu which could be visible on every page of the screen.

Also, the photos in the galleries themselves should be re-sized to occupy 100% of the screen size (vertically and horizontally), thus removing the need for the users to scroll in order to see the full image. Finally, the images should be of a lesser resolution so as to minimize their loading time (and quite possibly remove the need for a pre-loader to appear for such a lengthy time as each image loads).

Justin Lerner

I love Justin Lerner’s navigation (and yes, it just happens that he also has an awesome name as well!). Joking aside, I think this website proves that usability can indeed be aesthetically pleasing. The main menu is conveniently and prominently placed horizontally, just below the logo. This is the exact place where users are most likely to search for it. It contains just five items, each of which corresponds to the five sections of the website. The font is large and visible, and each menu item changes color on hover.

Justin Lerner
This website adopts a grid approach so as to facilitate navigation.

Interesting too is the fact that the content belonging to each category is rendered more visible on mouse-over whilst highlighting the menu item to which that category belongs. When clicking the menu item or section, it expands in order to show the full content of that section. This implementation enables all of the website to be visible on a single page without cluttering the user interface.

Justin Lerner
The selected section takes center stage by expanding over the inactive ones. It is also highlighted in the second menu at the top.

What I am not entirely convinced of with this website is the need for the duplicate menu that resides just above the main menu. From an aesthetic perspective, it is modern and blends in very well with the overall look and feel of the website. However, from a usability perspective, having two menus with the same content usually confuses users as they try to click on the same-named section in both menus to see if it’s loading any different content.

Still, in this particular case, the smaller menu is doubling up as a sort of breadcrumb in order to show users which section they are currently viewing. Yet again, breadcrumbs have their own, specific usability guidelines, and it is recommended that they are adhered to.

Justin Lerner
The secondary menu (brown) replicates the same items as the main menu (grey).

Conclusion

In general, I feel the designer here did a great job in blending great design practices and good coding techniques to provide an aesthetically pleasing (and generally usable) website. Slight modifications can be introduced to improve the usability without adversely affecting the design, such as removing the duplicate menu and replacing it with a breadcrumb trail (although I seriously doubt that a breadcrumb trail is needed).

Additionally, the website would be better off from a usability perspective if more white space is introduced and the typography is more contrasting, since one needs to hover over the content in order to distinguish it well from its background.

Shelton Fleming

My experience with the Shelton Fleming website was very particular as it started off on a bad note, but quickly transformed into a most enjoyable one as I browsed through it. What ticked me off initially was the first screen that greets you when visiting the website; this consists of a yellow box containing the word “Ideas” in grey, and a grey box placed next to it containing the word “Experience” in yellow.

Shelton Fleming
Visitors are greeted with a splash page-like screen that fails to explain the brand identity in an obvious way.

The apparent lack of navigational elements frustrated me because I mistook this page with a splash page (which is a big no-no in usability since users can’t stand them). It is only when revisiting this page (after spending some more time on the website) that I noticed that the conversion of ideas into experience is actually the company’s tag line. Viewed from this perspective, this makes sense from a user experience perspective, as it emphasizes the company’s branding.

Shelton Fleming
The website’s hierarchy and navigation is clearly indicated through imagery and normal conventions such as highlighting.

In fact, the concept of “Ideas” and “Experience” dictates the website navigation—each section resides at opposing ends of the screen along the horizontal plane. Hovering over each of the two sections reveals a vertical side menu with intuitively-named, visible menu items. Good usability practice is also implemented through the changing of the menu text on hover.

Also, the arrow that appears on hover is a good indication to the user that the content of each menu item will be displayed right next to it—something which actually happens when clicking on the menu items.

Shelton Fleming
Color is also effectively used to indicate hierarchy and navigation options.

Conclusion

Consistent and intuitive navigation, large sans-serif fonts contrasting sharply with their background, unobtrusive imagery, and ample use of white space makes navigating through this website an enjoyable experience. Still, I would recommend removing the splash page-like design that is set up to greet visitors. It offers very little information about how it should be interpreted. Moreover, there is a very strong branding element throughout the website—thus eliciting very little need to have a page at the beginning that risks irritating users.

Chris Wang

This website prominently revolves around the projects that Chris Wang has undertaken. In fact, the first thing that one sees is a list of project titles and accompanying icons that open up in an accordion style when clicked on (revealing a gallery of images related to the project in question).

Chris Wang
At first glance it’s not immediately evident that this is a list of projects undertaken.

The project titles have a sleek orange transition on mouse hover which indicates that they are clickable. One point of criticism would be that the list of projects is not immediately evident as to what they are—the word projects next to the first listed item is a grey barely lighter than the background.

Chris Wang
The accordion effect is coupled with a horizontal gallery of the project being viewed.

Additionally, the website offers a handy keyboard navigation mechanism that uses arrow keys to enable rapid (albeit sequential) browsing of the projects.

Chris Wang
A horizontal dark yellow fill is used to indicate what is clickable.

Conclusion

Overall, the navigation is quite intuitive. It is relatively easy to switch from one project to another, and to drill down to see more screenshots from the same projects. One aspect that can be improved is the ability to close a project after viewing it, since a project always needs to be open at any given point in time. Although this first project will be replaced by clicking on a new one, the project currently being viewed takes up precious real estate that would be better used by showing the list of projects.

Jessica Caldwell

This website makes extensive use of mine-sweeping for the purpose of navigating, effectively breaking all navigation usability conventions. In a desperate attempt to find information about the owner of the website, I scrolled below the fold and located the footer which contains a list of non-clickable items grouped under the titles “Agencies” and “Brands”. The only links in the footer are those for social media and portfolio websites of the website owner (all of which link to external websites).

Jessica Caldwell
Navigation in this website is only visible on mouse hover.

Defying the odds that a user would still attempt to browse the website at this point, I decided to mine-sweep each diamond present in the home page in order to locate basic information (such as a biography of the author and contact details). It is at this point that I noticed that the diamonds contain both items that would be classified as projects done by the author, as well as the website information that I was looking for. In a typical mine-sweeping implementation, there is no apparent hint as to which diamond holds which information.

Jessica Caldwell
One of the projects uncovered by hovering over the diamond shapes.

Clicking on any of the items in the diamonds results in the content being loaded inside all the other diamonds, with the navigation retaining its place on the same diamonds. From a visual perspective, the result is quite appealing. However, this does not improve the usability in any way.

Jessica Caldwell
Clicking on any of the navigation items opens content in the same diamonds used for navigating.

Conclusion

The website offers plenty of white space—something that generally is good for usability. Aesthetically, it’s also very pleasing. Thus, in my opinion to improve the usability, the main focus should be on improving the navigation by placing a conventional menu in the top part of the website (maybe repositioning the logo towards the top left-hand side) and placing a simple menu to its right.

The diamond design for displaying content can be retained, as I think it effectively contributes towards the identity of the author. Still, I would make it occupy less vertical space so that the footer (or at least the top part of it) is visible above the fold. In this way, users will notice that the website contains a footer.

Whether or not to include clickable links inside the footer is something that the author ultimately needs to decide—replicating the top navigation inside the footer is never a good idea. However, converting the items inside the footer into useful, deep links (perhaps to specific projects that highlight the capabilities of the author) will help.

McCormack & Morrison

I personally think that with this portfolio website, the design agency McCormack & Morrison have done an excellent job translating their slogan “Good Old Fashioned New Media” into a visual experience. Indeed, the website has a strong brand identity and an almost retro feel, with powerful, bold typography.

The only links in the home page are the logo and an “About Us” link, correctly located at the top left and top right hand corners, respectively. Although the “About Us” link is disguised as a speech bubble icon, it makes use of the title tag so that it displays the text “About McCormack & Morrison” on hover.

McCormack & Morrison
The company’s tag line is used to create a strong brand identity to greet its visitors.

Perhaps less optimally located (although at least above the fold) is the “Our Work” button at the bottom right hand corner. I say “perhaps” because I wouldn’t classify this placement as a usability failure, since some people will actually look just above the fold of the website in order to locate a footer. Also, the link is in the form of a button—which in itself encourages users to click on it. Missing this button would really be a pity, because this is when you would realize that the website is indeed a one page website—it scrolls vertically to reveal projects undertaken by the agency, and horizontally to see more screenshots of the same project.

McCormack & Morrison
The projects can be viewed either by using the arrow keys or the navigation at the bottom of the website.

When viewing these projects, the “our work” button is replaced by arrow buttons that facilitate the browsing of each project. Although it is not mentioned on the website (which is a pity, really), the fact is that you can easily navigate through the projects using the keyboards’ arrow keys. This enables a very pleasant, yet rapid navigation. Another usability plus is that the website effectively makes use of the screen’s full width.

McCormack & Morrison
The company devotes a lot of importance to branding—hence the reason why each project starts off with the client’s logo.

Conclusion

In my opinion, McCormack & Morrison got most of their usability right. What I would introduce would be the ability to navigate through the projects in a non-sequential manner. While this isn’t a major issue with this website (as it only has four projects), it would be very tedious to have to go through a number of projects in order to reach the one that is interesting to the user visiting the website. Another issue is that there is no hint as to what project will be viewed next without actually having to visit each and every project.

Moka

Argentinian design agency Moka is well aware that its website will attract potential South American, Spanish speaking clients. So instead of offering the standard language changing mechanisms, it makes use of its website visitors’ IP address in order to provide the site in English or Spanish—depending on their location. In fact, manually changing the “/?lang=en” parameter in the URL to “/?lang=es” will yield the Spanish version of their website—this is good usability.

Moka
With an apparent lack of visible navigation, this website had to include navigation instructions at the bottom left side.

However, I would still provide a mechanism for users to know that the website is being shown in this language specifically for them, and provide a facility to change it to select other languages. This is because the user may be visiting the website using a device that is not theirs. Additionally, they may feel more familiar with one of the other languages that the website offers.

Moka
Samples of each project are rendered using the full size of the screen.

Back to navigation. The first thing that you’re greeted with is an abstract design along with the Moka tag-line. Having the company’s tag-line and logo prominently displayed is always good usability practice, because it informs your visitors what website they are visiting. But there is no apparent menu on the website.

Navigation becomes visible in the form of arrows that appear at both ends of the abstract design when one hovers over it. Implementing the website’s navigation in the form of mine-sweeping is never a good usability practice. To give credit to Moka, they do include instructions on how to navigate their website at the bottom left hand corner of the screen.

However, due to the placement (as well as the low-contrast the text has with the background), this is not immediately visible. Then again, if navigation is intuitive, one would not need to provide such instructions.

Clicking the navigation arrows enables the user to browse in a sequential manner through a number of projects undertaken by the company. As previously mentioned, the problem with this type of navigation is that the user needs to go through projects in a sequential manner without getting a hint of what the next project will show.

Also, the project description is barely visible, as it is located at the bottom left-hand corner of the screen. If the user fails to see it, then they will not be able to understand what they are seeing.

Moka
On mouse-over, the logo doubles up to show the “About Us” and contact information.

Another usability problem I found is that the logo breaks the convention of being clickable in order to go back to the home page. Apart from the fact that this practice is almost standard today, the website doesn’t offer any other mechanism to go back to the home page other than having to go back sequentially using the arrows.

This is something that is most likely to cause user frustration. Hovering over the logo provides the “about us” and the company’s contact information—not a bad idea in order to keep a clean user interface. However, it is not intuitive enough, since users will normally hover over your logo in order to go back to the home page.

Conclusion

To end on a more positive note, the website is clean, minimalist, provides ample white space, and prominently shows the company’s portfolio—all of these will provide a positive user experience. Introducing the ability to select which projects to view (and to view them in a non-sequential manner) would by far improve the user experience. Additionally, sticking to conventions such as providing better mechanisms to go back to the home page, being able to view the information about the company, and how to get in touch with them, would also be beneficial.

Final Thoughts

Even through a brief analysis of these portfolios, it is evident that a website can be usable while at the same time having a pleasant user interface. While there is still room for even more interpretation, it’s clear that one needs to be very careful to keep in mind that a website has one focus: enabling its users to achieve their objectives—this is ultimately what usability is all about.

In the case of portfolio websites, the users’ objectives may include knowing more about the owner of the website, viewing the projects undertaken by that owner, or contacting the owner. The objective to identify (as well as develop and design) what needs to be achieved is a tough process—but also one that will inevitably lead to a healthy return on its investment.

(il) (jvb)

© Justin Mifsud for Smashing Magazine, 2012.

0
Your rating: None

When organizing content and actions on mobile, solid information architecture principles like clear labeling, balanced breadth and depth, and appropriate mental models remain important. But the organization of mobile web experiences must also align with how people use their mobile devices and why; emphasize content over navigation; provide relevant options for exploration and pivoting; maintain clarity and focus; and align with mobile behaviors. In this exclusive excerpt from his new book, Mobile First!, Luke Wroblewski explains how to do all that.

0
Your rating: None

By Steven Snell

The start of a new year is often a time of reflection on the past year, both personally and professionally, as well as a time to look forward to the year ahead. With that in mind, we thought it would be interesting to do a New Year’s group interview with a number of top designers and developers. We put together a big list of questions and posed two in particular to each of the participants.

We think you’ll enjoy the insight this panel provides into 2008 and 2009. There’s a wide variety of topics covered, including favorite resources, trend predictions, business lessons learned, upcoming events for 2009 and more. Let’s take a look at a large group interview with top web designers that takes a look back on 2008 and presents some predictions for the year 2009.

You may want to take a look at the other interview posts we’ve published earlier in our magazine:

  • 35 Designers × 5 Questions
    35 designers. 5 questions. 5 precise answers. Result: 175 professional suggestions, tips and ideas from some of the best web-developers all around the world.
  • 50 Designers × 6 Questions
    Even more insights from the best designers and web-developers across the globe.

Jonathan Snook

Jonathan Snook

Do you have any upcoming projects planned for 2009 that you’re particularly looking forward to?
I always look forward to conferences. It’s such a great way to hang out with talented, friendly people. SXSW is at the top of my list, even if I’m not speaking. With the folks from Sidebar Creative, we’ve got plans for more workshops, especially after the success of our first event, and we’re looking to roll out some new things next year. 2009 is shaping up to be a good year.

Do you have any thoughts or predictions about design trends that may become more popular or significant in 2009?
There’s been a maturation of design, with great usage of illustration and playing with the illusion of light. However, it’s been mostly decorative backgrounds and headers. There hasn’t been much push outside the generic two- or three-column layouts. Thankfully, we’ve seen a smattering of great art direction in 2008, and I look forward to seeing more of that in 2009. Jason Santa Maria’s, for example, is a site that I visit outside of my RSS reader every time because it’s unique. It captures my attention, and the content is well written and fantastically integrated.

Simon Collison of Erskine Design

Simon Collison

Are there any design trends or popular styles from 2008 that you like more than others?
I’m not a big believer in “trends” in Web design as such. For me, in Web design the patterns are rarely widespread enough to be what we could call “trends.” For example, it is easy to see pockets of ideas and copyists and approaches gaining momentum, but look somewhere else and the tide is flowing in another direction. Sure, crap stuff like Web 2.0-esque shiny buttons and reflections, or the great drop-shadow plague, or something good like “Wicked Worn,” they were real trends. What did 2008 give us that equals those?

There is one positive trend I like. More and more people are designing for the subject and audience, regardless of what is perceived as “trendy” — minimal, if minimal is required, or vibrant, if vibrant is required, etc. Now that is a trend I’d like to see spreading far and wide: relevance! I hated that world we lived in where, for example, regardless of audience, a Web app would always have the same visual bells and whistles. Crap. Oh, and as someone who always looks to try to take risks with a design, I’m pleased to see plenty of others still doing the same. More risk-taking in 2009, people!

Have you followed the work of any particular designers during the past year?
I pay attention to every single thing Mark Boulton puts out because he is consistently inventive, accurate and well-researched. His transparent redesign for Drupal has been a real eye-opener into his process, too.

I have followed Garrett Dimon’s blog because he has publicly documented the design and build of Sifter. Everyone can learn plenty from Garrett.

Obvious one, but Jason Santa Maria killed it in 2008, especially with the art direction approach to his blog redesign, a technique we use a lot at Erskine and hope to see more of next year. Jason is quietly brilliant, a humble genius.

And (cheeky this) our own incredibly talented superstar Greg Wood. He teaches me new ideas every day and is more talented than he realizes. I advise others to study his code, his ideas, his art direction.

Jason Santa Maria of Happy Cog Studios

Jason Santa Maria

What are some of your favorite or most frequently used fonts from 2008?
Soho and Soho Gothic from Monotype are just gorgeous and versatile families. And even though it’s becoming too much of a go-to, I use Gotham often when in a pinch for a simple sans serif.

What have been a few of your favorite sources of design inspiration, online or off, throughout the past year?
I’ve really gotten into FFFFOUND! this year. I subscribe to their update feed and love seeing all the random photos and bits of design that come down the tubes. Beyond that, getting away from my computer and taking photos always serves as a good source of inspiration for me.

Veerle Pieters

Veerle Pieters

What have been some of your favorite sources of design inspiration, online or off, during the past year?
When I look online, I mostly browse Flickr or FFFFOUND! or del.icious. One of the best offline inspirations is a book called Geometric, by Kapitza, which I recently bought. It really is a beautiful source of inspiration if you are looking for geometric patterns.

Do you have any design competitions planned for 2009 (like the “What is Graphic Design?” competition from 2008)?
Yes, I am planning on doing another one but haven’t decided on a date yet because it takes much planning up front. This one will be the only one that I will be doing because I believe in quality over quantity.

Darren Hoyt of Category 4

Darren Hoyt

Are there any design-related products, software or accessories on your wish list for 2009?
I’m looking forward to the release of ExpressionEngine 2.0. According to the previews, the way it handles themes should make production easier for us front-end designers. There’s also a pretty major control panel overhaul, which should make it an easier sell to novice clients.

I’m also excited about the official release of FontCase. Over the years, I’ve used some pretty hacky methods of organizing and labeling key fonts, but FontCase beta has solved a lot of those problems already.

What have been your favorite sources of design inspiration, online or off, during the past year?
Mainly books. The first was Michael Beirut’s 79 Short Essays on Design, which looks at design in the broadest sense, rather than getting specific about techniques or trends. I liked the big-picture perspective on how design impacts our lives in ways we don’t realize. The writing itself is really entertaining.

The second is Book One, by Chip Kidd, a huge anthology of his famous book covers. He has a way of marrying strange imagery and playing with your expectations, something commercial Web design doesn’t always allow for. Studying his work is great when you’re stumped for ideas.

David Airey

David Airey

Can you tell us something that you’d like to improve on as a designer in 2009?
I want to be more humble and to concentrate on my own faults rather than judging others. When you’re overly concerned about your view of colleagues and acquaintances, you lose focus and productivity. I’m far from perfect, so it’s important to look closer to home.

Are there any designers in particular who you’ve enjoyed following in 2008?
Eric Karjaluoto, through his blog, ideasonideas. Eric doesn’t publish blog articles very often, but when he does, they’re a sincere, insightful, personal look at the bigger picture, and I believe he’s a great asset to the design community.

Jacob Gube of Six Revisions

Jacob Gube

What frameworks were your favorite to use in your development during 2008?
My favorite JavaScript framework is MooTools with jQuery being a close second. The choice depends on who I’m working for, who I’m working with and what the requirements are.

Server-side, I’m a PHP guy and Zend is my favorite, but I want to mention that you can’t go wrong picking other top PHP frameworks out there, such as CakePHP and CodeIgniter.

For CSS frameworks, I believe in rolling your own framework if you really need to, because I find that the overhead in size and the usual cost of lower semantics in using CSS frameworks don’t justify the benefit, seeing as CSS (with the CSS2 specs at least) is a very simple markup language that really isn’t as verbose or complicated as client- or server-side scripting.

Do you have a favorite design- or development-related book from 2008?
This year, I read a lot of development books mostly to get familiar with emerging technologies like Flex 3 and AIR, as well as to upgrade my outdated ActionScript 2 knowledge to ActionScript 3. Learning Flex 3 is a superb primer.

For design, there is a lot of great content from independent bloggers (such as on the Usability Post blog) who produce great design- and UX-related articles, and unfortunately I didn’t find any ground-breaking books to read like Designing Web Usability (from 1999) and Don’t Make Me Think (from 2005). One book that I’d rank close to the caliber of the two previous books I mentioned is Web Form Design, by Luke Wroblewski, from Rosenfeld Media. Rosenfeld Media has some nice UX books in store for us next year, and I’m excited to get my hands on those. Additionally, I still think that for beginning developers who are getting into more intermediate-level, standards-based Web design, I would suggest CSS Mastery by Andy Budd and Designing with Web Standards by Jeffrey Zeldman.

Nick La of N. Design Studio, Web Designer Wall and Best Web Gallery

Nick La

Do you have any favorite designers whose work you enjoyed following in 2008?
I particularly like the tnvacation.com series of websites (fall, spring, summer, and winter) designed by designsensory.com.

What has been your favorite design trend or style from 2008?
My favorite design style is the collage and scrapbooking effect (see 2008 Design Trends at Web Designer Wall).

Chris Coyier of CSS-Tricks

Chris Coyier

What is your favorite CSS technique that you learned in 2008?
My favorite CSS technique from this past year isn’t a CSS technique alone, but rather learning how to control CSS through JavaScript, specifically jQuery. I already know CSS quite well, and since jQuery uses the same selectors as CSS, learning it wasn’t very difficult. Now I am able to integrate behaviors in websites in ways that were out of my grasp before. I can think “When I click this element, I want this other element’s CSS to change so that it is twice as big,” and I can make that happen quickly and easily. The power of that is incredible to me still.

Who are some of your favorite designers to follow on Twitter?
I love being able to follow all these incredible designers whose work I greatly admire: @jasonsantamaria, @mezzoblue, @collis, @vpieters, @snookca, @chrisspooner, @jessebc, @elliotjaystocks.

But even more, I like following my actual friends and people I enjoy conversing with. I am an equal opportunity follower. If you Tweet interesting things, I want to follow you!

Chris Spooner

Chris Spooner

Can you tell us a business lesson you learned from starting full-time freelancing in 2008?
One of the things that has surprised me the most is the obscure range of situations that project leads are generated from. When I look back at how my clients found me, I’m presented with a huge range of sources, which include the usual search engine phrases of “graphic designer + location,” but also some more generic and unusual terms that often bring up a related tutorial or article from my blog. Other sources of inquiry have been through seeing an example of my work on Web design galleries, discovering me through an online interview on another design blog and sometimes the subscribers of my blog themselves.

The lesson here is to consider every possibility of exposure and make the most of it. You never know what might come as a result of it.

Is there a particular product, software or accessory that is on your wish list for 2009?
I’d quite like to join the Apple fan club and swap all my computing kit for Mac products. An iMac, Macbook Pro and iPhone would look pretty nice sitting on my office desk! Unfortunately, I went and bought my Windows-specific Adobe software not so long ago, based on the idea that I already had a powerful computer setup. While Windows does the job without too many problems, I remember the overall niceness of OS X when I used to use an iMac at a previous job.

My girlfriend and I are looking to move home in the near future, so I think that would be the perfect opportunity to kit out a brand new office area with a shiny new kit, along with Adobe’s new CS4. I better get saving.

Alen Grakalic of CSS Globe and Templatica

Alen grakalic

What were a few of your favorite website designs from 2008?
There were many beautifully sites this year. Not actually sure if all were designed this year, but that’s when I first saw them. To name a few:

13 Creative

13 Creative

Ali Felski

Ali Felski

Viget Labs

Viget Labs

Clearspace

Clearspace

Carrot Creative

Carrot Creative

Alexandru Cohaniuc

Alex Cohaniuc

I loved this site Tomas Pojeta.

Tomas Pojeta

Another one of the sites I was absolutely amazed by was actually a Flash site: Level 2 Design.

Level 2 Design

Can you tell us something you learned during the past year that has helped you in running your business?
The one thing 2008 taught me was actually something I already knew but somehow keep forgetting: if you are a freelancer, never rely on a single source of income. No matter how cool the deal sounds, don’t work exclusively for anyone.

Randa Clay

Randa Clay

What were some of your favorite design trends or styles from the past year?
I love the vintage and retro look. The illustration style and color schemes are really appealing to me.

Do you have any new year’s resolutions for your business in 2009?
I’m not a big one on new year’s resolutions, but my continuing overriding goals are always to exceed client expectations, and to be one of the top developers of custom WordPress themes.

Jon Phillips of Spyre Studios, and founder of Freelance Folder

Jon Phillips

What are a few of your favorite tools or resources for freelancers that you used in 2008?
I used different tools in 2008 (and in previous years), but If I had to choose, I’d pick three: WordPress, because of its simplicity, ease of use, flexibility and great support from the community; Freshbooks Invoicing because they make it so damn easy to keep track of everything, and I also find the iPod Touch app to be very useful; and last but not least, I’d pick Adobe FireWorks, simply because most of what I do doesn’t always require that I open Photoshop. Of course, I used many more tools, but those are the ones I used almost every single day in 2008.

What has been your favorite music to listen to while designing during the past year?
Being a musician myself, I could say I’ve been listening to my band (and I have), but usually when I work on clients’ projects and designs I’ll listen to artists like Fiona Apple, John Mayer, Radiohead, Muse, Guthrie Govan, Tori Amos, and when I need something a bit “stronger,” I’ll listen to Slipknot, Tool, 36 Crazy Fists, Avenged Sevenfold, Meshuggah, Soilwork, etc. It really depends on my mood and what I’m currently working on. Let’s just say I like the sound of an acoustic guitar as much as distortion. :)

Jacob Cass of Just Creative Design

Jacob Cass

What was your favorite design course that you took in 2008?
I took eight design-related courses in 2008 while studying Visual Communication at Newcastle University, Australia. These were: Visual Communication Technology II, Animation and Multimedia, Advertising for Design, Graphic Design, Media Production, Visual Communication Imaging, Typography and New Media. My favorite and most hated course would have to be Typography. It was the most challenging and eye-opening course I have done on design, and since taking it I have realized that so much of design and communication is purely based on typography. I actually wish to do another course in advanced typography, however my uni does not offer it (yet).

What aspects of your work would you like to improve on in 2009?
Glad you asked me this. It may lead to some new year’s resolutions. I would like to learn more about complex illustration in Illustrator, and I also want to learn some new techniques in Photoshop. I am also trying to improve my typography and further my skills in logo design. But in saying all this, this does not mean I will not try to improve on any other aspect of design. As a designer, you have to continually improve and learn new things to keep up to date in the industry.

Brian Gardner of Revolution Two

Brian Gardner

Can you tell us something that you learned that helped you improve your business in 2008?
The one thing I learned this year is how powerful a community can be. In October, I decided to take Revolution and open-source it, and I was amazed at how many supportive users there were. More importantly, users have generously given their time on the support forum to help others. Building a product that people believe in can go a long way.

Are there any products, software apps or accessories on your wish list for 2009?
Truthfully, the only thing I want is a 3G iPhone, as my current one runs just fine, so need to go out and buy another one!

Elliot Jay Stocks

Elliott Jay Stocks

Can you share with us a business lesson you learned from going out on your own in 2008?
Great question! There are two main things: the first is that I massively underestimated the time it would take to do admin stuff when I first started out. I don’t have too much paperwork to do, but things like reshuffling the calendar to fit in projects, liaising with clients, keeping track of expenses, etc., all that stuff takes a lot of time, and I was totally unprepared for it to begin with.

The second thing is that you should only take on projects you care deeply about and that are going to keep you interested. I did a couple of projects in 2008 that I really didn’t enjoy by the time they came to a close, because I’d lost interest in them. And that only happened because, deep down, I was never really interested in them in the first place. Turning away work like that because of a personal point of view can be a financial risk, but it’s something I’ve started to do, because the only way I’m ever going to produce decent work is to have a passion for the projects I’m involved with.

Do you have any upcoming projects for 2009 that you’re especially looking forward to?
I have quite a few, actually! :) In January I’m going to take a break from client work and pick up recording of my new album (which I meant to do in December, before deadlines got shifted). So that’ll be great fun to do, and I’m really excited about releasing it. It’ll also be nice to have a complete break from designing and writing for a while so that I can come back refreshed.

The second thing is the next version of my personal website. I’ve been working on the redesign on and off for a few months now, but it hasn’t really gone anywhere. I’m hoping that I can dedicate a couple of weeks of solid work in early 2009 to get that nailed.

I’m also really looking forward to a huge number of speaking events and the traveling that goes with them. I’ve got lots lined up for next year, including a few I’ve yet to announce. In January, I’m going to announce a very big one that I’m doing later in the year! :)

Jay Hilgert of Bittbox

Jay Hilgert

What are a few of your favorite or most frequently used fonts of 2008?
Stainless, Dispatch, Myndraine, Kontrapunkt, Dirty Ames, Turbo Ripped, Immoral, Myriad Pro.

Are there any new graphic design techniques that you learned or developed in 2008 that stand out to you as being especially useful?
I’ve by no means mastered it yet, but I enjoyed learning about the gradient mesh tool technique in Illustrator. It immediately struck me as being useful in many ways, like for creating photo-realistic icons in 100% vector format, for example.

Fabio Sasso of Abduzeedo

Fabio Sasso

What have been some of your favorite products, software and accessories you have used in your work in the past year?
My new MacBook Pro and my iPhone 3G are definitely my favorite products. But in terms of software, I think the new Pixelmator was a great surprise.

What are your favorite design trends or styles from 2008?
For me, one of the coolest design trends in 2008 was mixing modern lighting effects with an ’80s style.

Noura Yehia of Noupe and DevSnippets

Noura Yehia

What were some of your favorite design-related online resources that you came across in 2008?
I read and skim a lot of design and graphics blogs, but there’s only one blog I read on an almost daily basis and that’s Smashing Magazine, which I do because I think every single post is a piece of work. Besides that, I also often check in to Web Designer Wall, NETTUTS, Six Revisions and DesignM.ag.

What has been your favorite online design community during 2008?
There are so many great design communities out there to keep any designer in a creative mood to work. I would definitely start with DeviantArt, having such a huge collection of well-crafted artwork all in one place. I also quite like checking Behance Network, Computerlove, Design Float and the Popular Bookmarks on Delicious, which send me to more places

Steve Smith of Ordered List

Steve Smith

What have been some of your favorite sources of design inspiration, online or off, throughout the past year?
Online, I find a lot of my design inspiration these days from screenshots posted to Flickr by my friends. Patrick Haney posted a set on Design Inspiration that’s a great look-through if you need a couple ideas for layout or colors.

Offline, I’m drawing a lot of inspiration from architecture. Architects have to think in multiple dimensions, something we Web designers don’t have to worry about. But I think the metaphor is valid, in that we need to think not just of the design aesthetics, but of the dimensions of usability, and accessibility as well. The website needs to look good from every angle.

Are there any current design trends that you would like to go away in 2009?
I’d have to say that one of the things I think is becoming a little cliché is the hand-written note, or the post-it note, or the paper-clipped scrap-paper effect. Don’t get me wrong, I’m sure this effect has its place. I think it just happens a lot more than it needs to these days. That said, a website should meet the needs of the project, not be designed to current fads in a vacuum.

Related articles

You may want to take a look at the other interview posts we’ve published earlier in our magazine:

  • 35 Designers × 5 Questions
    35 designers. 5 questions. 5 precise answers. Result: 175 professional suggestions, tips and ideas from some of the best web-developers all around the world.
  • 50 Designers × 6 Questions
    Even more insights from the best designers and web-developers across the globe.

About the author

Steven Snell is a Web designer and freelance blogger who can be found on his own blogs: Vandelay Website Design and DesignM.ag.

(al)

0
Your rating: None