Skip navigation
Help

Web Design

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

  

For years you have been searching for it. You hear the question being asked in your dreams as you go on an Indiana-Jones-type-crusade to find the answer. When the answer comes to you, you know that the confetti will fall from the ceiling and the band will start playing your favorite song. You might even get a kiss from that special someone. So what is this question?

What is the secret to Web design?

A tough question and one that might not have an answer. In 2006, Oliver Reichenstein wrote Web Design is 95% Typography. Some people loved it, others were not so amused. If Web design was based that much on typography, then what was the point of learning anything else? All you needed to do is understand the elements of typography and you were good to go.

Of course typography doesn’t mean font selection. With the advent of @font-face and services such as Typekit, Webtype, Fontdeck, and Google Web fonts, your skills in typography won’t improve. You can easily create wonderful designs with one font for the rest of your life if you choose to—they had to do it centuries ago and they didn’t have Photoshop sticking things to guides for them. If anything, more font selection will make things worse for you because creativity and beauty become hard to achieves when more options are given to us.

More toys means more fun though, right? If you want to go that route, then by all means go for it. I love to look at the different fonts being used and admire anyone that can successfully pull off using newer fonts for the Web. However, I’ve seen too many times what can happen when development options are given to the masses, and it isn’t pretty (re: Myspace). Instead of having a user agreement it would be cool if Typekit made you read a book on typography before you could begin using a font—the Web would improve tenfold, if that was the case.

I’m not being sarcastic, saying that is all you need to know for a majority of websites. Try going through all of the Web designs that you love, strip out the images and ask yourself “how would that website look with just text and spacing?”. When designers say “text is the interface”, they really do mean it. The iA site is a great example of that.

Information Architects
Information Architects is based around strong typography.

One of my all time favorite designs is A Working Library. The site is a showcase of text being the interface. The spacing is just right and the typography is on point.

A Working Library
A Working Library by Mandy Brown.

Some people find design like this to be dull and boring, they feel that design should have more pop to it. At the end of the day some extra visual flair might be what separates your design from the rest, but you need to get the first 95% down. The website that you are reading this article on now has done a wonderful job of presenting a visual design that isn’t reliant on images to be beautiful.

Well That Isn’t Hard

It’s possible to create a wonderful design without the use of images at all. I know that sounds crazy, but it is possible. I’m not saying it should be done, but if we can create elegance simply with typography and white space, then why shouldn’t we be able to create greatness when we start throwing in images, videos and other effects?

With the use of images I’m not talking about images that are needed to represent something such as icons, but images that are there for flare. Sometimes a picture is worth at least ten better words than any word you could use, so it’s better to go with an image (but you still need to consider using white space with it).

Here are two more examples of beautiful websites that place a heavy emphasis on typography to control the design. The first is Blake Allen Design and the second is The Harriet Series (both use images to represent their typography, but you get the point).

Blake Allen Design
Blake Allen Design uses images, but with great typography.

The Harriet Series
The Harriet Series by OkayType.

What makes the two designs above so interesting to me is that the typography not only guides you along a journey, but it does so with personality. You almost feel as if the typography is an expression of the person that designed it. Blake Allen uses Helvetica which gives the website a Swiss, clean and structured personality. On the opposite side of the spectrum, the Harriet Series website is a bit more playful and experimental—there is beauty in the organized chaos that the typography creates.

For 99% of the designs out there, typography and white space are going to be your underlying foundation. So if you can’t get them right, then the rest of your design has nothing to stand on. Stop worrying about the pop of your design and first worry about how it will stand tall. Once you get that down then you can begin to dress it up.

Clear is a very simple to do list application for iOS devices. While the majority of the excitement around it are the gestures used to control the interface, you will notice that the typography does enough to get out of the way and allow you to enjoy the application. Sure it is nothing more than Helvetica, but what if it was Comic Sans and had bad spacing all around? Great typography doesn’t have to stand out in a good way, but that doesn’t mean it should do enough harm when it stands out in a negative way, either.

Typography In Other Disciplines

Art of the Menu
Art of the Menu is a great website on menu design.

The Art of the Menu does a great job of showing the importance of typography in menu design. While a lot of restaurants like to add images and illustrations to their menus to give them a bit more pizzaz, they fail in providing a decent typographical structure that allows you to easily browse through the menu.

If you are a designer you have no excuse to say you can’t come up with a decent design. When you create a design that lacks a strong foundation, anything else you add to it is just going to make it worse. Too many designers attempt to save their designs with fluff without understanding they are pouring gasoline onto the fire. If a design is not enjoyable to read then it is not an enjoyable experience, no matter how many images, colors or sounds you decide to add to it.

Looking to understand typography a little bit better? Not too long ago Smashing Magazine did a comprehensive overview of some wonderful typography tools and resources.

(jvb)

© Paul Scrivens 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

  

As a Japanese person living in Europe, I’m sometimes asked: “Japanese is a difficult language, isn’t it?” Those asking are often surprised when my answer is a simple: “No, actually, it’s not.”

While it is true (at least to many Westerners) that Japanese is an exotic language, when compared to learning other European languages, it may seem harder because it has has no relation to their own language. But from my own experiences of learning English and German (and also from seeing some European friends learning Japanese), I can say with confidence that learning spoken Japanese is, in fact, not so difficult. The grammar is in many ways simpler than most European languages. Take for example the fact that we don’t have cases, grammatical genders, nor articles. However, reading and writing in Japanese is… well, not so simple.

While discussing typography we most often focus on English language problems, which is only natural considering that the majority of design material is written in English. However, a lot can be gleamed by looking at how other languages are used as part of communication and design — it helps to lend context and a different point of view.

Japanese Scripts

Modern Japanese is written in a mixture of three basic scripts: Kanji — which are Chinese ideographic symbols — as well as Hiragana and Katakana — two phonetic alphabets (syllables). There are a few thousand Kanji characters, while Hiragana and Katakana have 46 each. Although there is a basic rule for when to use which script, there are many exceptions, and what’s worse is that words written in Kanji have often multiple pronunciations, depending on the context or conjunction. This is hard enough for native speaker to get right every time, so I almost feel sorry for those non-natives who are learning to read and write Japanese.

Kanji, Hiragana and Katakana Japanese scripts
From top to bottom: Kanji is mainly used for the lexical elements: nouns, verb stems, adjective stems, and so forth; Hiragana has rounded letter shapes, which are mainly used for the grammatical elements of sentences such as particles, auxiliary verbs, and suffixes of nouns; Katakana has an angular letter shape, which is most often used for foreign words and also for the purpose of emphasis.

Some say that the “tragedy” started when Japan decided to “import” the Chinese writing system, inscribing it into their own language in the 3rd century.

Since Japanese is as different from Chinese as it is to any other language, simply using the Chinese writing system was not sufficient, and a more appropriate way of writing Japanese was sought out. Some Chinese characters began to be used not for their meaning, but purely for their phonetic value. So by the 9th century, Hiragana and Katakana scripts were derived from simplified Chinese characters that were used to write Japanese phonetically.

The story doesn’t end there. As if using three scripts isn’t enough, we write in both horizontal and vertical orientation.

Horizontal? Vertical? The Unique Case Of Japanese Typography

“Vertical or horizontal?” — when setting a piece of text in Japanese, this is a question that Japanese designers constantly need to ask themselves. Being able to use both vertical and horizontal writing orientations is something so normal for us native Japanese speakers that most of us won’t even stop to wonder why this is possible, or even when and how it was first introduced.

The identical piece of text set vertically (right) and horizontally (left).
The identical piece of text set vertically (right) and horizontally (left). When it is set vertically it’s read from top to bottom, as the lines go from right to left; when it is set horizontally, it is read from left to right, like in European languages.

In general, these two writing orientations have a clear usage: vertical for something “Japanese”, “traditional”, “novels and other humanistic writings”; horizontal for “contemporary”, “business documents”, “scientific & foreign language related writings” and so on. When a main text is set horizontally, the binding is on the left-hand side, and pages progress to the right, like books in Latin scripts. Traditional books in vertical setting are the other way around, with the binding at the right hand side, and pages progressing to the left. So when you handle a Japanese book, don’t confuse the front with the back!

A typical page layout of a Japanese paperback novel
A typical page layout of a Japanese paperback novel using a vertical setting. Ogai Mori (1913), “Abe Ichizoku”, Shincyo-bunko.

traditional calligraphy is always done vertically
With its organic flow, characters are often connected and have different heights and widths
Needless to say, traditional calligraphy is always done vertically. With their organic flow, characters are often connected and have different heights and widths — which makes it impossible to disconnect and align them horizontally. Calligraphy by Keiko Shimoda, 2011 (tsukushidesign.com)


Horizontal setting is preferred for scientific texts, mathematical texts and language related books, where words and phrases in foreign scripts and signs are often included, as they are more easily incorporated horizontally. The example (above) is a Japanese-English dictionary. (Pocket Comprehensive English-Japanese / Japanese-English Dictionary, 2000, Obunsha)

Where the efficient use of space is important — namely newspapers and magazines — both orientations are often combined. Although it may appear a bit chaotic, or even random to foreign eyes, these two directions are usually used in a systematic way as a means to indicate different text elements on a page. For instance, a main text is often set in a vertical setting, but headings and captions may be set in a horizontal setting.

A typical newspaper layout
A typical newspaper layout — the main text is vertical but headings, diagrams, tables, and captions are placed horizontally.

The same newspaper as above, but highlighting the vertical text (orange) and the horizontal text
The same newspaper as above, but highlighting the vertical text (orange) and the horizontal text (blue). © The Nikkei (May 8th, 2009)

In a way, it’s comparable to “typographic variants” which are found in Latin typography — in Latin script text one may use bold, italic, or a different font to differentiate things such as pull quotes from the main text, whereas in Japanese we can do this by using a different orientation. Publications which accommodate non-linear or complex text (as opposed to linear text, such as novels) seem to benefit in particular from having these two orientations, which allow the layout to be highly flexible, and also to create strong visual impact.

The extreme cases of “space-efficiency-oriented typography” are informational-heavy pieces of text, such as diagrams and signage — also exploiting the two directional orientations. The Tokyo Metro map (Fig 10) is a good example of this — as you can see, both orientations are used accordingly, so that everything fits best within the limited space.

Tokyo Metro Map.
Tokyo Metro map

Tokyo Metro map with more typography in differing directions.
Tokyo Metro route map. The large type on the top is the station name which is placed horizontally. The name of the metroline may be horizontal, but the name of the stops are placed vertically.

It’s true that in many cases they look quite chaotic and sometimes even aesthetically questionable to eyes that are used to “orderly” design. But it’s easy to appreciate the visual impact and energy they create — they remind you that effective, appealing informational design does not always have to look “neat and tidy”.

Letters from my friends
Letters from my friends: when it comes to handwriting, orientation is up to a personal preference or simply one’s “mood”. But when you are writing a more official letter, or writing to somebody who is much older than you, it’s probably safer to opt for vertical orientation.

What’s Happening On Screen-Based Media?

Since the introduction of horizontal writing in the Japanese language, print-based media and signage have been employing both of these writing orientations effectively, and in ways that complement one another. But what’s been happening to screen-based media? With a few exceptions — such as word-processing machines made exclusively for the Japanese text output, or subtitles for film and TV screens, which tend to use either depending on the background image — horizontal orientation has been the dominant choice.

The prime example of this is the Web: horizontal orientation has been used almost exclusively. For the past 15 years, I have hardly come across a website that uses vertical setting. Mobile phone screens also use a horizontal orientation. I believe this may be due to the relations of hardware, operating systems and user interfaces that have become the norm, all of which have been designed to work with horizontal writing. It feels somewhat awkward to see vertical writing while all the other elements on the screen, such as the menu bar and UI elements, are horizontal.

Needless to say, the technical limitations (the support of a vertical setting by browsers is a fairly recent introduction) have largely contributed to this too. Perhaps underestimated, maybe the biggest factor for not using vertical setting for screen-based media could well be the mental association with horizontal orientation being used for something “modern” and “contemporary”.

The Nihon Keizai Newspaper website.
The Nihon Keizai Newspaper website. Although the printed newspaper employs a vertical setting for the body texts, the web-version uses a horizontal setting.

A Japanese Tea Ceremony website
So far, even with content as Japanese as a tea ceremony, a website will use a horizontal setting. (Accessed Jan. 20th, 2012)

Will Vertical Writing Orientation Die Out?

Will vertical writing orientation die out from screen-based media? Or can it make a comeback, when the technological environment allows us to use vertical settings more easily? Many e-book apps on smart phones and tablets have already started using vertical settings. With its intuitive way of navigating the screen along with the lack of external input devices (and apps being able to have more flexible/responsive layout), vertical writing seems to be incorporated much more comfortably.

I’ve spent some time reading these e-books — and pleasantly surprised at how easy they are to read. Apart from the fact that you need to scroll the screen horizontally, it’s just as comfortable as reading “normal” or horizontally set text. In fact, it’s even better for some types of publications like novels, or Manga. Our association towards this type of content when compared to the vertical setting is pretty strong mdash; it would somehow feel “wrong” to see them set horizontally.

Amazon’s Kindle has yet to support the Japanese language, but apparently they’re on their way to doing so. If they seriously want to attract Japanese readers, it would be unthinkable for them not to support vertical setting.

Soseki Natsume's “Sanshiro”
Soseki Natsume’s “Sanshiro” (1908) e-book on iPhone.

Kotobuki Shiriagari's
Kotobuki Shiriagari’s “OSHIGOTO” (2010) e-book on iPhone.

The situation also seems to be slowly changing on the Web — some interesting attempts have been made in order to familiarize ourselves with Web pages that have vertical setting. One such example is Taketori, which works just like Google translate — you can type in the URL of a Web page you wish to see in vertical setting, and Taketori does it for you. There’s also a piece of software called Kagetaka, which can switch any Web text into a vertical orientation.

Personally, I’m not too sure how well vertical setting will be supported by the users of normal Web pages, unless the way we navigate Web pages is re-developed, or a new type of browser with more innovative UI appears. Even though I complained earlier about the difficulty of the Japanese writing system, I do appreciate its diversity and flexibility, while making use of its three scripts and two orientations allows us to express subtle nuances of content — and we have been benefiting from that for decades.

I thought it would be a shame if we lose these methods of textual articulation in an age of screen-based media. But what has been happening for the last couple of years on touch-screen mobile devices (as well as the Web) can reassure us that both writing orientations may happily co-exist and collaborate on screen in the future, just as they have done off-screen for the last hundred years.

Feel free to share your thoughts in the comments section below.

(jvb) (il)

© Shoko Mugikura for Smashing Magazine, 2012.

0
Your rating: None

  

Depending on who you follow and what you read, you may have noticed the concept of “responsive text” being discussed in design circles recently. It’s not what you might imagine — resizing and altering the typography to make it easier to read on a range of devices — but rather delivering varying amounts of content to devices based on screen size.

One example of this is an experiment by designer Frankie Roberto. Another is the navigation menu on the website for Sifter App. Roberto and Sifter are using media queries to actually hide and display text based on screen size (i.e. not rewriting or delivering different content based on context — as one would do with mobile-focused copy, for example).

Having looked at how this technique works, I wouldn’t endorse it yet, because its practical value is not clear. Also, describing this as “responsive” could legitimize what is possibly a less than optimal coding technique. Below are screenshots of how it works on the Sifter website:

Website for Sifter App
Altering the tabbed content in the navigation menu at Sifter. Large view.

How Is This Accomplished?

In this example (and in Roberto’s demo), you’ll notice a couple of things. The screenshots show two versions of the Sifter website at different screen sizes to demonstrate what is happening at two breakpoints.

When you view the website on a large device, the second-last menu tab will show the full label of “Pricing & Plans.” On smaller devices (anything up to the size of a tablet), the label changes to just “Pricing.” This particular example might not be a big deal, but my main concern is that this is being regarded as “responsive text.” It’s not. It’s simply hiding bloated content, and if the content is not important enough to show on smaller screens, then it’s probably not vital at any size.

Does the change in wording mean that information on Sifter’s plans is offered only to users on large devices, or is the “Plans” part redundant? We can assume not, because the tab at all screen sizes links to the …/plans page. This is potentially confusing for users on small devices: they clicked on “Pricing” but are sent to a page that outlines the plans first.

To show and hide the “Plans &” part of the tab, Sifter’s designer has wrapped the element in a span. For a single menu item, this isn’t the end of the world, but good luck going down the path that Frankie Roberto demonstrates with his paragraphs. I can’t imagine what a nightmare it would be to maintain multiple versions of actual page content and then tie them into breakpoints! (Not to mention our earlier question about whether text that is hidden at certain sizes is redundant in the first place.)

Hopefully, we all know to avoid hiding content with display: none !important;. Responsive design is many things; its many little tricks and techniques constitute a wonderful approach to making websites flexible. But hiding elements on a screen in this way should not be one of them.

It’s Just a Demo, Though, Right?

Frankie Roberto’s demo is just that: a demo. He’s clear about that, and he offers a suggestion for a use case. I applaud the effort — everyone should experiment with the Web. The Sifter website is a live website, though — not a demo or proof of concept — and what it has done is being described as “responsive text.”

I’m a huge fan of the concept of “one Web.” If you find you have to hide parts of your content on smaller devices, then you might need to refocus your efforts and write less bloated copy or reconsider your wording of page elements.

One of the joys of working “mobile-first” is having to maintain a sharp and critical eye in order to cut bloat (a capacity we should always exercise, of course). Responsive text seems to be the polar opposite of this approach. You are practically admitting from the outset that too much text is on the page. You are making the dangerous assumption that someone on a small device wouldn’t want to read the hidden text.

Maintenance Problems Will Come Hard And Fast

Frankie Roberto achieves a clever effect in his demo. On a large screen, you see all of the copy. And as the screen shrinks, so does the amount of content (and vice versa, of course).

Responsive text demo on a large screen
Roberto’s full content, on a desktop screen.

Responsive text demo on a small screen
On a smaller screen, the content is reduced.

Achieving this in the demo is easy. A CSS class is applied to the excess paragraphs to hide them.

Some Potential Problems to Consider

  • The copy will have to be highly structured in order for it to be readable when parts of it are hidden on small devices. For example, if a content block has 10 lines, then it should still flow when lines 2, 5, 9 and 10 are hidden on a tablet and lines 2, 4, 5, 9 and 10 are hidden on a phone.
  • The writer would need some mechanism in the CMS for flagging the breakpoints in the content. The method for updating content would end up being rather technical as a result.

If the message you are communicating on a small screen is sound, then there is nothing you could really “enhance” it with. Anything you add would simply be bloat.

Are There Any Potential Uses For Responsive Text?

I don’t think there are. But I realize this is just my opinion, and I encourage readers and the wider Web community to evaluate it for themselves and disprove me with solid examples.

When discussing this on Twitter the other day, I got interesting responses from a number of fellow designers. Many agreed that whatever you display on a small screen should be your content everywhere, because that is the distillation of your message.

Roberto (@frankieroberto) suggests a potential use case for adaptive news content; for example, showing a summary, a mid-length version or the full article depending on the device. This does sound like a useful way to digest news, but in such a fast-moving environment, I can’t imagine copyeditors would thank you for assigning them to write content that adapts so extensively and still makes sense in these different contexts. But it’s something to think about.

Stephanie Rieger points out that producing bloat-free content on a big website can be incredibly time-consuming:

@welcomebrand @froots101 Discussions with stakeholders reveal last round of copywriting took 6 mths End result, hide text on ‘lesser’ screen

No argument there. I’m working on rebuilding a large website, too, and am encountering the same issues. But I’m not sure that hiding content based purely on screen size is wise. If it’s not relevant or worth displaying, don’t simply hide it: delete or unpublish it.

In Conclusion

My interpretation of the Sifter website and what its designer is trying to achieve may be wrong (this is an opinion piece, remember!). Feel free to tell me as much in the comments below. But from my quick look at the design, code and copy, I won’t be embracing responsive text anytime soon, despite it being an interesting experiment and endorsed by some very clever folks.

I struggle to think of a use case that withstands the basic scrutiny that I apply to content for my clients, which is that if all of the content is not good enough to show on all devices, then the amount of content is not optimal. I recognize that this is a harsh stance, so do check out the code and experiments covered here so that you can make up your own mind.

Remember, just because something is “responsive,” it might not be best for your project.

(al)

© James Young for Smashing Magazine, 2012.

0
Your rating: None

  

As Web designers and developers, each project we work with has a unique set of goals and requirements. But one goal we have for all of our projects is that we want them to make an impression on people — we want the websites that we create to be memorable.

A fun experience is often an enjoyable one and an enjoyable experience is usually a memorable one. Therefore, it stands to reason that one of the ways to create a memorable experience is to make it a fun experience. In this article, we’ll take a look at how adding a bit of “fun” into the mix can help us produce more engaging, and hopefully more successful, websites.

The Fun Theory

Some time ago, I was sent a link to a Volkswagen sponsored project called The Fun Theory. This website featured a contest where users could redesign or rethink something they encounter in everyday life — adding some “fun’” into it. The purpose was to see if they could get more people to use it simply because it was enjoyable to do so.

While there are a number of great videos on the site, the one that I love the most is called Piano Staircase. In this video, an experiment takes place with a flight of stairs in a subway station. Beside the stairs is an escalator. As I am sure you can guess, far more people would use the escalator, rather than the stairs, during their daily commute.

The Fun Theory
Volkswagen’s “The Fun Theory” website challenges people to redesign something they encounter in everyday life by adding “fun” into it, and to see if more people will then use it.

One evening, while the station was closed, the steps were turned into giant piano keys that would make a sound when they were stepped on. As commuters exited the station the next day, they were greeted with this giant piano staircase and many of them opted to try it instead of using the escalator. In fact, 66% more people than normal used the stairs while the installation was in place — an amazing increase by anyone’s standards.

Adding Fun To Our Websites

When I saw this video, the first thing I thought about was how applicable the lesson of adding fun is to the work we do as Web professionals.

By using fun to create an enjoyable user experience, we can offer people a delightful experience that they will not only remember, but one that they may tell others about as well.

Let’s Define “Fun”

Perhaps I should back up a bit and explain what I mean by fun. I am not suggesting you turn your client’s website into a circus production (unless, of course, your client is a circus). I am simply suggesting that changes and additions that add a bit of fun into the interactions or elements of a design can go a long way in helping the websites you develop become more enjoyable to use, and more memorable overall.

“Fun” is not the same as “silly”. You can add a layer of delight and enjoyment to the user experience without making your client seem childish or unprofessional. The trick is knowing how much fun to add, where best to add it, and when to recognize that you’ve gone too far.

Let’s look at some examples of websites that do a great job of using fun to create both enjoyable and memorable experiences for their users.

Improving On The Ordinary

There are many pages common to almost all websites. By taking a typical website page or experience (such as the “about us” page, or contact form), and making it fun and memorable, you can set that website apart by improving on the ordinary.

Take that aforementioned “about us” page, a fixture on pretty much any website. Mutant Labs, a UK based design and development firm, do a great job of adding a sense of fun and personality to what too often becomes nothing more than a boring company bio page.

Mutant Labs humorous about us page
Mutant Labs adds a fun sense of personality to the typical “about us” page. Scroll over the team members to see even more fun!

The website for Get Satisfaction does a wonderful job of turning the typical “case studies” page into an interactive experience with their “Wheel of Satisfaction.”

Get Satisfaction's Wheel of Satisfaction
The “Wheel of Satisfaction” is a fun twist on the typical case studies page.

How about the “contact us’” page? When was the last time you built a site that didn’t have one of those? English Workshop, “an organisation which provides English language learning opportunities”, styles their simple contact form to look like a machine’s control panel, tying it in nicely to the website’s “workshop” theme.

English Workshop's contact form
English Workshop’s “contact us” form works great alongside the rest of the design elements from the website’s workshop theme.

Smashing Magazine’s own contact page is also an example of a fun approach. The page is fun from top to bottom, with a lighthearted, informal tone for the page’s greeting (“Hello. Let’s talk.”) as well as questions, and cartoon representations of Smashing’s management team.

By taking the common pages of a website, and finding ways to add fun to what would otherwise be a typical experience, you can instead create a unique and memorable impression upon your sites’ visitors.

Frustration = Fun?

Another page typical to most websites is the “404 error” page. By adding something new to this page and showing some personality, you can help diffuse an otherwise frustrating situation. You can see some great examples of humorous and effective 404 error pages in a previous Smashing Magazine article.

In addition to a humorous, frustration-diffusing message, a good 404 error page can also include links to key pages of the website that users are most likely looking for. Done correctly, you can make your user smile, and help them find their way back to the content they will find valuable.

Pumpkin-KIng.com's humorous 404 page
Practicing what I preach with a fun 404 error page on my personal website.

Searching For Fun

While Google may be best known for their search results, the fun that they often have in delivering those results is an important part of the Google experience.

First, you have the whimsical Google “doodles” that appear in place of the company logo on specific days. These doodles range from simple graphics to fully interactive experiences, such as a playable Pac Man game, or the tribute to guitar legend Les Paul. There are also a host of hidden gems that can be found on Google by searching for specific phrases or terms. Search for the word “askew” in a browser that supports the feature (Chrome, Safari, Firefox) and the screen will literally skew itself for you. Using Google Maps, you can search for walking directions from “The Shire” to “Mordor” to get a funny little warning that “one simply does not walk into Mordor.” There are dozens of hidden gems like this baked right into Google.

The reason Google is so effective in the fun they add is because they make that fun unobtrusive to the rest of the experience. Google puts the fun out there for you if you want it, but access to the service itself is never compromised. This is a critical key to successfully adding fun to a project — make sure it does not interfere with the normal features or purpose of the site itself.

An Over-The-Top Approach To Using Fun

One of the challenges with adding fun to websites is knowing when to stop. The right amount of fun can create a memorable experience, but too much can have the opposite effect, driving users away due to an over-the-top approach. Still, there are times when “too much” is the right amount, and when an over-the-top approach really works for both the brand and the website.

CaptainDash.com uses fun illustrations and interactions throughout their website, including a comic book-like layout for their “What We Solve” section. The experience is enjoyable and unique, and the website screams personality. But even after exploring their website for a few minutes, I found it hard to explain exactly what the company does with any kind of certainty. This is one of the potential pitfalls of going all out with a fun experience — your website still needs to quickly answer the fundamental user question of “what does this company do?”.

Captain Dash's superhero themed homepage
Captain Dash” features a fun experience, but the purpose of the company is tough to uncover with all that personality.

Meomi.com is another site that goes all out in adding fun to their website experience. The website’s entire design is filled with fun characters that move and respond as you scroll over them. The overall experience is one filled with discovery and delight as you explore. I am especially fond of the website’s footer and what lurks behind those trees (go and see for yourself). I also love the fact that as busy as the site is, I quickly knew what it was about due to the tagline placed towards the top of the page — “A little design studio dedicated to play, delight, and goodliness.” Mission accomplished!

Meomi's delightful, discovery-filled website
The experience on Meomi.com is filled with delightful surprises for you to uncover as you explore the interface.

Another great example of a website that is from top-to-bottom fun (while still making it easy to discover what the website is all about) is Two Giraffes. On the website’s home page, a sign hangs upon a wall that reads: “We design fresh interfaces backed by serious code”, clearly stating the company’s offerings while staying true to the fun environment they have created for the entire website.

Two Giraffes' illustration rich homepage design
Two Giraffes” does a great job of clearly stating what the company does while staying true to the fun environment that spans the entire website.

Using an over-the-top approach on a website can have it’s risks, but if done correctly, it can also have its rewards — creating an experience that is enjoyable and memorable from start to finish.

Making Your Message Memorable

The design of a great website will support that website’s overall message or purpose. Therefore, we can strive to use a fun approach to create not only a memorable experience, but a memorable message.

The website for the Converge conference boasts that it will “peel back the layers and examine the intersection between design, development and marketing.” The website’s design is immediately striking with its use of a cyborg Tyrannosaurus Rex, but the fun really begins when you scroll down the page; the dinosaur remains, but building on the website’s “peel back” theme, you begin to get to the meat of the content — literally!

The Converge conference's cyborg T-rex styled homepage
Scroll down the page for the Converge conference’s website to get to the meat of the content — literally!

Seamco’s website states that they build “efficient bottling and packaging lines for liquid products.” The website reinforces this message by integrating a wonderful animation of bottling line efficiency. From the top of the website’s design (where the bottling begins) all the way to the bottom (where a delivery truck makes frequent trips to deliver cases of the product being added to it), the entire website is both fun and memorable in service of the website’s main message.

Seamco's bottling line efficiency animation
Seamco’s website reinforces their main message through a fun animation that spans the entire design.

Storytelling And Fun

Another way to get a website’s message across is through storytelling — and a fun approach can help ensure that the story you tell is a memorable one.

The website for the Combine conference uses the location of “America’s heartland” in Indiana to tell a fun story that transpires as you start to scroll from the top of the website… a farm machine works in a field as a giant ear of corn is being pumped full of radioactivity, into the middle of the page — where the radioactive corn begins a rampage of destruction, to the… well, I don’t want to ruin the fun. Visit the website and see the story for yourself!

The Combine conference's storytelling website
The website for the Combine conference uses storytelling to tell the tale of a rampaging, radioactive ear of corn.

Another great website that uses storytelling is one that details the Bright Future of Car Sharing. Presented with vertical navigation, you can use your keyboards’ arrow keys to “drive” through the website’s scenery and learn more about car sharing. Along the way, there are dozens of elements that you can scroll over or click on to learn more about, accessing extra content, while the website’s message is told in an engaging and interactive way.

The Bright Future of Car Sharing's interactive experience
The Bright Future of Car Sharing” as told through a fun, interactive website experience.

Some Websites Cannot Be Fun… Or Can They?

When I talk to fellow Web designers about the benefits of adding fun to the websites they are creating, the argument I most often get against this practice is that the projects they are working on have no place for fun.

Yes, it’s true that there are projects where adding “fun” is a tough sell, but sometimes even websites that don’t instantly lend themselves to a fun approach can be made more effective by using the same principals covered in this articles’ previous examples.

SlaveryFootprint.org is a website that “allows consumers to visualize how their consumption habits are linked to modern day slavery”. It definitely doesn’t sound like a place where “fun” would work, but if you visit the website and select the red “what?” arrow, the experience begins. Scroll down the page and illustrations of colorful, cartoonish hands add pieces of content to the page one block at a time as the website’s message is told. That message ends with a prompt to “take the survey”, and the same methods used for that initial message — cartoonish illustrations, a sense of anticipation, and fun interactivity — turn what would’ve been a simple Web form into a memorable and powerful experience.

SlaveryFootprint.org's powerful, and fun, survey form
Slavery Footprint” uses illustrations and fun interactions to make a point about a very serious topic.

Another good example of a serious topic presented online is the Dangers of Fracking. It uses many of these same techniques and principals, including the “storytelling” approach, that was previously highlighted. The website uses illustrations and storytelling to detail the process and effect of hydraulic fracturing — essentially creating an interactive infographic in the process. The result is an experience that delivers this message in a much more effective way than any simple paragraphs or static graphics could ever do.

The Dangers of Fracking interactive infographic website
By creating an interactive infographic, the “Dangers of Fracking” uses illustration and storytelling to get their message out in a memorable way.

There are certainly websites whose sensitive subject matter will make it difficult to add fun into the mix. But as these next two examples show, you can use many of the same solutions that other “fun” websites use to create a memorable experience without jeopardizing the seriousness or importance of your message.

Designing For Emotion

In his excellent book Designing for Emotion, Aaron Walter illustrates the benefits (and potential pitfalls) of emotional design. The book covers designing for a range of emotions; including trust, hope, surprise, delight — even love. And many of the examples offered use a bit of fun to elicit these emotions.

Design for Emotion by Aaron Walter
Many of the examples in Aaron Walter’s “Designing for Emotion” use a bit of fun to elicit the appropriate emotional response.

A selection from early on in the book provides an excellent call to action for using emotional design in the Web experiences we create:

“We’ve been designing usable interfaces, which is like a chef cooking edible food. Certainly we all want to eat edible foods with nutritional value, but we also crave flavor. Why do we settle for usable when we can make interfaces both usable and pleasurable?”

Designing The Memorable

A Web experience that is simply “usable” is no more memorable than a meal that is merely edible. Just like a master chef strives to create a menu that is truly exceptional, so should we, as Web professionals — endeavor to design and develop experiences and interfaces that are unforgettable. Hopefully this article has shown that one of the ways this can be achieved is by adding a bit of fun to the projects we are designing.

Whether you are firing up Photoshop to work on that new design, or building website templates with HTML and CSS, I encourage you to consider the examples and lessons shown in this article. You want to create amazing and memorable experiences? Try following a simple piece of advice:

Have some fun.

(jvb)

© Jeremy Girard for Smashing Magazine, 2012.

0
Your rating: None

  

Almost every Web designer can attest that much of their work is repetitive. We find ourselves completing the same tasks, even if slightly modified, over and over for every Web project. Following a detailed website design and development process can speed up your work and help your client understand your role in the project. This article tries to show how developing a process for Web design can organize a developer’s thoughts, speed up a project’s timeline and prepare a freelance business for growth.

First of all, what exactly is a ‘process’? A Web development process is a documented outline of the steps needed to be taken from start to finish in order to complete a typical Web design project. It divides and categorizes the work and then breaks these high-level sections into tasks and resources that can be used as a road map for each project.

A Typical Process

Here is a standard process that was put together using examples from around the Web as well as my own experience. (Note: Please see the resource links at the end of each phase.)

1. Planning

The planning stage is arguably the most important, because what’s decided and mapped here sets the stage for the entire project. This is also the stage that requires client interaction and the accompanying attention to detail.

  • Requirements analysis
    This includes client goals, target audience, detailed feature requests and as much relevant information as you can possibly gather. Even if the client has carefully planned his or her website, don’t be afraid to offer useful suggestions from your experience.
  • Project charter
    The project charter (or equivalent document) sums up the information that has been gathered and agreed upon in the previous point. These documents are typically concise and not overly technical, and they serve as a reference throughout the project.
  • Site map
    A site map guides end users who are lost in the structure or need to find a piece of information quickly. Rather than simply listing pages, including links and a hierarchy of page organization is good practice.
  • Contracts that define roles, copyright and financial points
    This is a crucial element of the documentation and should include payment terms, project closure clauses, termination clauses, copyright ownership and timelines. Be careful to cover yourself with this document, but be concise and efficient.
  • Gain access to servers and build folder structure
    Typical information to obtain and validate includes FTP host, username and password; control panel log-in information; database configuration; and any languages or frameworks currently installed.
  • Determine required software and resources (stock photography, fonts, etc.)
    Beyond determining any third-party media needs, identify where you may need to hire sub-contractors and any additional software you may personally require. Add all of these to the project’s budget, charging the client where necessary.

Resource links for this phase:

Process99 in Following A Web Design Process

2. Design

The design stage typically involves moving the information outlined in the planning stage further into reality. The main deliverables are a documented site structure and, more importantly, a visual representation. Upon completion of the design phase, the website should more or less have taken shape, but for the absence of the content and special features.

  • Wireframe and design elements planning
    This is where the visual layout of the website begins to take shape. Using information gathered from the client in the planning phase, begin designing the layout using a wireframe. Pencil and paper are surprisingly helpful during this phase, although many tools are online to aid as well.
  • Mock-ups based on requirements analysis
    Designing mock-ups in Photoshop allows for relatively easy modification, it keeps the design elements organized in layers, and it primes you for slicing and coding when the time later on.
  • Review and approval cycle
    A cycle of reviewing, tweaking and approving the mock-ups often takes place until (ideally) both client and contractor are satisfied with the design. This is the easiest time to make changes, not after the design has been coded.
  • Slice and code valid XHTML/CSS
    It’s coding time. Slice the final Photoshop mock-up, and write the HTML and CSS code for the basic design. Interactive elements and jQuery come later: for now, just get the visuals together on screen, and be sure to validate all of the code before moving on.

Resource links for this phase:

3. Development

Development involves the bulk of the programming work, as well as loading content (whether by your team or the client’s). Keep code organized and commented, and refer constantly to the planning details as the full website takes shape. Take a strategic approach, and avoid future hassles by constantly testing as you go.

  • Build development framework.
    This is when unique requirements might force you to diverge from the process. If you’re using Ruby on Rails, an ASP/PHP framework or a content management system, now is the time to implement it and get the basic engine up and running. Doing this early ensures that the server can handle the installation and set-up smoothly.
  • Code templates for each page type.
    A website usually has several pages (e.g. home, general content, blog post, form) that can be based on templates. Creating your own templates for this purpose is good practice.
  • Develop and test special features and interactivity.
    Here’s where the fancy elements come into play. I like to take care of this before adding the static content because the website now provides a relatively clean and uncluttered workspace. Some developers like to get forms and validation up and running at this stage as well.
  • Fill with content.
    Time for the boring part: loading all of the content provided by the client or writer. Although mundane, don’t misstep here, because even the simplest of pages demand tight typography and careful attention to detail.
  • Test and verify links and functionality.
    This is a good time for a full website review. Using your file manager as a guide, walk through every single page you’ve created—everything from the home page to the submission confirmation page—and make sure everything is in working order and that you haven’t missed anything visually or functionally.

Resource links for this phase:

Process77 in Following A Web Design Process

4. Launch

The purpose of the launch phase is to prepare the website for public viewing. This requires final polishing of design elements, deep testing of interactivity and features and, most of all, a consideration of the user experience. An important early step in this phase is to move the website, if need be, to its permanent Web server. Testing in the production environment is important because different servers can have different features and unexpected behavior (e.g. different database host addresses).

  • Polishing
    Particularly if you’re not scrambling to meet the deadline, polishing a basically completed design can make a big difference. Here, you can identify parts of the website that could be improved in small ways. After all, you want to be as proud of this website as the client is.
  • Transfer to live server
    This could mean transferring to a live Web server (although hopefully you’ve been testing in the production environment), “unhiding” the website or removing the “Under construction” page. Your last-minute review of the live website happens now. Be sure the client knows about this stage, and be sensitive to timing if the website is already popular.
  • Testing
    Run the website through the final diagnostics using the available tools: code validators, broken-link checkers, website health checks, spell-checker and the like. You want to find any mistakes yourself rather than hearing complaints from the client or an end-user.
  • Final cross-browser check (IE, Firefox, Chrome, Safari, Opera, iPhone, BlackBerry)
    Don’t forget to check the website in multiple browsers one last time. Just because code is valid, doesn’t mean it will sparkle with a crisp layout in IE 6.

Resource links for this phase:

5. Post-Launch

Business re-enters the picture at this point as you take care of all the little tasks related to closing the project. Packaging source files, providing instructions for use and any required training occurs at this time. Always leave the client as succinctly informed as possible, and try to predict any questions they may have. Don’t leave the project with a closed door; communicate that you’re available for future maintenance and are committed to ongoing support. If maintenance charges haven’t already been shared, establish them now.

  • Hand off to client
    Be sure the client is satisfied with the product and that all contractual obligations have been met (refer to the project charter). A closed project should leave both you and the client satisfied, with no burned bridges.
  • Provide documentation and source files
    Provide documentation for the website, such as a soft-copy site map and details on the framework and languages used. This will prevent any surprises for the client later on, and it will also be useful should they ever work with another Web developer.
  • Project close, final documentation
    Get the client to sign off on the last checks, provide your contact information for support, and officially close the project. Maintain a relationship with the client, though; checking in a month down the road to make sure everything is going smoothly is often appreciated.

As stated, this is merely a sample process. Your version will be modified according to your client base and style of designing. Processes can also differ based on the nature of the product; for example, e-commerce websites, Web applications and digital marketing all have unique requirements.

Process66 in Following A Web Design Process

Documenting The Process

Create and retain two versions of your Web design process:
One for you or your team to use as a guide as you work on the back end, and one to share with clients. The differences between the two should be intrinsically clear: yours would be much more detailed and contain technical resources to help with development; the client’s would be a concise, non-technical map of the process from start to finish.

Common tools for documenting the business process are a simple Microsoft Word document, Microsoft Visio and mind-mapping software such as Freemind. If you’re ambitious, you could even develop your own internal Web-based tool.

Using The Process

By now, you should understand what a process looks like, including the details of each phase, and have some idea of how to construct your particular Web design process. This is a great first step, but it’s still only a first step! Don’t miss this next bit: knowing how a process can enhance your overall business and how to use it when approaching and interacting with clients.

Refining the Process

The process will be different for each designer, and for each project. Develop a process for yourself, and identify whatever is useful to you or your team. Only then will the process be truly useful. After all, freelancers can serve drastically different target markets.

Bulleted lists are well and good, but the process can be much more useful and elaborate than that. Many of the resources, tools and links posted on Web design blogs and Twitter feeds fit into different parts of the process. An incredibly useful way to refine the process is to add resource links to each phase, and to develop your own resources, such as branded document templates.

Process551 in Following A Web Design Process

Some commonly used documents of freelancers:

  • Client questionnaire,
  • Invoice,
  • Project charter,
  • Documentation for hand-off to client,
  • User accounts,
  • Database table charts,
  • Site map.

Files and Archive

Documentation and storage are important to grasp. As mundane as these tasks can be, they certainly help when tax season rolls around or when a small freelance venture begins to expand. You can never be too disciplined when it comes to efficiency in work and time. You could establish a standard document format and folder structure for all of your clients, or maintain a list or archive of previous clients and project files. You could employ anything from simple lists to all-out small-business accounting practices.

A Process Puts the Client at Ease

Many clients view Web development as a black box, even after you’ve tried to educate them on its methods. To them, they provide their requirements, suggestions and content, and then some time later a website appears or begins to take shape. They’re often completely unaware of major aspects of the process, such as the separation of design and development. Having an organized and concise process on hand can help organize a client’s thoughts and put their mind at ease, not to mention help them understand where their money is going.

Outlining my basic process as a freelancer is by far the most common first step I take with potential or new clients. A quick, high-level “This is how it works” discussion provides a framework for the entire project. Once you have this discussion, the client will better understands what specifically is needed from them, what you will be delivering at certain points in the timeline and what type of work you’ll be engaging in as you go along. Most of all, the discussion can nip any miscommunication or confusion in the bud.

Designers are often too deep into Web design to realize that most people have no idea what they do or understand their terminology or know the steps involved in creating a finished product. Starting fresh with a understandably “clueless” client can be daunting.

Process331 in Following A Web Design Process

It’s a Business

It’s a business, and the steps outlined here are basically the path to small-business management. As you grow in clients or staff or contractors, you’ll find yourself with an ever-growing to-do list and a headache from all of the things to keep track of. Give yourself a break, and invest some time in finding tools to help you get the job done efficiently. An expanded process document is a great first step on this path.

Tips

  • Ask a non-technical friend to review your process. If it makes sense to them, it will make sense to your client.
  • Use the processes of other designers as a starting point to build or refine your own. See the related resources links.
  • Build document templates and Web apps into your process. This will save time and make you more professional.

Risks

One process cannot be applied to every project. Although your process will be useful when you first engage a client in the planning discussion, be sure to review it before the discussion takes place to ensure it fits the project.

Further Resources

Here are some links to resources that showcase sample Web design processes, as well as tools and templates to build integrate in your own process.

Have further resources to share? Post them in the comments.

(al) (il)

© Luke Reimer for Smashing Magazine, 2011. |
Permalink |
Post a comment |
Smashing Shop |
Smashing Network |
About Us

Post tags: ,

0
Your rating: None

There are countless sources of design inspiration to be found everywhere. Even for ones directly unrelated to visual and web design. Music, films, video games, architecture. Well, one more item you can add to that list is watching anime – Japanese animation. In fact, there are 8 ways watching anime can improve your designs.

anime kyouran kazoku nikki punch copy Watching Anime Can Improve Your Designs

For those unfamiliar with or who have unfavorable first impressions of anime, it’s more than robots, school girls, and tentacles – although it’s that too (just how “guns, cash, hoes” is a part of hip-hop). From psychologically-probing action titles like Neon Genesis Evangelion, to sci-fi western noir like Cowboy Bebop, to fantastic magical adventure like Fullmetal Alchemist, to breathtaking film masterpieces like Spirited Away, anime is Japan’s preferred format for imaginative storytelling.

See how watching anime can improve your designs here.

 Watching Anime Can Improve Your Designs
Become a fan of Design You Trust on Facebook!

0
Your rating: None

Attractive design, inquisitive structure and captivating content are the ingredients of every successful website. Since most people who wish to launch their very own website would usually not be well versed in all three areas, owning a website becomes tedious if not a costly venture.
Since all website owners may not be web developers, sometimes they may need to take the trouble of learning how to make even the smallest changes required on their site. Some may find this exciting, while the majority would get disheartened by the inconvenient task and even give up the idea of having an online presence.

If you are another one of those, who specializes at some business, service or has an urge to disseminate his interests and experiences with the world without learning web development, it is still possible. A Content Management System (CMS) is what you need!

Continue reading …

Advertise with Design You Trust! - DYT on Twitter - Facebook

0
Your rating: None

Freelancers accumulate a lot of things and habits that get in the way of their work. Sure we meet deadlines and get things done but our productivity suffers.

At the end of the day, we’re left scratching our head wondering where the day went. We end up working nights to meet a deadline that should have been met ahead of schedule if things had gone according to plan.

Here are 7 Things You As A Freelancer Need To Ditch in order to find the kind of success you’re looking for in your business.

1. Excessive Social Networking, Instant Messaging And Internet Browsing


This has been written and told so many times that you’d think it would be engraved in people’s head by now. Even if you’re super careful and watch your time, social networking and browsing have a habit of sneaking up on you and making you ignore the clock.

Stop Stumbling, Digging, or going through your RSS reader for an unscheduled period of time. If there’s work on your desk that’s being ignored in favor of it then you’re wasting time and momentum.

2. Email Obsession


Ah yes. We all have the email bug. Here’s how you ditch the habit.

1. Turn off the notification sound
2. Shut off your inbox
3. Check every two hours or any (reasonable) time period of your choice.
4. Rinse and repeat

You could also check email as a reward. Completed an article? Check email. Met a deadline? Omg, I so deserve to check my email now!

Yes you’ll go crazy, but your work will thank you for it!. Think of the happy clients and stress free pace of work as you’re free from the anxiety of having things added to your to-do list with every email.

CONTINUE READING

Advertise with Design You Trust! - DYT on Twitter - Facebook

0
Your rating: None