Everyone is always looking for interesting and effective ways to organize their website and allow users to move about and find things. But there’s a fine line between unexpected and unusable. Three points to consider in any navigation scheme are consistency, user expectations and contextual clues.If page is long and provides different levels of navigation, will users be able to find their way through the site and use proper navigation quickly? Forcing visitors to use certain keystrokes to navigate, rather than what they’re used to, might be novel, but is that effective if you have to explain instructions prominently on your home page? Here are some examples for your reading pleasure.[By the way, did you know we have a free Email Newsletter? Subscribe now and get fresh short tips and tricks in your inbox!]Made by WaterA JavaScript-Powered Vertical FunThe large bold headings and modern color palette on Made by Water feel fresh and fun. The grid layout is nice and clear, while the background texture is subtle but interesting. The icons at the top are visually appealing, and the animation makes them fun to click. It’s not immediately apparent what they are for, though. Some text would help to clarify that they are for navigation. Vertical navigation buttons with icons.The other problem with the navigation is the yellow “up” arrow that is displayed in the footer of the page. One would expect it to bring you back to the top of the page, but it leaves you more in the middle. The circle of stripes that follows you down as you scroll doesn’t match the background pattern, but we can’t tell if it’s part of the navigation. At any rate, we clicked it to no effect.Finally, while the text at the top is fun and exciting, finding the “Who am I” section is a bit hard. It’s not immediately clear what the website is about.Made in HausHorizontal Slideshow as NavigationThe large page keeps Made in Haus from feeling unoriginal, and the smooth motion is a bit different from many of the sliders we’ve seen. Bumping the accompanying text up into the body of each slide is a good way to keep it above the fold and visible as the user flips through the slides. The sliders on the sub-pages are also effective, being an easy way to skim through a fair amount of content. Also, nice hover-effects under the slideshow look attractive and give an insight into the work of the agency. Bold horizontal navigation.One drawback is that the triangle on the far right of the upper navigation menu is a bit confusing. It appears to link to the home page, as a logo would, but we’re not quite sure why. Also, the arrow on the right side of the slideshow may be a bit too tiny, making it a bit difficult for users to navigate the slideshow. We’ve seen a similar navigation earlier, on Weightshift which is a nice example of an alternative implementation of this technique.Foundation SixAnimated Text Scrolls Down With the UserFoundation Six features a few big bold screenshots at the center of the page, giving us the impression that they were interactive in some way. The first thing that we did was try to click on the screenshots, but nothing happened (except for the central one which links to the description of the project featured in the center of the page), which was a little frustrating. Text moves instead of images.The headings are large and very clear, and the type is handled nicely throughout. The color palette is very soft and clean, and it nicely matches the atmosphere of the site. The call-to-actions buttons are large and easy to find, read and click. The subtle hover effects in the upper navigation enhance the user experience, making it smooth. Additionally, the contact form tracks well and is nicely laid out, while the map is a nice touch. The company scores bonus points for linking to Bring Down IE6.On the projects page, the way the explanatory text slides down instead of the images is original. But being so unexpected, it could be a little disorienting, which may or may not be a good thing: is explanatory text really the best place to make a statement with moving parts?Word RefugeTextual Content in a Horizontal SliderWord Refuge features an old-fashioned bookish vibe. Because it is a copywriting service, this seems appropriate. The contact form is prominent, easy to find and easy to use. The logo is also nicely done, and the color palette is rich and regal. Various arguments for the company are organized into slides.One small point is that the tag lines in the main navigation are effective under some of the menu items but not under others. Some of them feel redundant, as if they’re there only to balance things out. As a rule, if text doesn’t add any explanation, it shouldn’t be there. That said, the text throughout the website is nicely kerned, and while the page is wordy, the text is easy to skim through and read.RelogikAnimated Horizontal Slideshow NavigationRelogik is another example of minimalism done well. The logo is understated and sophisticated. Most design elements are semi-transparent and appear on hover. The close-up images are bold and make the content the focal point of the page. The code is clean and well-structured and uses a solid grid layout with pulls to keep everything squared up. Sliding horizontal navigation.The classic numeric navigation makes it easy to navigate the slideshow. One weakness is that the contact information has a very low contrast against the background. A darker color would help to highlight it. The project detail pages do a good job of showing rather than telling and of displaying each piece in a real-world context.DrexlerHorizontal Navigation… If the User Follows InstructionsThe horizontal navigation on Drexler works both with the arrow keys and mouse clicks. On the first glance, it’s not clear how to navigate the site: you need to either read the hint in the upper area of the site (“User your arrows”) or experiment with the design to figure it out. To browse blog posts, users need to click on the illustration of the post or use keyboard arrows. The design itself is visually appealing, but the navigation scheme isn’t straightforward. “Use your arrows” to navigate.The retro color palette and big bold fonts make the website colorful and energetic, but they also might be a little overpowering. The “t” for Twitter in the upper right is an interesting break from the usual little bird, but the downside of breaking with convention is that you might lose clarity. We didn’t know what the icon was for until we clicked it, and we probably wouldn’t have clicked it if we were merely visiting the website as a normal user. The contact button is amazing indeed, as it claims. The multi-column contact form is an interesting take on the email form. It seems effective, and it tracks very well. This is a design that needs to be explored to be understood — but maybe it was the intention of the designer in the first place?The logo is simple and clean, but again, it adds a note of confusion. The yellow underline on mouse-over feels unbalanced, because the rest of the logo isn’t highlighted. One other thing to note is that the page changes color to match the project being displayed. This is an unusual take on the portfolio. Usually, projects are displayed uniformly, sometimes to the point of being indistinguishable. This approach makes the projects stand out, in a good way.KomradeVertical Navigation With a TwistThis page allows users to forge their own path through the website. Komrade features original illustrations, a fresh color palette and an original “Choose Your Own Adventure”-style navigation scheme. The navigation has the following cracks in it, though:The light blue text looks like it’s hyperlinked. One of the first things a user sees upon loading the page is the blue “Who’s Komrade” heading. The first thing we did was click it, but nothing happened. This started the user experience off on the wrong foot. With this unusual scrolling navigation, distinguishing the clickable from the unclickable is extremely important.The numbered navigation for Komrade’s past work does not stand out enough. The red circles look like yet more flowers, which caused us to pass over them several times before figuring out that they were the navigation. This goes back to the clickable/unclickable issue. Well-placed labels would go a long way here. “Choose Your Own Adventure”-style navigation.All For DesignScrolling Navigation and “Shelf”-NavigationAll For Design feels light and airy, with its crisp woodcut headings and subtle effects such as the Twitter icon that flies on hover. The design os single projects pages is especially nice, making clear exactly what was involved in each project. The section “some inspiration” nicely puts books, useful websites and articles on a “shelf” and has subtle shadow- and hover-effects. The only problem is that the title-attribute is displayed on hover together with the screenshot which makes it a bit difficult to focus on one of them.“Shelf”-navigation.Calendar next to the contact form.The calendar next to the contact form is also a great idea: it sets expectations and makes it easy for potential clients to plot a timeline. While the font is scannable, it still feels a bit too wordy overall, although the shadow effects, subtle borders and custom icons keep the eye flowing down the page.Digital LabsHorizontal or Vertical Navigation?With the prominent screenshots on this website, one would think the page would have horizontal navigation; in fact, the page is static. Digital Labs uses a wide layout, with a nice textured background. The dark colors make it feel spacious without being too spacey. One issue, though, is that the orange ribbon on the right looks like it should be clickable, but it isn’t. The text-based social media widget, which responds to mouse-over, is an interesting touch. The web design scene is full of social media icons, so a text-based widget stands out. The static screenshots above look like a slideshow.The other issue is that the “Are you ready to get started?” link at the bottom is a mailto: link, rather than a link to a contact form. This is acceptable, but a drop-down form in that space would really kick things up a notch.Calobee DoodlesClassic Thumbnail and Lightbox CombinationCalobee Doodles, an illustration-based portfolio website, has fun details, such as the objects and people falling from the sky. The cloud menu items could be clearer, though. At first, we were not sure what “Custom” stands for (it stands for custom design and illustration work). However, the menu benefits from descriptive tooltips and appear on hover. Still, a different wording, for instance “Work”, would have been clearer. The website uses the classic thumbnail and lightbox navigation.A thumbnail gallery is a common way to display work, but in this case illustration thumbnails are a bit too small, and they are linked to images. A lightbox may work better in this context. The bottom-up-navigation may be useful for some readers, and the footer is truly remarkable. Also, it would be nice to remove dotted lines appearing on click in the navigation menu. A simple outline: none; for links with proper styles for :focus and :active states would suffice.BuildClassic Top-Level NavigationWhile the overall layout of Build is clean and modern, the content could stand to be more easily scannable, for two reasons for this. A look at that code suggests that the margins and padding are a bit arbitrary. The padding for the main body conforms to a design pattern, but the major content elements do not. Maybe it would be a good idea to use multiples of a set base number for the margins, padding and borders, so that there is a consistent ratio throughout. Classic top-level navigation.Secondly, the contrast of the text in the content sections has some problems. The contrast between strong white and strong grey background is very striking, and maybe a bit too strong. The second part of the page looks a bit busy and a bit difficult to scan, probably because the colors of the headings and descriptions are very similar. Maybe if the headings were kept as a serif, the content blocks could be distinguished a bit by making the text lighter and using a sans-serif font. Some textual variation or typographic work might add visual interest as well. Subtle hover effects for links are attractive and fun to click on: nice touch!We liked the listserv sign-up widget in the footer of the page. A sample email in the relevant field, along with more space on the line, could be a helpful, though. Also, an explanation of what exactly users are meant to type here would be great — for instance, a sample e-mail in the input field. Also, the mouse pointer should change after you click on the submit-button, but in this case it doesn’t. We fumbled a bit at first until we looked at the code.Mail ChimpGraphics-Heavy Vertical Page With No Navigation Other Than Browser Scroll BarMailchimp’s promo page is a visually appealing website with a lot of interesting vintage graphics. Some real strengths of this website are the many interesting textures and patterns. The color scheme is modern and appealing. There are, however, a few usability problems. First, there is actually no navigation. We’re as big a fan of shedding unnecessary conventions as the next guy, but if we were an existing customer visiting this website, we would have no idea what to do. The “Sign in” link is obscured at the bottom of the page, with few visual cues to reward the user’s patience as they scroll down. Even a few small links at the top would add some structure and provide some cues for navigation, which would make the whole website make more sense. Graphics-heavy vertical website.Secondly, the edgy graphics, while fun and visually interesting, don’t give much sense of what the main point of the page actually is (if you are visiting the site for the first time). The primary message is only delivered in the paragraph towards the middle, and even it is a bit hard to read, with the small white text over the shades of gray. The paragraph would be more effective if it were bigger and had more contrast. The promotional videos are really great and remarkable, though.Pline StudiosMinimalism in Vertical JavaScript-Based NavigationPline studios is an architecture firm, so it makes sense for it to have a spacious vertical layout with graphic touches that are reminiscent of CADD drawings. The big headings are clean and visually appealing and do a great job of leading the eye around. In an unconventional navigation scheme, making it clear where to click is critical, and this website makes it extremely clear. The navigation is repeated in each section, so the user is never stranded and left to scroll.One problem, though, is the project descriptions; so much focus is on the images and animations that there’s actually very little explanation about the projects themselves. Minimal vertical navigation.TransformologyPersistent Toolbar-NavigationTransformology shows another way to handle navigation on a vertical page. When the user scrolls the page, the navigation menu at the top of the site changes accordingly. The elaborate headings in the text blocks are visually appealing, but almost to the disadvantage of the content that should be showcased. The headings make the content easy to see but more difficult to read. The website has a clean, solid grid layout, but it may not always do an effective job of displaying the content, which sometimes feels overpowering. Static navigation follows wherever you go.BurtonSliding Captions and Tabbed Boxes in a Vertical LayoutThe first thing we noticed about Burton is the nice visual details, such as the animated eyes on the “Search and Destroy” search box, and the animated GIF on the mouse-over logo. The jigsaw layout is clean, bold and easy to scan. The mouse-over labels are a good way to display details without overwhelming users with text, and the mini-tabbed layouts inside the content blocks keep things clean and minimal. All of the content is available without being visible all at once. The scrolling vertical navigation is aided by the jigsaw sections with sliding captions.A problem with the navigation, though, is the up and down arrows on the side of site’s pages. We expected that they would allow us to move up and down the page; instead, they pop out a text-based navigation menu. Not knowing what sections of the page correspond to the labels (for instance, when you visit the page for the first time), this isn’t very useful. Still, overall very nice, original and memorable design.New Adventures in Web DesignFun Shapes That Feel Like NavigationAt the first sight, the interactive shapes in the middle of the New Adventures page feel a bit like navigation, in that they change as you move through the website, providing cues that the page has changed. New Adventures is an example of a clean and solidly structured design. The rainbow of dynamically transforming shapes is fun and original. Adding more color could make the design a bit stronger; the brown palette is calm and professional, but it probably could have been be more interesting with some accent colors. The shapes move all over the place!The typography overall is effective, and the line heights and margins make the information very clear and concise. An interesting touch of the design would be to highlight the speaker’s photo when a user hovers over his or her name in the list of speakers. Also, when trying to return to the front page, we clicked on the text logo in the left upper corner (“New Adventures in Web Design”), but it isn’t clickable which is a bit confusing. We had to use the small “Home”-link in the upper left corner instead.Christopher KaufmanWide Horizontal Slider With a DifferenceOn Christopher Kaufman’s page, the sub-content panels slide up as the slider moves left to right. The layout is clean and organized, the background is colorful and unique, and the slideshow adds plenty of eye candy. The logo is minimal but detailed, and the top-level navigation is clear and effective. One drawback is that the background image is a pretty big file; as it loads, it creates a flashing effect that can be disorienting. One could argue that the height of the slideshow is optimized for larger screens; but scrolling through the slideshow content, some users can see that the content below has changed, yet have to scroll down to read all of it. This isn’t necessarily a big issue, but the slideshow panels could be a bit shorter. The wide horizontal navigation forces users with small screens to scroll.ChapolitoAnother Example of Tabbed NavigationChapolito is really a unique website. The footer animation catches the eye right away, and the abstract shapes in the top-level navigation are original, as is the way the logo is integrated in the navigation, which keeps the brand as a focal point. We do have a suggestion for the sub-navigation in the portfolio section, though. The circles-as-progress indicator probably works best for slideshows of about five pieces of content or fewer. With such an extensive showcase, the user might get lost and not be able to find a particular project again. If numbers were in the circles, that would help. Interesting top navigation.Flywheel DesignSliders and Graphic Tiles That Flip on Mouse-OverFlywheel Design gives a good overview of its work right on the home page. The hover-over navigation is fun and gives users an incentive to mouse around and explore. The background is simple without being boring, making this a good example of minimal design. One problem for us was the slider navigation on project sub-pages: almost too minimal, because it took us a while to figure out it was there. Making it a little bigger or adding a splash of color might help. Flip-tile style navigation.Wishbone DesignFlash-Based Animated NavigationWishbone Design is created for kids and parents, so it makes sense for it to be fun and full of Flash animations. The navigation is entertaining but a little hard to use. Having the sub-elements open on hover seems to be the root of the problem; changing it to a click might give users a greater sense of control. Hover navigation should be as speedy as possible. The main slideshow is eye-catching, but you really have to dig to figure out that this is actually a company manufacturing bicycles (among other things). An explanatory blurb or even some slides would help new visitors. Another problem: if you’re going to have audio, please give users a way to turn it off! Overall, the site is truly remarkable, with attention to details. Nice work, this is what Flash is supposed to be used for! Flash-based navigation.BasmatitreeFlash-Based Animation That Could Be NavigationWe can’t lie: on first arriving on 60 mq missione casa, we were really hoping that the spoons were the navigation. We were sad to find out they aren’t. That said, this is a pretty fun layout for a food blog. The typography could benefit from some more variation, though. Also, the posts would be easier to scan if some texture or color variation were added to the columns. Flash-animated spoons are fun!Minus FiveAn Entirely Horizontal Sliding WebsiteHorizontal navigation can be problematic. In this case, though, Minus Five is larger than life and colorful. The hover-over “Forth” and “Back” controls are large and easy to see, making it abundantly clear where you can click and what you are supposed to do, and avoiding one of the common drawbacks of unconventional navigation. Entirely horizontal navigation.For a portfolio, one thing that could confuse users is that the featured websites are not linked to anything. Using images embedded in a Mac frame to convey that they are websites is a good idea, but they make it a little hard to see the details in the designs. Another questionable design choice is positioning the portfolio pieces to the right of the background image. This makes it feel as though the background is the focus, instead of the portfolio pieces themselves. Also, the page is difficult to browse if you don’t have a proper wide screen display, because you see only small chunks of the site at once.RetinartCompletely Text-Based NavigationRetinart is a lovely example of a typography-focused website. The nice, even gutters and margins are relaxing on the eyes. One thing that’s a little unexpected is that the “Feedback” tab on the left side doesn’t pop out from the side (as most users would expect), but rather opens a modal window. The beautiful typography goes well with imaginative language.Notice the careful attention to language. In conjunction with beautiful type, a designer can really take it to the next level by using beautiful language to emphasize the quailty of the site.Collision LabsClassic Tabbed NavigationCollision Labs is energetic. We immediately wanted to take this design firm’s advice and fasten our seat belts! The large header block is exciting without being overpowering. The portfolio sub-pages are clear and do a good job of both telling and showing what the projects were about. The typography, though, is a little uniform. One thing that confused us was the Twitter icon in the footer navigation: the bird flips upside down on hover. We couldn’t really see the reason for this, so it felt vaguely unsettling. Overall, though, an effective website, and a good example of judicious and not excessive icon usage. Bold color and traditional navigation.SummaryIn sum, navigation is as much about communicating instructions for finding content as it is about being fun and interesting. There are some points to take away. For instance, if something is clickable, make sure it looks clickable. If it’s not clickable, make sure to communicate that, too. Also, be fun without being confusing. And show, don’t tell. If you have to tell users what to do, then the navigation has failed. After all, the crucial attribute of any truly exceptional website is both aesthetics and the usability of its navigation.Related PostsShowcase of Modern Navigation Design TrendsShowcase of Beautiful Vertical Navigation DesignsThe Case Against Vertical NavigationNavigation: Menus, Trends and ExamplesShowcase of Well-Designed Tabbed NavigationWould you like to see more similar showcases on SM?Let us know what you think in the comments to this post! And please like this article below if you find it useful and would love to see more similar posts on Smashing Magazine in the future. Thanks.© Sarah & Adrienne Kahn for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: navigation, showcases

  They say the first bite is taken with the eye. If so, these appetizing restaurant websites succeed in whetting our appetites, inviting us to a savoury next bite. In these designs, color scheme and introductory copy show vastly different aspects of the restaurant experience. Moody warm tones create atmosphere, vibrant greens underscore freshness, and earthy colors communicate a relaxed, friendly attitude.Because customers are increasingly using mobile browsers to make decisions on the spot, restaurant websites are doing a better job of communicating core information quickly. Similarly, full Flash websites with no mobile alternatives are seeing some decline. Especially interesting is how these businesses are improving their online menus by replacing PDF-only downloads with Web-optimized alternatives that are more readable and easier to navigate.[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]Showcase Of Restaurant DesignsGeogeske This design has printerly qualities, with its eye-catching oranges and whites and oversized headings. Everything works together to establish a relaxed yet smart urban atmosphere. The JavaScript effects (sectional fades and spring-loaded logo introduction) are used sparingly and effectively. Simple navigation and short copy make scanning easy while putting the focus on the strong menu-worthy photography.Jam Restaurant Upscale modernist and classical elements are used consistently on this website and in the menu and restaurant interior. The vibrant typographic header looks stunning while enhancing usability by prominently displaying a phone number and hours. Another nice touch is how the body scrolls beneath the stationary translucent header.Benito’s Hat Named after a celebrated Mexican president, this restaurant communicates authenticity and freshness with a green cilantro backdrop and clear devotion to its culinary roots. At times, the backdrops on the interior pages eat the foreground text; a little contrast and spacing would help in spots. Overall, an offbeat feel that works.Pizzeria Napolicentrale This website uses horizontal navigation to guide the user through photos of mood-setting rustic Italian elements. The beige picnic pattern adds just enough visual interest without competing with the copy. But in some sections, the taller content makes horizontal scrolling a bit floaty.Barley’s A cozy design rich in grainy colors and sturdy serifs. Small touches—like the roll-overs, and lighting effects such as in the logo hover state—give a handcrafted feel. Do not miss the nice, readable menu and beer list that feature stylishly simple beer ratings.State With nocturnal tones and pictures of people having a good time, the State uses a hip design to say that it’s a cool sociable night spot. Perhaps intentionally, there seems to be little focus on food; for example, the menu section feels skimped (disjointed navigation and flimsy type for the buttons). More photos of the restaurant and food might enhance the personality of this website. Also, the home page seems a tad cluttered. In general, a little more depth in the sub-pages would round out what is a good-looking piece.Farinella Bakery Fun and disarmingly honest, Farinella Bakery takes the cake in blending personality and usability. The bold header and fun footer become bookends for the spot-on copy and photos. Notice the slight head bob when you click on the navigation and the magnification when you roll over menu items; a tasty browsing experience. What makes this a winner is that the integrity and consistency of the design can be found in the smallest elements.Sono Authentic Japanese design elements and atmospheric audio effects work well to create mystique on this Flash website. A few usability concerns pop out: for example, the flaky JavaScript for the “Back” button and the small text that is in a cramped box with a small scroll bar.The Little Cake Parlour This more conventional website shines with gorgeous photography that almost seems edible. The design has a strong focus on typography, with various elements embedded in the elegant pink multi-column layout. Some design elements probably shouldn’t be images and would work better as simple plain text, though. Also, because all visual elements have a similar pink tone, they may be a bit difficult to recognize at first glance — for instance, the pink PayPal-button in the footer of the site.Pizza Luce With playful tattoo-like scribbles and quirky photography, Pizza Luce makes clear its immutable place in Minneapolis’ food culture. Check out the oddly captivating home page illustration. For all of these strengths, the community section feels slapped together and in need of a bit of refinement.La Vista The clever use of the Flash overlay here adds intimacy and life to the crisp photography. The menu is noteworthy: simple to browse and very clean.Georgian Wine Society The backdrop feels like a matte painting that draws us into the headspace. With that, we are receptive to the interesting narrative about Georgia’s role in wine-making. The e-commerce system is well integrated; a more generous margin between elements would augment the shopping experience.Catered by Kate This website’s “About” page is one of the top in this showcase. It opens with Kate smiling warmly, giving the page a welcoming human touch. Next, it summarizes (in only two sentences) three very compelling reasons why you would use Kate for your catered event. Just one distracting but easy-to-fix minus: a call-out to an empty Flickr page that is supposed to hold more images.Can Jubany This clean layout on deep chocolate brown feels elegant even while containing a surprisingly large amount of content. The home page sets the right tone with the large yet quick-loading video that tells a story. Two more unique touches are the simple sliding navigation and the tantalizing, well-written recipe section.Caravan This simple and savvy composition uses negative space to focus on the coffee while adding depth with subtle textures. If the placeholder is this solid, then our expectations are high for the full website!Chipotle Humor, earthy tones and engaging (and notably non-Flash) animations make for an experience that is engaging and relaxed yet expertly crafted. Consistent with its corporate message of “Food with integrity,” Chipotle focuses much of the website on its brand rather than the burritos. Be sure to tug the rope in the footer for some hidden and delightful interactivity.Le 28 Thiers Here are tangerine and rose hues mingled with crisp photographic elements and textures. The simple wooden table distinguishes the layout and grounds the content visually. Subtle gradients in the typography, quality photography and the curved navigation inject elegance and dimension.Brooklyn Fare This playful design achieves a unique charm through imagery that consists of real employees, bookish serifs and a stylish seafoam background. Especially nice is the consistent layout, with its cheerful copy and gritty photography, which avoids appearing repetitive.Canela Canela (Portuguese for “cinnamon”) employs a conventional layout, energetic reds and generous imagery to give a sense of flavor and sophistication. The three-column PDF-only menu makes browsing on a mobile device more challenging.Last ClickBrew Shop The Brew Shop is not really a restaurant website, but it is still worth mentioning. The site establishes personality at first sight with a hilarious photo and beery good humor. It backs the funny with substance, such as a very usable e-commerce system, effective copy and scannable icon-enhanced navigation. Especially nice are the swaths of red as call-outs and the subtly scrambled type.Related PostsYou may be interested in the following related posts:Corporate Website Design: Creative and Beautiful SolutionsShowcase of Sweet Chocolate WebsitesShowcase Of Delicious Coffee Websites(al)© Sam Wilson for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: showcases

  What do corporate websites have in common with other people’s children? Three things: they have their charm, like finger-paintings on the refrigerator; they can be useful, if infrequently; they are usually admired only by the people who created them.While designers know that a user’s experience on a website has a large impact on the way that customer will interact with them, impressing that concept on the corporate establishment has taken a very long time. Trends in design are making their way into corporate web, albeit slowly; with patience and a little luck, businesses will soon start to consider carefully coded and appropriately functional design as important as their mission statement and recent sustainability reports.One unfortunate fact is evident above all else: despite having plenty of money at their disposal, many corporations are lost in sterile MS Word-esque designs that are more stagnant than a museum exhibit… though at least museums have dinosaurs and mummies and stuff. Here’s hoping we all will get new corporate clients soon.Below, we present some interesting corporate websites, although the insight they offer may not be immediately apparent. This review is not about aesthetics or visual appeal, but rather about the design solutions the sites exhibit. In fact, corporate websites aren’t as visually arresting as you might think, so if the appeal isn’t immediately apparent in the previews below, take a moment to visit and interact with each of them.[Offtopic: by the way, did you already get your copy of the Smashing Book?]Beautiful Corporate WebsitesLevi Strauss & Co With its website, Levis demonstrates that it has not only a strong flair for style and interactivity, but a rich sense of history. Hover over or click the photographs to see some of the company’s defining moments; ever known for its sense of identity, Levis draws you into its past, present and future, excellently breaking through to customers and inviting them to stay.McDonald’s By simplifying and softening the navigation, McDonald’s opens the entire screen up to use as canvas for their product. Harmonious colors in the typography complement the food (and exploit the visual association with hamburgers), while the vivid photography does not obscure surrounding elements.Starbucks Gentle colors and careful hierarchy of elements aside, Starbucks’ strength is in the details. The navigation exhibits an attention to hierarchy not often seen on corporate websites, while offering alternative destination links, should you find yourself in the wrong section. Such consideration for the user would be a welcome trend in design going into 2011.Sony You’ll see that this is a link to Sony Canada’s website. While the navigation and theme is the same as its American counterpart, the experience here is different: here you can see short films in which people relate their experiences of how Sony technology has enriched their lives. Best of all, a floating meter lets you sort stories into categories, giving you control of the content. Brilliantly executed.The Ones You Would ExpectAdidas Few websites employ a grid design that is at once so rigid and flexible. Individual modules expand and contract to allow for dynamic exploration—a lot of fun, particularly because the website has so many parts to explore. The only thing to note is that images do not obviously reflects the content they open to display, necessitating the standard top-menu — an important point in usability.Citroen While the technique of using tiny images to fill a shape has been done a million ways, Citroen takes an old technique to the next level. Draw your cursor across the world to see the photos dance around it, beckoning you to select a region. An excellent use of a landing page, effectively drawing in users without information inundation.Fender Guitars While you may need to be a guitar player to fully appreciate the beautiful lines and tones of Fender products, you need only a pair of eyes to appreciate the simplicity and functionality of Fender’s website. Unobtrusive navigation at the top and hot links lower down make way for a large stage on which Fender can showcase the stars of its website: its beautiful instruments.Heinz One of the most recognizable brands in the world, Heinz has intelligently focused its website on its consumers. Rotate the globe by clicking on photos to see simple recipes from around the world. A design brilliantly suited to users of any skill level, Heinz has found a new means to engage their customers and entice them to visit more.Prologue Films Any company that designs opening credits and effects for movies needs a keen aesthetic sense, and Prologue Films’ visual dynamic is evident on its website. A clean grid with gray tones puts the company’s custom type and effects (an impressive collection) front and center, the same technique made famous by artists and photographers. Using a pop-up window for the content, though, is ill-advised.Rolex The beauty of this website is in Rolex’ masterful attention to detail. With the gorgeous products on display, the eye almost misses the clever tricks contained therein, such as the clock face that adjusts to your time zone. The intuitive user experience reinforces the notion that great design blends together. When it works right, it’s seamless.Steinway & Sons Lucky for us, Steinway invests as much effort into its website as it does into its pianos. Elegant type and warm subtle imagery grace this design and project an image of quality, undoubtedly the intended effect.The Ones You Should Have Thought OfAflac While a blue and white palette is nothing new, Aflac has mastered the use of subtle gradients to enhance type. Smartly assembled, this site is intuitive and easily digestible. The clever part is the horizontal scrolling frame, a visual hook aptly used here to display customer testimonials.American Standard A gorgeous website; American Standard exemplifies grid design, employing the majority of frame as a news scroller. Intelligent use of color, elegant type and thoughtful spacing make this website particularly easy on the eyes.Avery Dennison At first glance, this might look like the website of any old manufacturer of office supplies. At second glance, though, brilliant little touches leap out:: the subtle grid, the attention to readability, the side-scrolling frame that harmonizes type, color and imagery. Oddly dissonant, the side and top navigations make this website looks almost as if it were a composite of different designs over time, a curiosity.Con Edison While the Con Edison website doesn’t have much to look at, the section for the annual report has been capably executed. Great attention to space, clean type and subtle movement are all used to great effect in this section where Con Edison addresses its corporate responsibility.Grow Interactive Most interactive firms don’t have exciting websites, which makes Grow stand out all the more. Grow demonstrates an expert use of type and illustration, moving your eye in perfect circles over the page, and nuances like the small interactive animals along the footer make it stand out among its peers.PGI (formerly Premiere Global) Here is another rare instance of a Canadian version surpassing its regional siblings. A playful take on the boxed blog/corporate theme, the website for PGI puts an interactive panel into the fold, an attractive way to draw users further into the website. The layout and color elements are evidence of authentic design acumen.Rohm and Haas This Fortune 500 company knows how to engage visitors online, with interactive features coming from every angle. The innovation in its products is reflected in the playfulness of the website, which encourages users to explore. Careful, effective use of otherwise familiar textures and themes support an engaging concept, to good effect.Society for Environmental Graphic Design While the inclusion of an organization of graphic designers in this showcase is no surprise, SEGD shines in its presentation of simple yet powerful elements. As any designer can attest, bold colorful shapes can easily run a design off course, but that isn’t the case here. SEGD has married vivid color with effective usability, creating a website that is smooth and wonderfully user-friendly.Virb Recently rebranded and redesigned, Virb demonstrates a capable grasp of visual elements even in this placeholder page: good typography, ample white space, soft shapes and forms — akin more to social media than standard corporate toadery, excellently indicative of the target demographic.The Ones You Might Not Know AboutAcro Media A Web development firm that knows exactly when to stick to the grid and when to break boundaries. The most impressive parts of this website are the way certain elements react to hovering, such as the company name in yellow at the top left. Mousing over it flips the logo around to display a toll-free number. Clever.AgencyNet Interactive The spirit of AgencyNet is clearly the team of creatives behind its work. Showing the team at work (and play) behind the scenes in the office is refreshing, well executed and a great way to engage viewers to learn about the company.AmoebaCorp A small creative firm, AmoebaCorp shows expert use of type on its website. The type establishes a strong hierarchy, enabling the content and navigation to coexist on the left without confusing the user about functionality.Imaginary Forces Less is more with Imaginary Forces, which displays its brilliant work as prominently as possible by cluttering the screen as little as possible. Even without the showcased work, the website would stand out: take away the grand images, and you’d still have a clever arrangement of type and navigation, which is more than can be said of most websites.Kurylowicz & Associates This Polish architecture firm has produced a website that bleeds inspiration from every pixel. Elegant in its use of gray tones, this website combines line, shape and space in a way no other website does. Perhaps it took an engineer to think abstractly enough to design with such abandon, but the result is brilliance online, from start to finish.Vancouver Convention Centre Aside from the harmonious colors and subtle grid that frames the content, the Vancouver Convention Centre succeeds by going the extra mile to make its website visitors feel local: the “Cheers!” factor in action. Not many websites impart a sense of belonging with their welcome; that this one does makes a strong case for using heart as a design tool as much as shape, color and texture.What Have We Learned Today, Bobby?Finding beautiful corporate websites proved to be quite a challenge, and we had to make a number of unusual choices along the way. We sought regional versions of international websites, for instance, because multi-national companies present a number of differences among their sister websites. Bizarrely, did you know that many Fortune 500 companies don’t even have websites? Or worse, have non-working ones?Admittedly, the word “corporate” is pretty loose in definition here. For the sake of impartiality, we did not discriminate by industry or field. We were more interested in collecting websites that employ interesting techniques. Because innovative and fresh stand out on the Web whatever the industry, putting aside traditional definitions is crucial.For further reading on corporate websites and design, you may be interested in Corporate Blog Design: Trends and Examples, published August 2009.Would you like to see more similar showcases on SM? Would you like to see more similar showcases on Smashing Magazine?customer surveys (al)© Bobby Foley for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: showcases

  For designers approaching a deadline, coffee is a delicious necessity. Lucky for us, having a coffee break is not really difficult. But it’s more than just a 3am fix. With every late-night run to the local coffee house, we contribute to a populous network of coffee trading, sales and experience.And in fact, coffee houses and suppliers are quite a business, with online presences ranging from simple layouts with striking typography to advanced layouts with remarkable photography. Coffee websites: how do they look like? What do they have in common? What metaphors, visuals and typography are they using? Well, this is where this showcase comes handy: let’s take a closer look at tasty coffee websites and examine their distinctive features and peculiarities.[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]ShowcaseFar Coast Rustic oranges and blues are at play Far Coast’s website, with hints of distressed textures for an even more vintage vibe. The top navigation bar complements the large images that span the bottom, and the size of the centered text balances these for a pleasing look. Contrasting the richness of imagery is a neutral background, as well as low-opacity shots on either side.Gorilla Coffee Thick lines, a dark two-toned palette, heavy shapes and an urban setting remind the user that coffee can be just as enjoyable when sipped in a fast-paced city as in the mountains. Flash in use.Ipsento Coffee Instead of working with generic templates, Ipsento Coffee provides truly professional photography, displaying various navigation options in a quite unusual but attractive way. No links, no pages, no frustration with poor navigation. Ipsento shows that you can be complex and professional in design without having to indulge in equally complex development.Coffee Club It’s no accident that the word “Indulge” emphasized in this design. With the aerial view of the natural setting, multiple areas of primary and secondary focus and beautiful balance of features, you’ll be indulging in this design as much as the Coffee Club’s menu.America’s Best Coffee Roasting Company Balance is key in this design, and in many ways. America’s Best balances the abundance of gray tones in the big background image with a few shots of bright blues and rusty reds. In the same vein, the small text on the right side of the text area is balanced by the large focal text on the left. Overall, this text and link area is centered in the design. There are subtle balances as well: the “heavy” part of the picture is the top right, balancing the logo on the left.Pura Vida Lime green isn’t an obvious tone to associate with coffee, nor with a website. But Pura Vida uses it to embody the qualities of its coffee: fair-trade certified, organic and shade-grown. The tone is cooled down by the rich browns, crisp whites and suede neutrals.Seattle’s Best Coffee The most interesting part about Seattle’s Best Coffee website is its interactivity. You can rotate the cup to reveal different information about the company, its partners and the coffee. As the website says, “Go ahead. Take it for a spin.” Your design taste buds will be satisfied.Café Henrici With a simple “flip” of the menu, you get all the information you need about Café Henrici. Café Henrici’s use of perspective in the layout image draws users into the scene, making them feel as though they are sitting at a round table in the Café, sipping a steamy cup.Sweet Sallie’s Bakery & Cafe Though Sweet Sallie is as much a cafe as a bakery, its website exemplifies the cute-cupcake vibe found in many bakeries. With various blues, lavenders and teals and a feminine background pattern and type, this website’s all about baked-goods deliciousness. The cafe is simply the cherry on top.Influx Café With a design as modern as the furniture in the photo, the Influx website is sure to please. On the home page, we are first presented with a sped-up video of goings-on in the cafe, giving us a fly-on-the-wall look at the cafe… and some tasty-looking muffins. From there, users can navigate to the sub-pages, which continue the clean palette.Tapped & Packed Coffee The Tapped & Packed website combines the beauty and simplicity of modern design with traditional charm. A simple yet elegant palette of deep grays, crisp whites and soft yellows is combined with crisp lines to give a modern touch, while the serif fonts and roman numerals lend traditionalism.Caravan Caravan’s website (or rather “Coming Soon” page) is decadent in rich grays and browns. Crisp whites bounce off the dark tones in both serif and sans-serif fonts, giving the typography a professional look. The background image gives us a view of its modern product design, which reflects the website itself, with its sparse text and neutral color choices.Cilantro Café With drawn images dancing about a meditating man, impulsive swathes of paint and a variety of colors and objects, Cilantro Café reminds us that coffee can be both impulsive and relaxing. Reinforcing this contradiction is the radial balance of links that are off-kilter.Kicking Horse Coffee The classic black and white palette of this website reflects the product design of Kicking Horse Coffee’s cups. The website uses splashes of bright tones to (ahem) kick it up a notch, and it adds slight textural elements for intrigue. The large focal point anchors the design, allowing the designer to make the links and text area large. It’s big, in your face and effective.Robust-ah! Robust-ah’s large photo could have easily overwhelmed this space, becoming a distraction from the information featured below. Instead, the design actually benefits from the large photo, which anchors the rest of the information by giving the structure clean lines and the information a hierarchy. Robust-ah’s design is not what you would expect from a coffee website, with its deep-purple and light-blue tones. However, some things need to be improved here: larger font-size would help, and so would removing text-shadow from some parts of the text.1369 Coffee House This coffee house website may look generic and simple, and that’s because it is. But the generic vibe and simplicity ensure that the large photo and generous information remain clean and organized.Park Avenue Coffee Park Avenue Coffee gives a playful feel with all the vintage charm of its busy patterns, whimsical logos and strong color palettes.Greyhouse Coffee & Supply Co. Greyhouse Coffee emphasizes its menu so much that you have to hover around the bottom or top for the sleek sub-navigation bars to float into view. Design-wise, the menu’s cork background lends organic relief to the modern feel of the other pages.Tre Amici Reminiscent of I Spy books, Tre Amici’s links are scattered across the various photos of its coffee house. With images that skate in and out upon link clicks, Tre Amici shows an interesting, interactive take on the stagnant photo tours of other websites. The transitions in the Flash-based navigation could be certainly improved, though.Dunn Bros Coffee The Dunn Bros Coffee website has multiple textures, including burlap, paper, and photography, to exude a cozy vibe. The aerial view is also quite nice, giving us a few extra textures to enjoy: the blackness of the coffee, the shininess of the mug and the roughness of the coffee bean.Marley Coffee Marley Coffee’s website is aesthetically pleasing, with a simple yet modern palette, lovely Flash and a simple point of focus. But don’t be so quick to click, not until you see Mr. Marley close up, sipping a cup of coffee and peering over the mountains and wilderness.Jones Coffee Roasters Jones Coffee Roasters has a simple website with a simple layout, but the colors are bold and comfortable, and the textures add coziness and warmth. Easy navigation and a homey feel: a workable, beautiful combination.Blaser Café Blaser Café’s website features crisp whites and a no-nonsense, user-friendly structure, which reminds us that coffee isn’t just about sipping brew and enjoying a break. It’s a business. But we all know what all work and no play leads to, and so Blaser Café adds a fun touch, too, with whimsical image transitions on the home page.A Chacun Sa Tasse A Chacun Se Tasse lets us take in rich screen-wide images of its coffee house while reading information in an elegant gray information box. Sifting through images requires only a quick hover on the right side of the page, with no jolting image or page transitions.Turquoise Coffee At the opposite end of the color spectrum is Turquoise Coffee, which uses calm neutrals, muted turquoises and subtle splashes of unexpected tones to grab the user’s attention. The website may not be as flashy or inspirational as some others we’ve seen, but it’s pleasant, easy on the eyes and user-friendly, and it gets the job done. It reminds us that simple isn’t so bad. The line-height and padding could be increased though.Looney Bean Roasting Company Nothing says decadence quite like red. And nothing is a more perfect match than red and subtle khaki neutrals. Reds and beiges may not be the go-to colors for coffee products, but here they play off the large coffee-swirl background to emphasize the coffee’s creamy delectability, rather than its high-energy potency.Storyville Coffee Company This website is tasty enough on the low bandwidth option, but go high bandwidth if possible. Here, everything says rich: the warm tones of the large transitional images, the rich grain in the borders, the page transitions, the balance of information on the secondary pages, the decoration upon link-hover and the elegant, deep-toned pattern background. The coffee is “artfully roasted,” and the website is certainly artfully crafted.Bean Exchange Coffee House History comes alive on the website for this old Philadelphia coffee hub. The coffee house communicates its rich history in the look and feel of the website, with every bit of ornateness, palette and structure contributing to the theme.Java Cabana There is such a thing as too much of a good thing, and certainly in the case of color. But Java Cabana’s heavy use of brown—typical of coffee websites—isn’t overbearing, thanks in part to the texturing of most of the brown elements, which help to break up the monotony. In addition, the steel accents bring a gray neutral that breaks up the brown without becoming an overt accent tone. Add in some great illusions of dimension, and you’ve got yourself a delicious website. Flashy transition effects in the footer of the page could be achieved with CSS3; you don’t really need Flash for that any more.Cuvée Coffee Roasting Company This company boasts, “We take our coffee seriously. But we don’t take ourselves seriously.” It may sound like a cliché, but if its design is any indication, Cuvée Coffee is being honest. With fun cheesy yellows, handwritten fonts and playful graphics, the website feels as whimsical as it is professional. The palette stays grounded in warm hues, helping to maintain professionalism and hint at Cuvée’s birthplace: the arid state of Texas.Café Britt An abundance of imagery is on Café Britt’s website to stimulates several of the senses. The stainless steel logo against the rich gray background convey the professionalism of the company. The wood and plant imagery in the navigation bar and footer brings a natural aura. We also get an intimate feel from scrapbook-like elements such as the handwritten fonts, old-paper textures and painted scenery on sub-pages. The website is wide, but that helps to accommodate the abundance of content.Paul Dequidt Torrefacteur Soft plays on opacity and drop-shadows give texture to the large white information areas at the center of the page. The large background contains the palette from which all tones are pulled. The dimensions could be overwhelming, stifling any smaller images in the text area, but the large image in the white section maintains equal proportions. In addition, we get a definitive sidebar and two-column balance, adding stability to the layout.Cafeshop Especial Dimension, texture and the colors in the links and sidebar ensure instant recognition of important sections, while the soft background adds a neutral base and subtle interest.Swiss Water In the rotating pictures, you’ll find women talking to one another over a cup of coffee, women enjoying a solitary cup of coffee, women sipping coffee while working. These scenes highlight coffee’s status as both a vehicle for social interaction and an occasion for brief solitude, and they form the largest part of the website, above the fold and in your face. The soft blues and whites minimize the distraction of the top links, search box and the like. Even the logo takes a back seat to the driving concept: coffee’s friendliness and warmth.Café Théâtre de la Marionnette It’s not often that a torso with a coffee-cup head descends from above on strings and slides down the page, but with a name like Café Théâtre de la Marionnette, the sight is not surprising. Neither are the rustic textures and intriguing images (such as the doll-like dresses). But what keeps this website in the modern era is the beautiful development, which gives us a realistic bounce as each page loads.First Colony Coffee and Tea Using a mix of old and new design, First Colony Coffee and Tea definitely breathes new life into tradition. The serif fonts, black and white imagery and crest in the logo create a colonial vibe and take the edge off the stark modern yellow in the image and background. With the expansive space along the right side and abundance of text, this website could easily have been boring at first glance; but the focal point comes to the rescue, with the smooth sway of steam from the coffee cup and the soft scrolling of the background image.Juan Valdez This website gives us more than a warm welcome. Here, we are personally greeted by Juan Valdez, we traverse the rich countryside scene, and we enjoy all the animated goodness that this design has to offer. And if you don’t have time to take it all in, you’re in luck: the easy navigation makes the content extremely accessible, an advantage that many heavy websites don’t have.Lavazza Lavazza’s neutral brown background emphasizes the big links of rotating coffee cups that occupy most of the page. The neutral background also accommodates bright tones that run the spectrum. These whimsical touches are balanced by a simple white font for navigation and darker browns for drop-shadows and highlights.Café Rouge Various textures create a warm, entertaining vibe on Café Rouge’s website. The textured background, rough paper, old stickers and supple light are just a few of the touches that make this website cozy. The movement in the photos and scrolling images below add flare.Anodyne Coffee Anodyne’s website is simple. Its coding is basic, and its design is line-based and simple, which might cause some designers and developers to cringe. However, with the Web now so obsessed with bells and whistles, seeing a simply coded, simply designed website is a breath of fresh air. The traditional serif fonts hearken back to simpler times. What would be really necessary, though, is to replace an image used under the header to display opening times and the address with simple text that would have higher contrast against the background.Dôme Café Like Café Rouge, Dôme Café uses a variety of textures to make the user feel cozy. The rotating images add excitement, and elements such as the white ribbon in the logo and the trim around the links instill tradition.Double Coffee Double Coffee matches its big imagery with big text, big text areas and bold white fonts, achieving proper balance. Red runs rampant across the website in different hues and tones, bringing consistency and cohesion to the website. Adding to the cohesion are white cups, dishes and creamers that mirror the font. It’s proportionately spot-on and features interesting touches, such as a credit card. The consideration for all of these basic design principles make the website appealing and make us want to stay for one more page.Kaffebrenneriet Like the Far Coast website, Kaffebrenneriet balances big rich imagery at the top with a neutral brown and taupe bottom, as well as focused images and simple fonts. Shadows set off the logo and two navigation bars, and the play on opacity and light make for an overall professional feel.Mugg & Bean The dominance of one color, the balance of the large imagery and text areas, the traditional white font and the accent tones make this website easy on the eyes. Drop-shadows, reflection effects and beautiful image movement make it look even more professional.Old Town Old Town plays up its name in this design, with its yellow-sepia blend in the background, the old village nestled in the countryside, the italic serif fonts and the flock of birds in the sky. We also get a touch of modern, with scrolling videos on the billboard and an animated delivery truck. The heaviness of the billboard is balanced by the town, and together they are balanced by the six links along the bottom, which reveal sub-navigation in white boxes upon hover.Copper Door Coffee Roasters A multitude of textures, along with paper, wood and nails, give this website its natural look. The nice handwritten font for links and page headers and the drawn lines under hovered links punctuate the naturalness. Warm greens and oranges bring out the equally warm hues in the textures.ROM Coffee Bar The circle of ROM Coffee Bar’s logo is reflected throughout the website, providing continuity and visual interest and giving the crisp whites and steel blues a softer feel.Quills Coffee Big images, fonts and links provide balance, while the contrast of font types adds variety to this big neutral design.Melitta There’s no better way to involve a user in your product than by simply throwing them into the scene. Most coffee websites do this with a close-up of coffee or a large static image of customers enjoying the atmosphere. Not Melitta. Melitta puts us at eye level with the rest of the coffee shop’s patrons, making us feel as if we too are sitting and sipping. We get a large view of the coffee shop’s charming exterior, and we can even watch as the patrons move, change and enjoy the experience. What’s best is how large the graphic is, giving us a full-on view of the perfect Melitta experience.Related PostsYou may be interested in the following related posts:Showcase of Sweet Chocolate Websites“Meet the Team” Pages: Examples and TrendsShowcase Of Beautiful Vertical Navigation DesignsBeautiful eCommerce WebsitesThe Unusable and Superficial World of Beer and Alcohol WebsitesWhat If Oscars Were Given To Movie Websites?Principles Of Minimalist Web Design, With Examples(al)© Katie Thompson for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: showcases

  The word chocolate can be associated with many words: dark, white, milk, hot, sweet, spicy, etc. But have you tried to combine it with the word web design? We did. We searched the Web for websites in any way related to chocolate and what we found is worth to be collected in this showcase. The interesting thing is that you would probably never stumble upon some of the sites, so the overview below may provide you with a unique perspective and get your creative juices flowing.As one would expect, chocolate website often use an appetizing brown dominant color. If you take time to look at the panel of colors associated with it, you will find out that there is a lot of combination working really well. Apart from this component, each site is unique and features an original identity, depending on product presentation and given information.Feel free to explore the designs featured below. Some of them are nice examples for Flash used for product presentation. Some designs are very classy while others are more artistically designed. But they all have in common this fascinating sweetness everyone loves.[Offtopic: by the way, did you know that Smashing Magazine has one of the most influential and popular Twitter accounts? Join our discussions and get updates about useful tools and resources — follow us on Twitter!]Similarities In Chocolate Website DesignsWe found out that there are three common techniques that seem to crop up over and over again on various chocolate-related websites. A vast majority of the sites use a horizontal top-navigation, brilliant product and ingredient images as well as a dark brown color scheme which is often combined with vivid, strong colors.CharlesChocolates: the bright blue color scheme here is fun and fresh, but the thick footer navigation is what really makes the CharlesChocolates’ site stand out.The navigation patterns are mostly common and convenient, however we’ve noticed quite a few uncommon navigation menus as well. The interesting part is that we’ve seen only a couple of typical boring stock templates. Apparently, most chocolate and confectionery website owners do care about their branding and their unique presentation on the Web. In fact, many sites try to be playful, creating an engaging, interactive and memorable user experience. That’s not something you will see in every industry, e.g. certainly not among medical websites.Horizontal Top NavigationBecause chocolate websites vividly highlight product and ingredient images and therefore fill a large part of the layout with visuals, the choice of horizontal top navigation seems quite appropriate. The number of navigation options varies from five to nine links per navigation menu (excluding sub-navigation links). The most common navigation links lead to pages describing the manufacturor of the chocolate, shops where the chocolate is available and “gifts” pages where users can order business gifts, wedding gifts etc. Sometimes the navigation also contains a link to the recipes page.Jeff de BrugesOffsetting each navigation element with it’s own double border makes each link stand out and adds visual interest to the header.Godiva ChocolatierPlacing the navigation directly under the header works well on the Godiva Chocolatier site.Jacques Torres ChocolateHaving the top navigation highlighted by a thin orange border makes it more visible to new visitors.TCHO: Buy Dark Chocolate and GiftsThe top navigation here is simple and a bit on the minimalist side. Placing it above the bold header text makes it stand out a bit more.Chocri chustomized chocolate barsClassic tabbed navigation works well with multi-colored text and a subtle gradient.The Chocolate Bar – Reno, NVA minimalist top navigation bar directly under the header is made more interesting through the use of transparency. Notice that there’s also secondary navigation in the footer.Cadbury: Cadbury ChocolateA simple, traditional top navigation bar is user-friendly and almost always looks good.Product and Ingredient ImagesThe quality of product photography on chocolate websites is remarkable. Images are often large and dominant and are given a lot of both horizontal and vertical space. In fact, chocolate, especially gourmet chocolate, is often very visually interesting. The ingredients that go into it can also be very aesthetically pleasing. So it only makes sense that a lot of designers are opting to include mouth-watering images of the chocolate being sold on a given site.Festival Internacional de Chocolate de ObidosThis site of a chocolate festival uses a striking background image as well as a nice chocolate photos on its main page.Green & Blacks Organic ChocolateThe broken chocolate bar used here gives a casual look to the site, while the embossed logo helps reinforce the brand.Dagoba Organic ChocolateThe combination of chocolate with blueberries and lavender reinforces the organic nature of Dagoba’s chocolate bars.Mindy’s Hot ChocolateAn almost-macro image of chocolate shavings in a chocolate martini, combined with other images of their offerings sets apart the Mindy’s Hot Chocolate website.Patrick RogerTobleroneToberlone opts for limited product images, but including just a couple of well-placed images can have a positive impact.Haigh’s ChocolatesA large, close-up image of the product adds a ton of interest here without overwhelming the otherwise simple and minimalist design.ChocomizeShowing the variety of possible chocolate bar customizations can go a long way toward enticing visitors to create (and order) their own customized chocolate bars.Brown Color SchemeObviously, dark brown color scheme dominates on chocolate websites. However, very often the scheme is complemented with vibrant, dynamic colors such as bright green or red. In general, most sites do stick to the dark scheme, often with tiled or photographic backgrounds which are closely related to the main theme.Dove ChocolateThe Dove Chocolate site has an almost exclusively brown website design, with varying shades used to offset different parts of the site.Divine ChocolateThe Divine Chocolate site uses brown in limited quantities, but it’s still prominent in the design.ValrhonaDark brown used throughout the design of Valrhona’s site makes one think of dark, high-end chocolate.HemmankonditorVarying shades of brown, from the very dark brown (almost black) of the background to the lighter browns of the navigation and header are all evocative of the many varieties of chocolate out there, and what can be made with them.Promise Me Chocolate…The combination of dark brown and pink works really well together, especially on a site specifically targeting brides-to-be.The Cocoa TreeUsing brown as an accent color sets apart The Cocoa Tree’s site. It feels fresh and light, something that’s often hard to accomplish while still bringing to mind chocolate.Brookside FoodsThe Brookside Foods site brings together various shades of brown with black and gold to create a high-end looking site.Unique DesignsSome chocolate websites fight for user’s attention with striking design elements and unconventional navigation schemes. Some of them are presented below. In these cases, (for site owners) the engaging and memorable user experience seems to play a very important role.Max BrennerThe Max Brenner website is set apart for a few reasons. The right-hand vertical navigation is one reason. But also the retro, grungy design with the animated eye (you’ll have to visit the actual site to see it).BloomsberryThe animation used on the Bloomsberry site is interesting and very well-done. The navigation is also atypical, with links easily identifiable but scattered throughout the main part of the home page.Pierre MarcoliniThe Pierre Marcolini site is very minimalist, with not a trace of brown showing up in the main part of the design.WispaAnother site that uses no brown in the main design, but instead opts for colors reminiscent of the product’s packaging rather than its contents. The hand-drawn elements also make it stand out.Chocolate Research FacilityThe animated chocolate dripping onto the screen is a bit gimmicky, but also adds a lot of interest to what would otherwise be a very simple site.More Chocolate Website ExampleszchocolatKommunarkaPionirChocolate EditionsIcamSpartakChocolatfreyKambly SAAskinosie ChocolateRelated PostsYou may be interested in the following related showcases:Showcase Of Beautiful Vertical Navigation DesignsBeautiful eCommerce WebsitesThe Unusable and Superficial World of Beer and Alcohol WebsitesWhat If Oscars Were Given To Movie Websites?Principles Of Minimalist Web Design, With Examples(jb) (cs) (mm) (cc) (vf)© Smashing Editorial for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: chocolate, showcases

  Vodka, pickled cucumbers and Pope John Paul II might spring to mind when someone mentions Poland. Obviously there’s more to Poland than that. On the world map of design, Poland is marked by creative agencies that produce high-level design and employ some of the best programmers in the world. There’s also a crowd of freelancers and visionaries who have received worldwide recognition.For the people I interviewed, Web design is life. The art directors and freelancers highlighted here work in all sorts of environments, and they answer questions related to our field. You’ll have the opportunity to see Polish Web design from a number of perspectives — and to form your own opinion while browsing selected productions.[By the way, did you know we have a brand new free Smashing Email Newsletter? Subscribe now and get fresh short tips and tricks on Tuesdays!]The State Of ThingsQuestion: Can you name some of the milestones in Polish Web design? What are the biggest and most important productions in recent years?Jacek Opaluch of K2 Internet: If milestones are things that have changed the perception of Web design, we have to mention Internet locations, events and designs. In my opinion, the locations would inlude mocnweb.pl, a forum that no longer functions and is probably only remembered by people over 30. It was a place where people could share their initial experiences and which, if I remember correctly, had the first carefully selected catalogue of Polish Web designers’ websites.Then there was the everlasting webesteem.pl, steadily breaking records as the website with “the layout that never changed.” There were always several people around — some significant, like Bartek Gołębiowski, Jędrek Kostecki, Bartek Rozbicki, Wojtek Krosnowski, Wojtek Piotrowski, Piotr Łupiński and Łukasz Twardowski — whose attitude toward the Internet undoubtedly had great influence on thinking and design. There were many more people whose names I don’t remember, unfortunately, for which I apologize.Chopin2010.plCertain designs are stuck in my mind. These were well known, not just in Poland, and sometimes they were great examples to follow. Some have been replaced by newer versions, so giving the URLs here might be pointless, but they definitely include: Max Weber’s pdk.pl, a Flash portal with much character (probably the first in Poland); Nokia (created by K2 Internet); plama.art.pl and its subsequent versions; feta.pl; Sullivan’s Productions; click5.pl; Ars Thanea; cookie.pl; and recently, StudioKxx and huncwot.com. These are all first-class websites. Unfortunately it’s impossible for me to name every excellent website.In my opinion there were two other crucial events that gave shape to things: agencies went public (a sort of goodbye to the formative years of Web design) and eBay debuted in Poland. These events showed the quality of our service and proved that the Polish internaut had been highly underestimated abroad.Question: Are there any significant differences between Web designing in Poland and in the rest of Europe when it comes to artistic development?Jacek Opaluch: There are differences in budget, in the attitudes of clients and in understanding the Internet’s potential. Statistically, I don’t see any difference in the quality of the things we do: we win awards, we are jurors and we build among the best of the websites that present outstanding design — just like the rest of the world. Zakochaj się w kolorze.Kamil Kaniuk of Merix Studio: Polish programmers and coders are generally well regarded, which results from our observations and experience — often in cooperation with foreign firms. Numerous highly skilled Web developers are in Poland whose code is of world-class quality. Here at Merix Studio, we are searching for such people. The skills of our coders have been appreciated by the British company Independent News and Media, which prepared a series of test tasks for us before they decided to commission us to work on their leading brands (The Independent and Herald, for example).We are less inspired by Flash achievements and augmented reality (so popular right now) than are other interactive agencies in Poland. We are more interested in the productions of smaller flexible firms such as 37signals, nclud, Reactive and Clearleft. We invest in flexible and cost-optimal open-source software (Drupal, WordPress, Magento), because it can easily substitute for expensive commercial solutions.Open-source software is regarded slightly differently in Poland than it is in Western countries; the opinion that any self-respecting interactive agency should have its own original content management system (CMS) still prevails here, but this is not so. Just look at the US government: Whitehouse.gov is based on Drupal.In the current period of economic slowdown, Western companies are looking for ways to reduce costs while maintaining good quality. Many companies outsource to such countries as Poland, and these companies often have funds at their disposal that allow them to be more open to creative ideas. This is encouraging for Polish Web designers.Warszawska Jesień 2008Question: When was the starting point of innovative Web design in Poland? When did new media settle in Poland for good?Łukasz Twardowski of Cookie.pl: The first thing I remember from the Internet was an interactive advertising campaign for Frugo juice. The campaign was created by an agency, and it was the first Polish viral ad. It probably significantly increased interest in the Internet as a medium for advertising, and it collided with the so-called “Internet bubble,” which burst before any innovative design came into being.Still, this was the time when most designers I admire became active. Some independent websites on Web design were created, like Mocny Web or Webesteem. They attracted people who already thought of themselves as designers for new media. Looking back, I see that what pushed us forward was energy and optimism rather than skills and knowledge.I think we became aware of both (i.e. skills and the role of Web design) about three or four years ago, but the awareness wasn’t strong yet. The major problem with Web design in Poland is that the best interactive agencies give priority to advertising, and design is a secondary issue. Small clients such as photographers and architects, who might desire and deserve the best designs, often don’t have enough money to employ professionals. It’s great to see, though, that cultural institutions have more money to spend on the Internet, and they spend it wisely.Question: Is it possible to identify specific patterns in Polish Web design? Is every significant website really different from all the rest?Łukasz Twardowski: I wish Polish Web design had German discipline, Scandinavian simplicity and our knightly imagination. Polish designs are often much more daring than those of our neighbours. Still, if we want to develop our philosophy of design and be visible to the world, then we have to make more effort.The economy in Poland has been improving, and the only thing we need now is more energy and optimism. Mocny Web died naturally, and Webesteem is on its last legs. What we lack is a central forum where young designers (in a sense, all of us are “young”) can see the spectacular Web designs and discuss them.Flirt CampKamil Kaniuk: We think that in Poland there are still no styles in Web design that would distinguish our country from others — that is, that any styles are unequalled. Although one could fairly easily enumerate some common features of designs created elsewhere (the meticulous detail and profound illustrations of Russia, for example, or the graphic-rich interfaces of the United States), no specific style dominates in Poland. However, the “transfer of ideas” (say from West to East) is much faster now than it was a few years ago.Too often a design is a compromise between the vision of the designer and the requirements of the customer. Such designs tend to undergo amendments by the customer, which can change their original form. In our opinion, the openness of customers to modern solutions (e.g. non-standard interfaces based on JavaScript, like Xpiritmental) is less common in Poland than elsewhere. Foreign customers seem to be more open to our ideas and give us greater freedom, and they are ready to make use of technologies like JavaScript and AJAX.That opens the gate to creativity and gives the freedom to implement interesting solutions. In many Polish agencies — including those that work with big brands and budgets — some cheap and mediocre designs are created out of necessity.Kula.gov.plQuestion: What is it like to work as a freelancer in Poland? Is it drudgery or a stress-free job? Is it about keeping loyal clients or constantly searching for new ones?Jan Stańko: We shouldn’t generalize; every freelancer is different. Starting off is definitely difficult. Without a strong position in the market, you have to look for clients on your own, and you have to convince people that you are trustworthy and deserve opportunities. There are plenty of freelancers, but unfortunately the majority of them are young and immature and have no idea about the business. They finish school and immediately call themselves professionals. It can end badly: very often the honest designers who treat the profession seriously and think of it as their future have to suffer the consequences.In time, the serious freelancer gets clients and agencies start knocking on their door. Then you can choose the tasks you like the most, and that brings more money. Work gets difficult when you want to earn more money; it can mean sleepless nights, gallons of coffee and in my case, unfortunately, plenty of cigarettes.There are moments of anxiety as well, usually brought on by people who pretend to know everything about the Internet but actually know very little. I guess the best solution is to cooperate with agencies on a regular basis. Agencies can take the burden of work overload and stress off your back. Also, their complex services give you the opportunity to meet more interesting clients. As for the future, time will tell. I’m not even halfway through my career. Trophies are still a long way ahead!BuboleRafał Nastały: Earning one’s living as a freelancer in Poland without a recognized name can be incredibly tough. Independent clients often don’t want to sign contracts or pre-pay. They also think that preparing a layout is a piece of cake, so when they hear the price, they often back out. It’s very frustrating. It’s much more pleasant to cooperate with several agencies that can give you a fairly constant number of orders.Piotr Biernawski: I have five or six regular clients. Sometimes a client withdraws, and it’s usually because of money. It’s never a disagreement about the terms of the contract but about actually sticking to these terms (payment can be long delayed, etc.). But when some go, others come. I’ve been working with longstanding clients for five years now.Drudgery or a piece of cake? Definitely not a piece of cake. If it wasn’t for my strong connection to the mountains, which I love and where I do my hobbies, I would probably move to a bigger city and look for a full-time job. I also have a wife and child who are not very keen to move. However, I don’t think freelancing is drudgery; I can’t afford the latest model of BMW, but I work only about two hours a day. Even though you need to be psychologically strong to work like this, the lifestyle is great.Łukasz Bronisz: I think it depends on the individual. Everyone arranges their time and work environment differently. Some people prefer working at night and waking up at dusk in order to meet a deadline. Most of us, however, try to work during regular hours. It allows you to be in touch with agencies, allows you to make light changes and corrections and lets you have a private life too.I imagine that freelancing in Poland is similar to freelancing in other countries. It can be hard sometimes because of tight schedules or having a number of projects going at the same time. On the other hand, you always have the opportunity to relax or even take a break for a couple of days. No one arranges your time or dictates your schedule.Also, though, no one checks on you. If you choose to freelance, for which your income depends on how much you work, it’s reasonable to cooperate with several agencies. Doing this usually gives you enough orders that you don’t have to worry about the next month and can concentrate on your work. Of course, it’s always good to look for new projects so that you develop and diversify your designs. Łukasz BroniszKonrad Wysokiński: It’s still quite difficult to get by as a freelancer in Poland, although there are probably some people who don’t have to worry about work or can be picky about contracts. I often get the impression that people still don’t know what good design is or know that it costs money. For many people, the Internet is still a must: “People are talking about it, so let’s make a website — but make it as cheap as possible.” Some company owners have this attitude. As a result they ask someone, anyone, who knows a little bit about Photoshop (a brother-in-law’s daughter) to create the cheapest website possible. Thankfully, this has been changing steadily, like our society in general, and I hope that our sensitivity to the profession of Web design will increase with time.Mateusz Jakobsze: The Web design market in Poland has been gradually expanding. A lot of people freelance to get rid of the constraints of working for agencies. They want creative freedom and to earn more money. Undoubtedly, an advantage to freelancing in Poland is the opportunity to work for clients abroad who pay in Euro or American dollars. The ability to choose which clients and agencies to cooperate with is a big advantage as well. I always try to look abroad for new clients and to network. I have some regular clients as well as a couple of interactive agencies that I often collaborate with. We socialize not only at work but also at parties and unofficial get-togethers. It’s good to maintain informal relationships with your clients. Mateusz JakobszeQuestion: How does the Web design and development market look in Poland? Is it possible to earn one’s living from freelancing alone?Jan Stańko: It is possible, definitely. Many people are self-subsisting freelancers, including me. There are quite a lot of agencies and enough clients, and whether we get by depends on our hard work, consistency and responsibility. When it comes to cooperation with agencies, it usually goes smoothly; it’s the clients who are the weak link. But even that has been changing. The Internet is still a brand new thing for many people. Non-professionals find it difficult to catch up with the news that keeps popping up in the field, and sometimes this can result in misunderstanding.Rafał Nastały: Freelancing is not for everyone. You need to be self-disciplined and consistent to work as a freelancer. When you collaborate with agencies that know how to communicate with clients and that pay generously, you can have a relatively high standard of living.One negative aspect is the lack of credibility at the bank (getting a big loan is difficult), so if you’re not a high-profile Web designer, the best option is to have a full-time job and take additional work from other sources now and then. This creates financial stability. A bonus like that — a well-paid creative task — is actually very nice. There are of course some freelancers for whom one layout is worth more than the monthly earning of others.Warszawska Jesień 2009Piotr Biernawski: It is certainly possible to earn a living from freelancing. I know some people who earn more than ten thousand a month. I’m not talking about famous names here, but about people from small towns, “unheard of” names in our line of business. Considering the time I devote to work, I am not an example of this, but I can afford everyday living: mortgage, alcohol and cigarettes!Łukasz Bronisz: I think that the Polish market is pretty good. It’s a young market. Actually the whole business is young. Polish clients have become more aware of the Internet in recent years. Plenty of talented people are in the trade in Poland. If you know how to organize your time effectively, talk to people and sometimes work more than the standard eight hours, then freelancing is enough to earn a living. The important thing is to be consistent and up to date.Konrad Wysokiński: I’ll quote part of a conversation I had with a colleague, a designer. I asked him once, “Can you earn a living from freelancing?” He said, “It depends on your standard of living.” You can get by, of course, but you probably won’t make a fortune. I often get the impression that in Poland this type of work is considered a craft and is not treated with respect like other “professional” work. We are very far from the image of the Web designer you see in Hollywood movies, who has a five million dollar house with a swimming pool, has his own agent and who is the top Web designer for the most famous brands. Konrad WysokińskiMateusz Jakobsze: It’s not much different from what you see in other countries. We have many arenas where graphic designers can display their work, like themed blogs and Internet forums. The majority of creative agencies and independent clients look for employees that way.Freelance Web designing has been developing in Poland: about a quarter of agencies outsource on a regular basis, and more than a third use freelancers for selected projects. So, there are opportunities to work on different brands for different companies, which is good for both present and future freelancers.Special workplaces and offices have gradually emerged where there is no boss and all the workers are freelancers. We have such a place in Poznań. It’s a great idea to have freelancers from different professions gathered in one place. I hope for more initiatives like that.Question: What inspires you? Do you approach every design differently and enthusiastically, or is it sometimes like mass production?Jan Stańko: Mass production kills creativity, so I avoid it as much as I can. I prefer to do less work better. Then you can show a portfolio that you are really proud of. It’s the only way I work.Honestly, my inspiration comes from the work of other designers, both from Poland and abroad. Behance.net is a really amazing source, vast and rich. I don’t have a specific example, but this ocean of artistic ideas fuels creativity and prepares you to bring your own ideas to life. Then it just flows.Rafał Nastały: When I have the freedom of choice and some time on my hands, I try to make something original that appeals to both me and the client. But it sometimes happens that there are several tasks and the deadline is “yesterday.” In this situation, I bear down and work like a robot while trying to maintain a high quality of work. I get inspiration from the Internet. I regularly visit websites devoted strictly to Web design like FWA, DesignFollow and obviously Smashing Magazine. I also visit DesignYouTrust, FormFiftyFive and FFFFound. You can find plenty of great art and designs from many fields.Piotr Biernawski: Sometimes a free mind, a break from work and lack of inspiration are the best sources of inspiration! I work most effectively after a two-week break in which I do absolutely nothing — but such breaks happen only once in a while. This is why a freelancer needs to be psychologically strong, otherwise getting depressed is easy.As for inspiration, I have bookmarked several links. They are mostly Polish productions, and I visit them now and then. Given how much I work, this may sound strange, but one’s attitude to design makes a difference. Unfortunately for me, the majority of my recent projects were due “yesterday.” A client pays for fast work, and standards have to be met. There isn’t always a sense of achievement when you work quickly, but as long as the client is satisfied, I’m happy as well. Some interesting projects require more involvement. Usually these are not assigned by agencies but by independent clients who come directly to me. Maybe this tells us something?Reserved.plŁukasz Bronisz: I treat every design individually and use new ideas and techniques. When I start a project, I try to get a sense of what the client likes, but I also aim to be satisfied with my own work. It’s nice when everything goes smoothly and both the client and agency like your idea. Working with individuals can be tough; sometimes they just don’t appreciate your effort, which can compromise the result. This is typical both in Poland and abroad — at least, that has been my experience.Konrad Wysokiński: I get inspiration from all around. I sometimes do corporate identity design, which can inspire me. Naturally, I watch the best people at work and keep up with the trends. I’m a fan of grunge design, but very rarely can I use it. Every project is a new challenge for me, so I give my heart and soul to each and every design. I’m never convinced by lines like, “Do it quicker and simpler for a lower price.” I believe it’s impossible to make something look professional without taking a professional approach.StrzygMateusz Jakobsze: Like every creative job, graphic design requires participation. To keep up to date with all the news in both Web and graphic design, I regularly visit the important portals and blogs devoted to this line of work, be they Polish or international. The crucial ones include Behance, Smashing Magazine, DeviantArt, the FWA and New Web Pic. Additionally, I find reading and browsing books on advertising, typography, designing for the Web (including for portfolios, Flash websites and e-commerce shops) and graphic design useful. It can also be a good way to relax and get away from the digital world to some degree.The last (but most important) sources of inspiration for me are sleep and having a life outside of work (away from my computer). Socializing with friends and going to parties, cinema, opera and other cultural events renew my energy for creative work.When it comes to designs, I treat every project differently, but I always try to have a plan, an idea of how to do the project, from beginning to end. I make some sketches, and when know exactly what I want, I get down to work. Every design is a new challenge. I set higher standards for myself every day, and I strive to be the best at what I do.Showcase Of Beautiful Web Design From PolandLech.plTeatr WybrzeżeSony WalkmanModna NokiaMcDonald’s Happy MealBigstarAllegro za kulisamiThetokeMały GłódEurekoGrey WolfCarlsberg LiverpoolSkoda YetiFiat 500 DieselHappiness FactoryBest PhotoRokkaboyFestiwal FetaŻubrOkocimZając MrokuAmica ScandiumKakao PuchatekKalinowe PolaProfiPartnersKFC Longer MixJustyna KowalczykBiblioteka NarodowaNowy TeatrMediations BiennaleMastermCommon WealthPawel LenarFotokodyGreenlineGellweHoralkyFajne ChłopakiShowcase Of Interactive And Creative Agencies In PolandClick5CookieOS3Ars ThaneaArtegenceAdvHuncwotOpcomBlueberry180 HeartbeatsChange ConnectionsHipopotam StudioGolden SubmarineSo InteractiveHonkiPro-CreationHypermediaArt FlashChigo DesignEura 7Infinity GroupInsigniaNetizensStudio SynergiaXoe StudioMedia AmbassadorHotmindDesign-Related Websitesinteraktywnie.comwebesteeminternetmakercsseliteucssfreszkiwebhostingwebinsideRelated articlesYou may be interested in the following related posts:Showcase of Web Design in ChinaShowcase of Web Design in IsraelShowcase of Web Design in RussiaShowcase of Web Design in The NetherlandsShowcase of Web Design in GermanyShowcase of Web Design in MexicoShowcase of Web Design in IrelandShowcase of Web Design in Lithuania(al)© Przemek Matylla for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: showcases

  Members of military and intelligence forces around the world risk their lives daily to defend their countries and assist in peacekeeping and aid missions both at home and abroad. The men and women who make up the world’s defense forces make sacrifices that most civilians wouldn’t consider to serve their countries.So, with everything they do for us, shouldn’t they be represented online by website designs that reflect the honor and responsibility they undertake every day? Unfortunately, that’s not the case in many countries out there. Many military websites out there are some of the worst designs in any industry. Whether they’re outdated, broken or designed by amateurs, some of the websites showcased below are bad enough to make you cringe.There are some good ones, though. A number of countries have obviously dedicated the time and resources necessary to project a professional and polished Web presence for their members. A number of other websites have obviously put in some effort and are pretty close. If you know of examples of other great military or intelligence websites from around the world, please add them in the comments! [By the way: The network tab (on the top of the page) is updated several times a day. It features selected articles from the best web design blogs!]The OutdatedThe websites featured here might have looked great 10 or more years ago (which was likely when they were created). But either their designs haven’t been updated in a very long time or their designers are still borrowing conventions from the late ’90s.Ministry of Defense of the Republic of Argentina Everything from the color scheme to the header image to the skinny three-column layout dates this design.Royal Bahamas Defence Force This website wouldn’t look quite so dated if it weren’t for the drop-shadows behind the content blocks.Bolivarian Republic of Venezuela The overall layout of this website screams early-2000s.Ministry of Defence of the Republic of Belarus Very minimalistic website with a solid background, gradients, tiny links and many &nbsp-empty spaces.Colombian National Police Here’s another great example of a website that would have looked right at home in the late ’90s or early 2000s.Hellenic Navy The thing that dates this website the most is its width: it would look right at home on a screen with a resolution of 800×600.Macedonian Ministry of Defence The layout, the partially rounded corners and the drop-shadow against the background all date this website.Pakistan Maritime Security Agency Using an image like this one as a background was very popular in the ’90s.Serbian Ministry of Defense The layout here is almost grid-like, but it doesn’t quite make it. The color scheme is the most outdated, though.Slovenian Armed Forces Another website that would have been current 8 to 10 years ago.Spanish Armada The rounded colors and glossy buttons would have looked great a few years ago, but now they just harken back to the earliest days of the Web 2.0 style.The Russian Federation Ministry of Defence The design has a striking resemblance to traditional Google AdSense blocks, and the line-height property for the content area certainly should be increased..Sri Lanka Ministry of Defence The color scheme and typography here are definitely reminiscent of Web design 5 to 10 years ago.U.S. Federal Bureau of Investigation The skinny layout, color scheme and overall look of this website feel at least 6 to 7 years old.U.S. National Reconnaissance Office This website screams late ’90s and early 2000s, especially the navigation and typography.Uruguayan Air Force This looks like it was based on a standard template from 5 to 10 years ago.The Poorly CodedThese websites might not have been so bad if they were cross-browser compatible and adhered to Web standards even a little. But they are all so poorly coded that they don’t render correctly in browsers such as Firefox or Safari.Luckily, there aren’t too many of them.Brazilian Army The coding on this website isn’t noticeably horrible… except for all the thin white lines running through the backgrounds and borders of the content blocks.Pakistan Navy I don’t even want to begin figuring out how they got the rounded-corner background to repeat like that in the main content area.South African Army This website wouldn’t be so bad if it wasn’t for the giant gray bar running down the main column, effectively blocking half the content.United States Special Operations Command The headers for all the content blocks here are fine, except the one for the news feeds, which prefers to be higher up on the page.The Poorly DesignedThese websites are just poorly designed. Some look like they were based on stock templates… bad ones. Others look like they were designed in programs aimed at hobbyists or those needing to set up personal websites (in any case, definitely not appropriate for government agencies).Bolivian Army Between the color scheme, the header (which doesn’t come close to spanning the whole design) and the broken icons, this website just doesn’t look good at all.Cuban National Defence I’m not sure where to begin with this one…Egyptian Armed Forces It looks like they couldn’t decide whether they wanted a minimalist website.Republic of Fiji Military Forces This looks like your classic template website, with minor modifications.Ministry of Defence of Georgia This wouldn’t be so bad if the content areas weren’t so disjointed.Indian Air Force This might have been salvageable, except for the horrible alignment.Kenyan National Security Intelligence Service The padding and margins in this website aren’t adequate, and the alignment is off in places. The concept is sound; it just needs to be better executed.Lebanese Army This website might not have been so bad if the colors complemented the camouflage background, rather than clashed with it.The Philippine Marine Corps This is another one for which I’m not even sure where to start.Polish Land Forces Forget for a moment how amateurish this one looks. Notice how the text doesn’t even match up with the navigation buttons.Portuguese Army From the header alone, it’s not so bad. It’s the lower area of this website that doesn’t seem to have any aim.Romanian Land Forces I’m still trying to figure out if that white bar across the top of each column is supposed to be there. Beyond that, they should have paid more attention to how the header colors go with the rest of the color scheme.Royal Thai Army There’s just way too much going on here, and no focal point to grab your attention.Turkish Air Force This almost made it into the “Not So Bad” category below, except that it doesn’t have any focus, and the alignment of some elements is off.Ministry of Defence of Ukraine The ads on this website should be better integrated in the overall design. Other than that, the design looks very dated.United Arab Emirates Ministry of Defence Where’s the content?Zimbabwe Ministry of Defence There’s no color scheme here, and the entire thing looks like something a kid did in class.The Not-So-BadThe websites here aren’t terrible. In most cases, only minor things hold them back. Most of them could be great with just a bit more work.Ministry of Defence of The Republic of Armenia Other than the width of this website (which is a bit narrow for even an 800 x 600 display), it’s not a terrible design.Australian Secret Intelligence Service This design is just fine, other than being a bit boring. And the text could be slightly enlarged for easier reading.Ministry of Defense of Bosnia and Herzegovina If more attention was paid to the baseline or vertical rhythm, this would be a reasonably good design.British Secret Intelligence Service The angles in this design should either be better incorporated into the other elements or removed altogether. Other than that, it’s not bad.Brundeswehr This is one of those websites that doesn’t have anything particularly wrong with it. It’s just underwhelming.Ministry of National Defense of the People’s Republic of China The elements on this website don’t quite have enough continuity, but the color scheme and overall layout are good.Ministry of Defence of the Republic of Croatia This website is also underwhelming. Nothing particularly “wrong” with it, but not impressive either.Ecuadorian Army The header here is great, but the rest of the website doesn’t quite match up, and it feels a bit like a generic template.Ecuadorian Navy Parts of this website are great (the slidehow in the header, for instance) but other parts don’t quite match up, particularly the buttons on the right-hand side and the off-center navigation elements.Armed Forces of Honduras This website isn’t bad. But again, nothing makes it stand out.Norwegian Ministry of Defense Another example of a website that doesn’t do anything to stand out.Peruvian Air Force The idea here is good, but the result isn’t very interesting.Portuguese Ministry of Defense Another inoffensive yet unimpressive website.Portuguese Navy This would be great, but it has just a little too much going on. Some negative space would make a huge difference.Saudi Arabian Ground Forces This website is more interesting than some of the others here, but it doesn’t quite pull it together.Sri Lanka Navy Here’s another website that looks like a template. The use of white space could be better and makes everything look a bit disjointed.Swiss Army Another underwhelming, uninteresting design. At least it looks professional.US Air Force A professional yet boring design. But maybe that’s how military websites should look?US Central Intelligence Agency This website is way too narrow, and overall it’s just not eye-catching.US Department of Defense Too much is going on here, and the social media links (the icons especially) on the left look out of place.US Navy The icons and banners in the header don’t really fit the rest of this design.A Few Good SitesThe websites below are the stars of this post. They are well designed, easy to use, professional and worthy of representing the armed forces and intelligence services.Austrian Armed Forces This one’s clean and well laid out, with plenty of white space and a great color scheme.British Army A professional-looking website, with a background that’s more interesting than most.British Royal Air Force Another website with an interesting background and a clean overall design.British Security Service MI5 The color scheme here is great, as is the overall aesthetic, which is a cross between minimalist and magazine-style.Ministry of Defence of the Republic of Bulgaria A clean, well thought out design that makes good use of textures and gradients.Chilean Navy The header here is fantastic, and the rest of the layout works well.Ministry of Defence and Armed Forces of the Czech Republic Another great header design: this one doubles as navigation. Each section of the website has a different color scheme, while maintaining the same basic look.Defence Command Denmark A minimalist layout that leaves plenty of white space.The Finnish Defense Forces A clean and organized design, with double-tabbed navigation bars.Netherlands Ministry of Defence The purple color scheme here is unexpected, but it works well and sets the website apart.Polish Ministry of National Defense This is one of the nicest designs in this post, especially because of the header.Swedish Armed Forces A good clean design with a minimalist aesthetic and great typography. The transparent titles over the images on the right really take it up a notch.US National Security Agency Professional, easy to use and coherent: everything an intelligence website should be.US Army The US Army website brings together a lot of content of various types while maintaining a usable and consistent user interface.US Marine Corps This website stands out mostly because of the grid used for the main content area and the ample white space everywhere else.(al)© Cameron Chapman for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: showcases

  Propaganda is most well known in the form of war posters. But at its core, it is a mode of communication aimed at influencing the attitude of a community toward some cause or position, and that doesn’t have to be a bad thing. Although propaganda is often used to manipulate human emotions by displaying facts selectively, it can also be very effective at conveying messages and hence can be used in web design, too.Notice that propaganda uses loaded messages to change the attitude toward the subject in the target audience. When applied to web design, you may experiment with techniques used in propaganda posters and use them creatively to achieve a unique and memorable design.In this article, we look at various types of propaganda and the people behind it, people who are rarely seen next to their work. You will also see how the drive for propaganda shaped many of the modern art movements we see today. Notice that this post isn’t supposed to be an ultimate showcase of propaganda artists. Something or somebody is missing? Please let us know in the comments to this post!William Orpen: England, 1917Orpen studied at the Slade School in London alongside the likes of Augustus John and Wyndham Lewis. He produced some of his best work while at the school and became known for his portraits. A friend of Orpen then arranged for him to paint the pictures of senior military officials, such as Lord Derby and Churchill. In 1917, he was recruited by the government’s head of War Propaganda to the Western front to paint images of war-torn France. It was there that Orpen painted his most famous piece, “Dead Germans in a Trench.”Dimitri Moor: Russia, 1917–1921Dimitri Moor (or Dmitry Stakhievich Orlov) changed the face of graphic design in Soviet Russia back in 1918. His work dominated both the Bolshevik Era (1917–1921) and the New Economic Policy (1921–1927). The main theme of Moor’s work is the stark contrast between the oppressive evil and the heroic allies. A lot of pressure was put on Russian workers to rise up against imperialism.A lot of Moor’s artwork was restricted to black and red. Black was generally used for the main part of the poster, and all of the solid colors for the capitalists. Red was used for socialist elements such as flags and workers’ shirts.This is a lesser known poster by the artist, appealing for help for those staving from the Russian famine in 1920. It features the single word “Pomogi,” meaning help. The drawing is of an old man who is just skin and bone. The last stalks of barley are barely visible in the background.El Lissitzky: Russia, 1920El Lissitzky spent his whole career absorbed by the belief that the artist could be an agent for change and good, and his work in a lot of respects shows this. He himself was a huge agent of change in the artistic movements of the time. He was one of the fathers of suprematism, along with Kazimir Malevich; and along with many of his peers, he changed the look of typography, exhibition design, photo montage and book cover design. Most of the modern techniques we see today and that appear in film and modern Kenetic typography are the product of Lissitzky’s work. Beat the Whites With the Red Wedge, 1920One of his most famous pieces, shown below, really embodies Lissitzky’s work. It is so avant garde that even a lay person could recognize the style. The abstract geometric shapes and clear color pallet scream of modernist art, and yet the poster has a real message. It describes the Russian revolution that took place in 1917. The white circle represents the royalists from the old regime, and the red triangle represents the communists moving in and changing opinion. It has been described as a stylized battle plan for communist victory.You might also recognize it from Franz Ferdinand’s album cover:Then in 1921, El Lissitzky accepted a job as the Russian cultural ambassador to Germany. His work influenced a lot of the iconic designs of the Bauhaus and De Stijil movements. His last poster, seen below, was a return to propaganda, with a poster encouraging the Russian people to help Russia build more tanks to win the war against Nazi Germany.Strakhov Braslavskij: Russia, 1926Braslavskij was known for his posters that promoted the emancipation of women. During this time in Russia, the idea of gender equality was growing. Emancipated women were seen to be supporters of the communist agenda, and so they needed to be freed from their so-called duties as wives and mothers.The emancipation of women and the socialist movement went pretty much hand in hand. In the poster below, we see almost a confluence of the sexes. The woman is drawn somewhat androgynously, wearing masculine clothing that hides her female figure, and a cold hard stare that hides her emotions. Behind her is her place of work, showing that women can do the same hard labor as men, and she carries the red flag of the communist movement.The curious thing is that the image shows not so much the emancipation of women as it does a way to turn women into men, dressing them in men’s clothing, showing them as working in factories, and hiding their femininity. It seems the real reason to emancipate women was simply to increase the workforce and thus strengthen the communist movement.Hans Schweitzer: Germany, 1930sIn Germany in the 1930s, propaganda was in full swing and being used by Hitler’s advisers to call the German people to arms and spread lies about the Jews. One of the most famous artists behind Nazi propaganda was Hans Schweitzer, known as “Mjolnir.” This poster by Hans Schweitzer shows the typical pro-Nazi theme of the German army’s strength, depicting an S.A. man standing next to a solider. The text reads, “The guarantee of German military strength!”This next poster by Mjolnir, titled “Our Last Hope: Hitler” was used in the presidential elections of 1932, when Germany was suffering through its great depression. Nazi propagandists targeted the German people who were unemployed and living on the breadline, and they suggested Hitler as their way out, their savior.The propaganda then used the scapegoat of the Jews, blaming them for all of Germany’s problems and the war. Many posters were entitled, “He is guilty for the war.” This was the key message of Hitler to start his campaign of terror and for the ethnic cleansing that ensued. Almost the entire campaign from beginning to end was driven by the artist Mjolnir. Just as the media molds public opinion today, Mjolnir most definitely molded the opinion of the German people through his designs. There is no doubts about the immorality and emotional deception of these designs; they are still worth mentioning because they were extremely powerful and effective at the time.Valentina Kulagina: Russia, 1930Kulagina was one of the few female poster artists to emerge from the 20th century. Her art was heavily influenced by suprematism, and you can see the similarity between her work and that of El Lissitzky. This poster, called “To Defend USSR” was created by Kulagina in 1930. It takes a cubist perspective in its multi-dimensional shapes, and it shows the Red army as huge almost robotic figures, marching from the factories to fight the war. They are surrounded by the tiny white airplanes of the royalists, which appear to have no effect on them at all and in fact seem to be flying through the figures.Phillip Zec: England, 1930Phillip Zec was probably best known for his depictions of Nazis as snakes and vultures. At the time, Nazis were usually drawn as bumbling clowns or buffoons. But Zec brought out the more sinister side of the German regime in his drawings. Hitler reportedly hated Zec so much that he added him to his black list and ordered his arrest following the invasion of Britain. He blamed Zec’s Jewish ancestry for his extreme ideas.This poster by Zec was a call for women to join the war effort by working in the munitions factories.This ugly toad is former Prime Minister of France Pierre Laval, who decided to work closely with the Nazi command during World War II.This illustration is about the French Resistance, telling Hitler that it was very much alive.Gino Boccasile: Italy, 1930Gino Boccasile was a supporter of Benito Mussolini and produced a lot of propaganda for him. His posters became increasingly racist and anti-semitic as his support for the German puppet state increased. After the war, Boccasile was sent to prison for collaborating with the fascist regime. The only work he could find after his release from prison was as a pornographic artist and working in advertising for Paglieri cosmetics and Zenith footwear.He became well known for his advertising and pornography.Pablo Picasso: Spain, 1937Picasso painted Guernica in response to the bombing of the town by Germany and Italy, which were following orders from Spanish Nationalist forces, on 26 April 1937. The giant mural shows the tragedy of war, using innocents civilians as the focal point. It became a huge symbol of anti-war, and upon completion it was exhibited worldwide to spread the message. The piece also educated other countries about the horror of the Spanish Civil War, which till then most people had never heard of.Norman Rockwell: US, 1939Norman Rockwell is probably one of the best known of the propoganda movement. He admitted that he was just a propaganda stooge for the Saturday Evening Post. The newspaper paid many artists and illustrators to whitewash American news with patriotism and propaganda for around 50 years.His work has often been dismissed as idealistic or sentimental. His depiction of American life included young boys running away from a “No swimming” sign, and happy-go-lucky US citizens going about their business unaware of the crumbling world around them.Rockwell’s famous Rosie the Riveter poster is shown below, representing the American women who worked in the munitions and war supplies factories during World War II. This was a call to arms for the women of America to become strong capable females and support the war effort.J. Howard Miller’s “We Can Do It!,” commonly mistaken to depict Rosie the Riveter, conveyed the same message:Rockwell was always unhappy with the politics of the Saturday Evening Post, so in his later years, he took up the controversial subject of racism in America. He became respected as a painter for these hard-hitting pieces of American culture, much more so than for his work for the Saturday Evening Post. The piece below is called “The Problem We All Live With.” It is not known whether this painting is based solely on the Ruby Bridges story, because it was also thought that the idea came from John Steinbeck’s book Travels With Charley.The subject was the integration of black children in American schools. Little Ruby Bridges was filmed making her way into the William Franz School at 8:40 am. At this time, a gigantic crowd of 150 white women and male youth had gathered. They threw tomatoes and shouted vile comments at the tiny girl. It is hard to look at this picture without being affected.Xu Ling: China, 1950It is hard to find details on these Chinese artists, but we can focus on what they intended to convey with their artwork. This piece is a caricature of the American commander in Korea at that time, General MacArthur. It shows the US as an aborrent evil, and Macarthur is shown stabbing a Korean mother and child. Bombs labeled US are being dropped on cities in China in the background as the US invades Korea.Ye Shanlu (???): China, 1952Again, little is known of the artist, but we do know this piece told people to get immunized against any epidemics to combat germ warfare. The Chinese were convinced that the US was planning to use bacterial weaponry against them, so they set about organizing massive inoculation drives to protect the Chinese people.Ning Hao: China, 1954Along the lines of Rosie the Riveter, this Ning Hao piece reflects women being asked to work in the factories alongside men, partially to support their emancipation, but mostly to increase the labor force in China.Jim Fitzpatrick: Ireland, 1968Jim Fitzpatrick was a well-known Irish Celtic artist of his time, but he is probably best known for his Che Guevara poster in 1968. It is said that Fitzpatrick took the death of the revolutionary personally. He had once met him when Guevara flew into Ireland in 1963 and checked into the Marine Hotel pub in Kilkee. Fitzpatrick was only a teenager at the time and had been working there over the summer. The poster became a global icon during the anti-Vietnam war protests and is now the symbol of F.A.R.C. in Columbia and the Mexican Zapitista who are fighting for their freedom.The image was also used during the violent Paris student riots in 1968. Across the rest of the West, the Marxist Che Guevara image is overused by any kid suffering from teenage angst.Huynh Van Thuan: Vietnam, 1972I could not find any information about Huynh Van Thuan, but I found this piece reminiscent of 1960s movie posters about the Vietnam war and so decided to include it.Micah Ian Wright: US, 2003After Micah Wright graduated, he worked a while for Nickelodeon and wrote for The Angry Beavers cartoon. Then in 2003, just before the invasion of Iraq, Micah published his anti-war protest book. The book was filled with satires of old war propaganda posters that Micah had reprinted with modern war messages.Brian Lane Winfield Moore: US, 2009Brain Moore is a modern propaganda artist who exhibts his work on his blog. He lives in Brooklyn and is probably best known for his promotion of net neutrality and his work during the 2009 Iranian election protests. The posters are based on old WWIII propaganda posters but updated in their message to match today’s technology and Web culture.This poster was a comment on the 2009 Iran election protests. He borrowed the old “loose lips” refrain and replaced it with tweets.This next one was about the proposed Internet regulation that would supposedly curb illegal activities on the ‘net and help fight the “war on terror.”Unknown artist: UK, 2010I could not identify the artist behind this one but had to include it for its clever use of old Tory values and the play on the Scooby Doo gang’s unveiling of the monster. The Tory party now occupies 10 Downing Street, and David Cameron is now Prime Minister of England. This poster shows the lack of faith in Cameron’s promise to be a force for change and not just another Thatcher.[Offtopic: by the way, have you ever visited Smashing Magazine's List of tags? There might be something interesting for you.]Last ClickNick Griffin is not an artist, he is the chairman of the British National Party (BNP). Just as most other national parties across the globe, BNP is a good example of propaganda techniques being used to produce an emotional rather than rational response to the information presented. BNP has used them to build their hate-filled ranks for years. BNP is extremely good at speaking to people in plain, emotional language and affecting those who experience personal problems and want to find someone who can be blamed for these problems.Just like many other national parties, BNP is blaming foreigners for these problems and uses strong religious metaphors to deliver the message. Very powerful, yet extremely unethical. This is an example of propaganda being used to manipulate people in a very deceptive, unfair manner.(al)© Claire Stokoe for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: Graphic design, propaganda, showcases

  It may be small, but Lithuania is the geographic center of Europe, and the meeting of Western and Eastern culture is evident. Lithuania is one of three Baltic countries, so-called for its proximity to the Baltic Sea. In 2009, it celebrated the thousand-year anniversary of its name.Lithuania is known worldwide for its love of basketball, but today we’ll acquaint you with its Web design industry. In Web design, Lithuania is still a young country; the Internet boom began only about five years ago, and the country doesn’t have a good Web design school.Most Web designers have studied in Western countries or are self-taught. Most work is done for hotels, rural tourism and real estate websites. Lithuania quickly adopts new technologies, and demand for Web designers and developers is increasing. While preparing this showcase, I noticed that many Lithuanian Web designers like Flash technology. Many websites have Flash elements, which can help present a company’s goals, services and prior work. Flash can help websites look professional, modern and dynamic.Lithanian web design at its best: Šturmu Švyturio Žuvys[By the way, did you know we have a brand new free Smashing Email Newsletter? Subscribe now and get fresh short tips and tricks on Tuesdays!]State Of AffairsTo better understand the Lithuanian Web design scene, I interviewed two professional and experienced freelance Web designers about their work.I spoke with Donatas Vainilaitis, a freelance designer who has worked with companies from Lithuania and Europe, and Osvaldas Valutis, another freelance Web designer and student. Both are based in Vilnius, Lithuania’s capital city.Donatas Vainilaitis is a freelance Web and graphic designer. His career began in 2003; since then, he has worked for a number of design studios, advertising agencies and corporations. Donatas’ favorite tools are Photoshop, Illustrator and Flash.Osvaldas Valutis is a 21-year-old front- and back-end Web designer and developer based in Vilnius. Valutis is working as a freelancer while finishing his Bachelor’s degree in Computer Science at Vilnius University.BohemieciaiQuestion: Describe the life of a freelancer, developer and designer in Lithuania.Donatas Vainilaitis: It’s complicated because you are also an accountant, manager, director and so on! But it’s a lot of fun. Everything depends on you and you alone. When something goes wrong, the blame is yours, but when you make something beautiful and useful, it’s so satisfying. It’s also a huge responsibility. Some people like it and some don’t. I love it.Everyone thinks that when you freelance you sleep until 2:00 pm, and you work solely with clients you like. That’s not true; you must work a full day to be successful. The client must know that if he calls you at 9:30 am you won’t still be in bed and you will be able to answer all his questions with a clear mind. Of course, when you finish a big project or you’re waiting for feedback from a client, you can have a couple of days off—even in the middle of the week. That’s one advantage to making your own schedule. In fact, there are many advantages that have probably already been covered in thousands of other articles, so I won’t mention any others.Osvaldas Valutis: Designers design, and developers develop. To each his own. Although I don’t design for print or the Web, I enjoy coding, experimenting with CSS3 and enabling functionality in my own designs (I’m sure I’m not the only exception to the rule). Believe it or not, the thrill of being able to do everything, from A to Z, is like a drug; this is a passion. And filling it up with caffeine increases the thrill!Yes, you’re right: there is a world outside. I’m also a student, and basketball is my second religion (along with three million other people). I can’t say that I differ greatly from a typical inhabitant of Earth, but we are all unique. (Have you seen the movie K-Pax?)Mes laimesim 2009Question: Are there any regular meetings or events?Donatas: I usually try to meet clients face to face. Of course, if he’s in another country, then it’s more complicated, but not impossible. This isn’t necessary, but it’s how I like to work.Of course, there are necessary meetings, like when you are working on a big project with a group of people. It’s much better to meet somewhere in person than to hold Skype conferences or write long email threads.Osvaldas: I wish individual designers and developers had more opportunities to participate in events related to Web design and development, but the offline life isn’t that dynamic yet. I’m not saying nothing is going on in public, but we lack specific events. Bloggers, for example, have a real festival for themselves every year. Should I start blogging or buy a ticket for “The Future of Web Apps: Miami”? Or both?Funkyart.ltQuestion: Where do you get inspiration from?Donatas: Usually, I’m as far away from the computer as possible when I get inspired. Books, people, events and exhibitions are inspiring, especially when I’m struggling with a project. I turn off the computer and go out for some fresh air. Sometimes I don’t turn it back on for a few days. The Internet is a good source of inspiration, but only when you know what you’re looking for. Browsing websites aimlessly overloads your brain with useless information.Osvaldas: I don’t have a specific inspirational source. I’m inspired by various subjects: people and their creations (no names—I’m speaking generally); nature (if you check out my website, you’ll see what I mean); pixel-perfect designs; tasteful and carefully chosen colors and fonts (while strong shadows and awkward borders have the opposite effect—they throw me off track). Some avoid recalling the Web design habits from the last decade, but for me it’s dark humor.Dia BitesQuestion: What’s the situation with the market? How much do designers earn?Donatas: Designers will never earn enough, that’s for sure. I can’t speak for other designers. There are so many of them, and they work at different levels and all have their own principles. For some, the priority is money, and for others it’s the quality of their work. For me, I feel successful when I can eat what I want to eat, live where I want to live, buy things that are necessary and go on vacation more than twice a year.Osvaldas: Earning a living as a professional designer isn’t an inexplicable phenomenon. Its feasibility depends on your business style and how intelligent—not rich!—your clients are. Personally, I aim for quality, so I will never support cookie-cutter websites. In a capitalist system, there will always be two types of workers: those who fight to survive and those who are financially successful and stable. Freelancers vascillate between these two states until they find their own place under the sun, so to speak. Be brave and find yours!Title.ltQuestion: Is being a Web designer considered high-level, sophisticated work?Donatas: I think there are too many Web designers right now. Let’s say I meet ten designers today. Only one of them could I call a high-level, sophisticated professional. But I think this has more to do with character than with the profession itself.Osvaldas: The more experienced you are, the better the results you are expected to produce. Sophistication in this field has to do with personality, with a person’s ability to manage him or herself. Of course, life forces you into all kinds of situations, and one more skill will always make the way easier. It’s hard to believe, but learning something new every day can positively affect your life! MaltosaQuestion: Do designers still use tables for layouts?Osvaldas: Yes, it happens sometimes. I’m really surprised when some of the top-rated Lithuanian Web agencies use tables for layouts, but I think it’s only a matter of time before <table> is used only for tables. Coding culture is geting more positive all the time, which is good. I know that Lithuanians care about their code.Question: How do Lithuanian designers handle typography? Are any particular font-embedding techniques widely used? Are many fonts available? How vivid is typography in Lithuanian Web design?Osvaldas: Typography on the Web in Lithuania is tidy enough. Content is easy to read, so the best word to describe it is “simple” (although I don’t want to leave out “courageous”). Designers aren’t sure (and I have to admit, neither am I) about how to use font-embedding techniques. Typography here is, in a way, static. I believe the inability of CSS2 to embed fonts is one reason for this, but waiting until CSS3 works for all Web browsers is not a solution. From now on, I promise to be more universal. Are you all with me? KonkursasQuestion: Are any features unique to Lithuanian Web design?Donatas: I don’t think so. There is no Web design school in Lithuania that could teach you more than average Photoshop or Flash skills. Most Web designers here are self-taught. They browse the Web and read tutorials—which, of course, are not Lithuania-oriented—and everyone develops their own style over years of working at the job.Osvaldas: I touched on this topic in my answer above. Briefly, a few shortcomings are vibrant fonts, forms and textures; these techniques are typically avoided, although I have spotted some changes recently. So the situation is getting more interesting every day. Conclusions? Don’t be afraid to innovate. The first reaction is usually skepticism, but in time people adapt and find benefits.Moma.ltQuestion: How does it all work? Is the situation currently comfortable or difficult? Do most customers want English-language or Lithuanian-language websites?Donatas: It depends. What do you call a comfortable or difficult situation? If it has to do with money, then yes, you have to work more to earn the amount of money that you earned two years ago. However, there are some good things about the way the business has changed: people have become more careful about the money they spend, and people have to be more serious about the products they sell. The customer comes with a certain amount of money to spend on their website, and they need a good project, a good designer and good service. This is the time to show yourself off and also to evaluate your own skills. If you can make it through this hard time on your own, then you can truthfully say that you are a specialist in your field, and you will have gained a lot of confidence.Osvaldas: When the economic recession caught us, I thought, “Oh no. Will my income get too tight? Will I lose my current clients, not to mention the possibility of new ones?” Believe it or not, nothing like that happened. Rather, things turned out better than I thought they could. Some say God saves us, but I say everyone is the master of his own destiny.Lithuanian-language websites are, of course, the priority, but clients in most cases do not refuse a second or even third language on their website. Handling multi-language technologies and concepts isn’t actually that difficult to do.Showcase of Web Design in LithuaniaBiggest GraphitiPadekmums.ltNfq.ltTrakai MuziejusZiedas.ltInterjet AibesaikoSodyba TeviškeVilnius – mano namaiKaledu stebuklasLopšiniu radijasEstrella NaturalsAugink.ltsuelektradraugauju.ltLoweageOmnitelTuro prekybaSaugus vartojimo kreditasPildyk BonaiEcoserviceAlgirdas City HotelsSPA Vilnius SANAMeškafonasValdyk ITVesa.ltPolivarkasŠviežia kavaEžio stažasTapatybe.ltTavo barasOzo parkasTraku istorijos muziejusEvitaPlazmaPavasarisRomantic HotelPieno žvaigždesAgotea prioriBendri krantai Domino teatrasTamulynasPramogos be narkotikuVilniaus degtineBaltijos prodiuseriu grupeVichy vandens parkasSKCPizza JazzFloralitos dizainasDomus MeaPildykIndanceGeros nuotaikos generatoriusBelvedereWeb AgenciesKryptisTAPE dizaino studijaArtogamaIndigo kidsKryptisTAPE dizaino studijaGauminaCoral SolutionsIndigo kidsMediaparkITEMAM2DeformArtogamaFor such a small country, Lithuania has more Web agencies than you might think. The best known are Gaumina, Kryptis, Itema, Profis and Artogama.FreelancersMost freelancers in Lithuania are young and self-taught. Some do really great work and are professional enough to represent Lithuania. Not all freelancers have a self-hosted portfolio; most of them use Behance, DeviantArt, Flickr and other networks to display their work.osvaldas.infoDesignbox.ltdaco.ltDual.lt33.ltLithuanian Design GalleriesBest Lithuanian Websites galleryMenoDuobeA Lithuanian Art blogWhat Do You Think?What do you think of the Lithuanian Web industry? Have any exceptional websites not been included here? Share your thoughts.Related PostsYou may be interested in the following related posts:Showcase of Web Design in ChinaShowcase of Web Design in IsraelShowcase of Web Design in RussiaShowcase Of Web Design in The NetherlandsShowcase of Web Design in GermanyShowcase of Web Design in MexicoShowcase of Web Design in Ireland(al)© Tomas Laurinavičius for Smashing Magazine, 2010. | Permalink | 4 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: showcases

  In any industry where the people behind a company are as important as the company itself, you’re likely to find a kind of expanded “about” page that includes information on individual employees. “Meet the Team” pages are popular among web design and other creative firms, but are also found on sites within various other industries. These pages are a valuable addition to any site where human contact is an important part of the industry. It adds a personal touch to the company and can lend trust to visitors.There’s suddenly faces behind the names, and it becomes a “real” company to the visitor, rather than just another website. This builds credibility for many, especially considering how concerned many people are with online scams and phishing schemes. Adding information to a website on a company’s key employees is a simple but effective way to make that company stand out in the mind of its prospective clients. Below are a handful of trends a couple dozen of interesting examples of “Meet the Team” pages. [By the way: The network tab (on the top of the page) is updated several times a day. It features selected articles from the best web design blogs!]TrendsIn reviewing “Meet the Team” pages, a few trends began to emerge. While some are present on almost every site (employee photos), others are used less often (animations). All were present on at least a handful of sites, though, and are worth mentioning.1. Employee PhotosVirtually all of the pages included here have images associated with each employee. Most opt for photos of each employee, though some opt for avatars or other images to represent each person. This is a great way to let an employee’s personality shine through while keeping the design professional and consistent.Object Adjective has a simple team page, with a photo and brief bio about each member, as well as their contact information and a link to their downloadable vCard.2. Social Media LinksConsidering how many professionals are likely to have LinkedIn, Twitter, or other social media accounts, linking to those accounts can be a great way to let current and potential clients connect with employees. Some of the pages featured include only professional accounts, while others include virtually any account the employee has. Some sites use icons for each social media service, while others use text, or a combination of the two.A word of warning, though: if employee accounts are going to be linked to a professional website, make sure the content they’re posting on those sites is appropriate and won’t damage the company’s reputation.Chromatic only includes profiles for their leadership team. They include a pic and brief bio of each team member, as well as links to their Twitter and LinkedIn profiles. Each team member also has their latest tweet featured next to their profile.3. Unique, Humorous or Campy FeaturesA lot of the sites featured have unique, humorous or even campy takes on the more traditional “Meet the Team” format. For some, this is done through the employee photos, while others have added in additional content that lets team members better express themselves.Be aware, though, of how this information can come across to professionals from different industries. What might be acceptable for a creative site might not go over so well in the finance or legal industries. It’s also important to consider how a site’s visitors will perceive a humorous or campy touch. While it adds personality, if overdone or done in the wrong industries, it can come across as unprofessional.Th_nk uses animated photos for each of their team members, and modal windows to display information about each team member.4. AnimationsA significant number of “Meet the Team” pages have incorporated some kind of animation into their designs. For most, this is done through employee photos or avatars, though some take it even further, with the entire page animated.Ola Interactive Agency uses an animated meet the team page, with each team member’s photo part of the animation. Click on a team member and their profile appears, including links to their Twitter and LinkedIn profiles, and their email. It’s a very casual, fun page design.5. Expanded ProfilesWhile many sites opt to only include basic information about each of their team members, others opt to include extended profile information. For some, this is done through the use of sliders or modal windows, but for others it’s done on an entirely separate page. Extended profile information is a great way to give clients and prospects more insight into the employees behind a company.9miles Media uses photos of each of their members, which, when clicked on, display each person’s profile information, including links to social media accounts. It’s a simple but effective design.More ExamplesBelow are twenty examples of great “Meet the Team” pages.StationFour StationFour has a very clean and streamlined team page, though they inject a bit of personality by categorizing their employees as “The Chrises” and “The Non-Chrises”. They also include links to each employee’s LinkedIn profile, Twitter, and blog posts.Efelle Media This is another simple team page, with a brief quote about each team member. Also included are links to each member’s full profile.MW Design Interactive This is about as minimal as team pages get, with just a photo, name and title for each major member of the team.Wax Creative Design Wax Creative Design keeps each team member’s information organized with an unordered list, but also adds personality to their page by included each member’s favorite cupcake.HBCWeb.com HBCWeb.com keeps their meet the team page casual, with candid photos of each team member as well as a brief bio of each.Arc90 Arc90 adds some punch to their meet the team page by having each team member’s photo change upon rollover from a straight-forward, business-casual-style pic to a candid shot. They also included a color-coded key for determining what each team member does.Wildbit Wildbit shows only one (random) team member’s profile at a time under the list of team members. They also include links to each member’s Tumblr, Twitter, and Flickr profiles, if applicable.AtlanticBT AtlanticBT has a number of interesting features on their team page. Each employee has a photo that, upon hover, slides down to show their name and position. There’s also a drop-down menu at the top that lets you switch between their main photos, action figures, sports teams, movie posters, and favorite foods.Blue Sky Resumes Blue Sky Resumes uses consistent photos for each of their team members, something that isn’t often seen. In addition to a bio for each team member, they also provide links to their Twitter and LinkedIn accounts.MetaBroadcast MetaBroadcast uses a straight-forward and simple design, with icons for social media accounts for each of their team members.2Cs Communications Ltd 2Cs shows photos of their team members just below the header, with low opacity except for the active profile. Images also come into full color when they’re hovered over. It’s a great way to manage a large team, while still giving everyone equal space.glue Isobar glue Isobar uses animated pixel artwork for each of their team members and Top Trumps-style profiles appear for each when clicked on. It’s a really unique and fun design.CampaignMonitor CampaignMonitor uses brief profiles for each team member, accompanied by photos of each. What sets them apart is that in the background of each photo is a map, showing the location of each employee.WooThemes WooThemes uses a simple design that puts the focus on the founders of the company, but also gives plenty of space to the other team members. Links to Twitter and each team member’s blog are also included.nGen Works nGen Works uses a simple avatar/name/campy title format, with a link to more in-depth profiles for each team member. It’s unique and fun while also maintaining a professional appearance.BrightSpark BrightSpark uses a simple, one-column layout for their team page, with pics of each team member as well as a couple paragraphs about each.Etsy Etsy takes a unique approach to their team page by putting different departments into separate columns, and displaying photos of each team member within that department. Each photo then links to more information about that employee. It’s a neat format, since it gives an immediate impression of how large each department is (the Engineering department gets 3 columns, and Support gets 2).SmallBox SmallBox uses a simple grid of employee photos, each with the person’s name and title underneath. What sets them apart, though, are the individual team member profile pages. In addition to the usual bio information, they include each person’s top 5 strengths in “StrengthsFinder 2.0″. It’s an interesting and personal touch.Caxiam Group Caxiam Group is another site where the individual team member profile pages are what make it stand out. On these pages you can find a keyword cluster that describes the team member, as tabs that give information on their inspriations hidden talents, unknown facts, and more.Tumblr Tumblr has the simplest “Meet the Team” section of any site on this list. It just consists of the avatars of each of their employees, with a link to each person’s Tumblr blog. It’s simple but works well, considering what the company is all about.© Cameron Chapman for Smashing Magazine, 2010. | Permalink | Be the first to comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: showcases

  Minimalism is achieved by reducing a design to only the most essential elements. Expressions of minimalism span multiple disciplines, as well as other art forms such as music and literature. For website designers, though, minimalism can be intimidating and difficult to master.But anyone can master minimalism. Essentially, minimalism is about breaking things down to the barest elements necessary for a design to function. It’s about taking things away until nothing else can be removed without interfering with the purpose of the design. Below are a number of principles of minimalist design, as well as an exploration of current trends and additional examples.You might also enjoy our previous article “Showcase of Clean and Minimalist Designs.”[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]Less Is More“Less is more” is probably the most well-known catch phrase of the minimalist movement. It was popularized by architect Ludwig Mies van der Rohe in describing the minimalist aesthetic.In Web design, less is more is achieved by using only elements that are necessary to a given design. Using less to achieve an effect that’s more than the sum of the design’s parts is the goal.ExamplesNorth Kingdom Simple, straightforward typography and a bare use of color make for a design that’s aesthetically pleasing but minimal.Sleepover A simple design that puts content above all other elements. The simple double-border above and below certain areas helps to delineate the content without cluttering the design.Lindvall A&D The simple line-drawing of a chair, barely visible if you’re not looking for it, exemplifies the “less is more” ideology.Your Neighbors Another simple design, this one with many more graphics.Sharpenr Simple navigation and graphics add to the overall minimalist feel here. The graphics are bold enough that they have visual impact without adding clutter.Omit Needless ThingsIn their book The Elements of Style, Strunk and White coined the phrase “Omit needless words.” It has been adapted to minimalist philosophy as, “Omit needless things.” In other words, don’t include unnecessary elements in your designs.Think of what’s necessary to the content and function of your website. Then focus on only those things, and omit anything that doesn’t directly contribute to either the content or function. Remember, though, that certain design and graphical elements will directly affect the readability or usability of your website.Examplesup&onward A simple gray background, white borders around the images and simple typography are the minimum elements necessary for this page. If any were removed, the website would not have the impact that it does.Lachlan Bailey A single image and vertical navigation are as simple as it gets.Sarah Hultin Another example of a single image and vertical navigation.Aleksei Dubrovsky This website goes a step further and omits any images, opting instead for just a header and simple navigation.Subtract Until It BreaksWhen crafting an extremely minimalist design, try subtracting elements until the design stops working the way it should. When the website is on the verge of breaking, you know you’ve achieved the most minimalist design possible.Remember that “breaks” is relative in design. Technical functionality is only one way to gauge whether something is broken. Usability considerations are equally important. Make sure your website is still user-friendly and delivers the experience you want visitors to have.ExamplesAnothercompany A minimalist design with a single-column body and three-column footer. If any element was removed, the website would be less user-friendly.Works in Silence The elements of this information architecture, including the borders between sections and posts and the white space between columns, are vital to keeping everything visually pleasing, organized and readable.Brett Arthur Photo Another great example of using a minimum of elements.Danny Guy Photography The black background sets this apart from many other ultra-minimalist designs. Notice the full-screen option in the lower-right of the image.Brian Danaher Another website that opts for a single column and bold typography.Every Detail CountsIn a minimalist design, every detail has significance. What you choose to leave in is vital. A border around an image, the color palette, the white space, every part becomes important to the overall look and feel of the website when the elements are few.Think of the feeling you want your website to give visitors, and then decide on the details that would impart that feeling. While many designers view minimalism as one size fits all, there is still room for different emotions based on individual design elements. A minimalist website can easily be funky and modern, fresh and clean, reserved and sophisticated, elegant and refined, or anything in between, based solely on its details.ExamplesExecutive Edits Details like the oversized typography in the header and the thin borders between elements make the Executive Edits website stand out.Christine Szczupak Photography The stylized arrows and subtle drop-shadow are important details that increase the visual appeal of this website.Kha Hoang The effect of the details here—circles, gray box, red typography—definitely add up to a lot more than the sum of the individual parts.The Rules of a Gentleman Everything from the thick black border at the top to the mix of typography make this website elegant and sophisticated.Ryan Willms The spacing and arrangement of content here, along with the elegant typography and simple lines, make for a fresh design.Visual Craftsman This has more detail than many minimalist websites, particularly with the border and other subtle graphics.Electricgecko The subtle colored box behind the content sets this design apart.Color MinimallyColor takes on added significance in a minimalist design. Choosing the right palette or accent colors is vital. Many designers opt for a simple black, white and/or gray palette, but minimalism has room for any color in the rainbow.Like details, color becomes critical with fewer elements. Pay attention to the meanings of the colors you choose and how they interact with one another.ExamplesKyle Sollenberger Design Subtle pastel colors set apart certain content here.Pixelbot Webdesign Bright colors stand out against this otherwise black-and-white design.MattBango.com The shades of blue are subtle but highlight special areas of this otherwise black, white and gray design.Second and Park Muted colors work well in a minimalist design, particularly when combined with gray.Glinga A simple website with a gray background and colored accents.Deartoy Another simple design with colored accents.Superawesome Magenta is a popular accent color for minimalist sites.Thinking for a Living A website with a lot more color than many other minimalist websites, but the palette is well thought out.Nation Another colorful website with a great palette.White Space Is VitalWhite (or negative) space is the backbone of any minimalist design. What you leave out of a design is just as important as what you put in. White space is critical to emphasizing certain elements over others.White space “makes” a design minimalist to a large extent. Without it, you’d end up with a grid design or grunge or some other style that’s not truly minimalist.ExamplesRikcat Industries Ample space between elements keeps this website from feeling cluttered.Straightline Another example of a ton of white space around elements.52 Weeks of UX Filling every column on the page is not necessary, as evidenced here on the 52 Weeks of UX website.Metro Gallery The Metro Gallery pays a lot of attention to white space, right down the spacing of letters in its category headers.Blank Studio Ample white space is used here.TrendsThere are plenty of trends in minimalist design. Some have been around for so long that “trend” is probably not even the right word to use. In any case, the following elements are being put to good use in a variety of minimalist designs.GrayGray is fundamental to minimalist design. Shades of it are used for backgrounds, text, images and pretty much all other elements, often combined with black and white or other colors.Brian Hoff Gray can be used as an accent, not just for typography or backgrounds.Michael Cronin Of course, gray also makes for a great background color, and it takes on a cool tone when combined with icy blue.Ross Gunter Another very simple design with a gray background.Sort Design Medium gray allows for good contrast with typography, while also making a stronger impact in the background than light gray.Jack Osborne Gray lends itself particularly well to gradients.5-Squared Combining multiple shades of gray lends visual interest without cluttering.Big TypographyBig typography is often used in place of images to add more graphic interest to a website.Blake Allen Design Oversized typography is used throughout this website.Kyle Steed Big typography is a popular choice for minimalist headers. It makes an impact while also conveying vital information.EndGrain Another example of oversized type in the header.Dunnodt Combining different-sized fonts is a great way to add visual interest without clutter.Words Are Pictures Large typography is also popular as an accent, rather than a focal point.Ryan Evans Another website that combines multiple font sizes. It’s a great fit when the page has little content.Tiny Villain Varying the size and color of type makes for an arresting design.Division Paris Another great example of big typography in the header.Background Patterns and ImagesSubtle background patterns and bold images can add a huge visual interest to a minimalist design.Jeroenhoman.com A subtle grunge pattern gives this design an edgy feel.Neiman Group Keeping the background image in grayscale adds visual interest without adding clutter.IdeaPaint A large background image is still minimalist when the rest of the website’s content is very simple.Bunton The subtle texture and pattern in this background is aesthetically pleasing without being overwhelming.Francesco Fonte Another subtle grunge pattern.Caitlin Worthington Photography This taupe grunge pattern is unexpected.Simple GridsGrids aren’t necessarily minimalist by nature, but simple ones can bring order to a bare design.Fitzroy & Finn Simple grids make sense for organizing equally sized images.Brand New A simple grid like this organizes without adding complexity.Design Woop A more traditional grid design that has plenty of white space to keep things looking minimal.Fortyone Another great example of using simple grids to organize images, this time including text.Things This simple-looking grid belies the careful thought that went into it.Corporate Risk Watch This grid is set apart by the roll-over effects in the navigation (visit the website to check them out) and the subtle grid lines.Positively Melancholy A simple grid like this works well for organizing different-sized images, too.CirclesCircles can be found on many minimalist websites. I’m not sure whether designers who like circles are more inclined to have a minimalist aesthetic or whether they choose circles because they fit minimalist designs particularly well. In any case, circles are often found in headers and are also used as accents in navigation.iLTD A simple circular logo in the header.Simon J Hunter Another circle in the header, this time with a monogram.Frank Chimero Another circular monogram for a logo.Indextwo And another.Leica Leica’s logo is a bright red circle, used across its products and marketing materials, including its website.io And another.Bless Circular badges like this are also popular.Alex Cornell A circular logo with a more abstract design.Royale Circles aren’t just used for logos, though. Here’s a great example of a circle used for content.Bonus: TransparencyThis isn’t really a trend per se, because it’s not often seen in minimalist designs. But it can make a huge visual impact and should really be used more by minimalist designers.Slideshow Press The subtle transparency in the logo gives this design an added dimension without creating clutter.More ExamplesHere are some more examples to inspire you.Brancozero FLOWmarket Circus Family Reknit Dracula Studio Zachary Pulman Laboixeta SkilledConcept Days with My Father NeueBlanc Winkreative Madewithpixels Acne Production Further ResourcesMinimalist Web Design: When Less Is More A comprehensive introduction to minimalist design from Webdesigner Depot.A Guide to Creating a Minimalist Website A look at minimalist websites, from both a design and content perspective.Understanding Minimalism in Web Design A good introduction to the concept of minimalism as applied to website design.“Minimalism” Is Just Designer-Speak for Laziness A great breakdown of the differences between minimalist and simplistic designs.The Anatomy of a Minimalistic Web Design Breaks down what goes into the design of a minimalist website.(al)© Cameron Chapman for Smashing Magazine, 2010. | Permalink | Be the first to comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: minimalism, showcases

  The Netherlands, also known as the “Low Countries,” is a small, crowded, muddy piece of land through which a few big important rivers fortunately run. In this country, you can find coffee shops, wooden shoes, tulips, windmills and a lot of water.And everything is rather small! Well, at least most of the architecture is. How cute is that? But it’s also the land that brought the world many great painters, famous architects, and excellent graphic, fashion and interior designers. We all know Rembrandt, Van Gogh, Mondriaan, Rietveld, Koolhaas, Escher, Droog Design and Viktor & Rolf, don’t we?Dutch Web Design: Spin Awards[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]State Of AffairsCan the Dutch be proud of its Web design community? Is it capable of producing great websites? Has the community earned a place in Web design land, or is Dutch Web design still in its infancy?A Virtual Discussion About Dutch Web DesignI invited a diverse group of Dutch Web agencies and freelancers to discuss the state of Dutch web design.Harald Dunnink, creative director at MomkaiWimer “Monokai” Hazenberg, art director at BooreilandRogier Strobbe, Frish Design StudioErik Leutscher, EldesignMaarten Kleyne, creative designerWoud Hobbelink, DesignphunkRose Calis, Toko RoseChristian Annyas, freelance Web and graphic designerMattijs Bliek, Helium WorkxMichel Branco Bio, Branco Creative StudioEwout van Lambalgen, illustrator and Web designerErik van Nieuwburg, Rumbling SkiesRolf Coppens, GrrrJens Kanis, designer and developerJonno Riekwel, JonnotieNelleke van der Maas, Designed By NellekeCaspar Hardholt, MediaCTMarten de Jongh, creative freelancerCan Certain Web Design Characteristics Be Called Typically Dutch?Erik van Nieuwburg: “There is a very typical Dutch school of architecture, photography and graphic design. But in the field of Web design, I do not see a typical Dutch identity. Perhaps this has to do with the international nature of the Web.”Maarten Kleyne: “I do not think you can pin this down as, ‘This is pure Dutch Web design so let’s hang it on our wall next to the wooden shoes, tulips, cheese and other things.’”Harald Dunnink: “A certain clarity and simplicity characterizes Dutch design. For myself, I try to bring the traditional conception of creativity, aesthetics and clarity of Dutch design into the digital domain.” Christian Annyas has a similar opinion. Also, Woud Hobbelink agrees and feels that sometimes, Dutch Web designers seem reluctant to experiment. The products are usually somewhat stiff.Rolf Coppens adds: “Simplicity and conceptual working are characteristics you often find in our Web design.” Caspar Hardholt has a similar opinion: “I think Dutch Web design is less complicated and very natural. As the Dutch saying goes, ‘Just act normal — that’s crazy enough.’ And I guess we don’t like stock photography. We make it more personal.” BrandrepublicErik van Nieuwburg: “Dutch Flash projects are more about being functional than about having rich animations, at least when compared to many English-language projects.”Rogier Strobbe: “If I may pick out one element that the Dutch have been known for, it is surely typography. We have some of the best typographers in the world. Think of Gerard Unger, Martin Majoor and Jos Buivenga. Of course, the Web has never been known for its rich typography, but let’s hope that @font-face and initiatives such as Typekit will change that and take typography to the next level in the coming years.”Rose Calis adds: “The big Dutch Web design agencies still control both the market and the appearance of most designs on the Web. Freelancers spend a lot of time on the latest trends, as their designs often show. But I think the Netherlands is running a bit behind.”Dutch Web Design: VPROChristian Annyas nods approvingly: “It is hardly innovative. With the exception of a few.”Jens Kanis: “You’ll see that we communicate more formally to our customers, while many US companies go for the informal approach. Look at Google and Apple. They talk to their customers differently than we do to ours.”Marten de Jongh: “Best of all worlds!? The Netherlands is a multicultural society, and that’s what you see in its designs. Brazil is known for its illustrative qualities, the North Americans own the drop-shadow and use a lot of glass effects, and the French are more artistic. I think the Dutch have a little of everything.”Michel Branco reflects: “Dutch designers characterize themselves as ‘unconventional’ and not mainstream. Perhaps an appropriate term for Dutch web design would be ‘unconventional Web design.’”Is There A Dutch Web Community?Wimer Hazenberg: “There is a Dutch design world, I think. Whether or not we can identify with it is another question — not with the establishment in any case, like Lost Boys.”Jens Kanis: “It differs according to the person. I do operate in a Dutch Web design community, but I am mainly focused on the international scene.”Mattijs Bliek: “Yes, there is one, but you have to search for it. My experience is that it is found mainly in the Amsterdam area, which certainly appears to be a creative hot spot in the Netherlands. I find that being around other designers who challenge and inspire you is really good.”Erik Leutscher: “Web design is an Internet profession, which means that all you need to become a successful Web designer today can be found on the Web. I don’t think a ‘Dutch’ Web community exists.” WerkplaatstypografieNelleke van der Maas: “I’m not sure. I don’t meet up regularly with other Web designers, apart from the new year’s drinks organized by creative recruitment agencies like Aquent. But because I freelance for advertising agencies in Amsterdam, I often see the same people at events, conferences and the Spin Awards.”Ewout van Lambalgen: “I’ve never noticed anything. I work as a freelancer, and I mainly follow international websites.”Jonno Riekwel: “There isn’t a huge Web community in the Netherlands. Not that I know of anyway. I regret not having a community or organization that allows Web designers to come together more often, as Fronteers does for front-end developers.”Harald Dunnink: “I prefer to be around people who love their profession, who are ambitious and creative. This could be a creative developer, illustrator, artist or designer, but also a baker.”Erik van Nieuwburg: “The Flash community is a true ‘community,’ with much cohesion, because the group of people who make a living off Flash isn’t a very big one. I think it’s a great community, where you can often get immediate help with complex issues. At conferences, like Flash on the Beach and Flash in the Can, you can meet up with Flash celebs like Keith Peters and Mario Klingeman, drink a beer or two and jabber away with them!”What Does A Web Designer Or Agency Need To Be Eye-Catching?Jonno Riekwel: “Plenty of design companies are in the Netherlands, but you really stand out when you’re transparent and do good things. Like Mangrove, which organized an evening to watch Objectified. Agencies should do stuff like that more often.”Jens Kanis: “It can be difficult to earn your spot in the Dutch design industry, but it is certainly possible. Invest descent time in good and clear communication with your customers, which will eventually pay off. Be honest with your clients, even if the message isn’t positive or pleasing.”Erik van Nieuwburg: “If you are building a blog, for instance, you could see how WordPress does it, but you could also think about how the user would want it exactly. A great example is Nalden, where the established concept of a ‘blog’ was completely flushed down the drain.” NaldenWimer Hazenberg: “Do not accept the Web 2.0 style blindly. Go back to the basics, and from there you can create something that serves someone’s needs. We all know the basic styling tricks. It is more about finding a fitting solution to the issue at hand.” Ewout van Lambalgen agrees: “Don’t look too much to what other designers do, because it will only affect your own designs. (Un)consciously, you would always be copying from others, and then you wouldn’t stand out from the crowd.”Caspar Hardholt: “You will be successful if you make your customers more successful.”Matthijs Bliek: “To be completely honest, I do not like the term Web designer, because it limits you. Mike Kus puts it well in his article on 24 Ways: ‘A key factor in creating something original and fresh for the Web is to stop thinking in terms of Web design. Don’t design for the Web, just design.’ Do something crazy!”Christian Annyas: “90% of all designers in the Netherlands are typical mediocre designers. The world of Web design primarily consists of rehashes of old recipes.”Rose Calis, who has just started freelancing: “First, put everything you do on a list before you officially start as a freelancer. A beautiful and technically well-built website is not enough. A customer might give up on a poorly drafted briefing that is full of technical jargon. Be unique and refreshing, and above all keep investigating. You’re never too old to learn.” W139Nelleke van der Maas: “A portfolio that not only looks beautiful but shows that the designer has thought about usability. Attention to detail makes me notice someone. Have they put effort into designing their own icons, for instance? Or have they used nice typography, unusual navigation or any new technologies?”Woud Hobbelink: “Experimenting. Freaking out with your Photoshop/Illustrator document!” Erik Leutscher agrees: “Dare to violate the rules. You might screw up a project once, but learn from your mistakes and become a better designer.” And Harald Owings puts it succinctly: “Talent, the will to work hard, a healthy kind of dissatisfaction and a computer.”Maarten Kleyne: “Sometimes innovation can be found under the hood of a design and can be more innovative than the design itself.”Matthijs Bliek has these words of wisdom: “Take up new technology such as HTML5 and CSS3.”ConclusionsThe Dutch are individualists. Despite having created a big pile of outdated websites, this small community is getting its creative act together. Web designers from the Low Countries generally love clear design, incline towards minimalism and prefer to work conceptually.Given the rich graphic history of the Netherlands, there is still much honor to gain on the Web. Hopefully, @font-face will accelerate this development. Heeftstijl.nlThere is no distinct Dutch Web community, considering the Dutch are individualists and internationally oriented. The industry is fragmented, unprotected and not well represented. The only Web design blog that tries to give the Dutch community a face and contribute to a sense of high-quality design for the country is Heeftstijl. Perhaps it is worthy of the term “Dutch Web design.”Certainly, inspiration can come from many different sources. Erwin Olaf is highly valued, as is poet Wim T. Schippers. Dutch designers refer to Bas Ording (Apple OS X), Momkai, Delta (Boris Tellegen), the late Kioken Inc., Jos Buivenga and Mediamonks as sources of inspiration.And Now You Decide, With a ShowcaseAdobe User GroupJens KanisIwitDawnG-Star Next Raw ReporterTheyN8Grafisch Lyceum RotterdamKunsthalVinginoMode ArnhemAnnyasJochem MyjerHanazukiSapph LingerieCreative ConnectionBadabingdesignDewerkelijkheidverzinjenietDesign.nlVenhoevenCSMatias JansenPVDADoelstelling2WehkampUnga ToysJoods MonumentDutch Design Agencies ShowcaseMomkaiAchtungMediaMonksPostmachinaBooreilandOnstuimigGrrrFabriqueRefunk.comEldesignDe InternetjongensCreative MonkeysAdenaBiqiniDesigner ShowcaseDesigned By NellekeJeroen HomanJeroen van EerdenSjoerd DijkstraAnnyasFrishBothHelium WorkxMKleyneJonnotieToko Rose Wij Zijn RoodSpecial thanks to Maarten Kleyne, Momkai, Frish, Eldesign, Designphunk, Toko Rose, Christian Annyas, Helium Workx, Branco Creative, Iwit, Booreiland, Rumbling Skies, Grrr, Jens Kanis, Nelleke, MediaCT, Marten de Jongh and Jonno Riekwel.Related PostsYou may be interested in the following related posts:Showcase of Web Design in ChinaShowcase of Web Design in IsraelShowcase of Web Design in RussiaShowcase of Web Design in GermanyShowcase of Web Design in MexicoShowcase of Web Design in Ireland(al)© Edgar Leijs for Smashing Magazine, 2010. | Permalink | 6 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: netherlands, showcases

  Go to any website and you’re guaranteed to find one thing: a navigation menu. Navigation menus enable visitors to move from page to page; without them, we would have no way to conveniently explore websites. Perhaps this is why designers, information architects, usability researchers and user experience specialists invest so much time and resources into devising aesthetically pleasing and user-friendly navigation systems.Website navigation menus generally come in one of two orientations: vertical and horizontal. Horizontal navigation menus display items side by side. Vertical navigation menus stack items on top of each other. In this post, we highlight some remarkable vertical navigation menus, for your inspiration.You might also like these related posts:Showcase of Modern Navigation Design TrendsHorizontal Navigation Menus: Trends, Patterns and Best PracticesNavigation Menus: Trends and ExamplesThe Case Against Vertical Navigation [By the way: The network tab (on the top of the page) is updated several times a day. It features manually selected articles from the best web design blogs!]Showcase Of Beautiful Vertical Navigation DesignsRiot Industries The vertical navigation in this portfolio website is simple and clean in looks yet robust in functionality and interaction. Clicking on “Web,” “Print,” or “Identity” filters the thumbnails on the right, and clicking the “About” menu item shifts the navigation to the right, making way for content on the left.Village Version Here, you can see one of the benefits of vertical navigation: it allow for highly compact and modular menus that appear distinct from the rest of the layout. Sitting in the top-left corner, just below the website’s name, the menu is one of the first things visitors see (at least with left-to-right languages).Bruno Souza This portfolio has a clean and simple navigation design that leaves the visitor to focus on the vibrant content to the right.Cambrin HouseA quite distinctive, original navigation menu with five different typefaces. A bit unusual navigation for a crowdsourcing community.Comfort BrothersNavigation menu on the right side of the layout for a change: although the design is basic, almost rudimentary, it works well and is easy to navigate. Navigation menus do not have to look outstanding.Auberge de l’Ill This vertical navigation design is elegant and functional. Hovering over a menu item triggers a horizontal animation.The Hipstery! This website’s vertical navigation sits right in the middle of where the visitor is focusing when the page first loads. Active menu items are denoted by a pointing hand.Research at MICA The navigation design for the Maryland Institute College of Arts demonstrates another advantage of vertical navigation: it shows hierarchy and allows you to group menu items without resorting to drop-down menus, whose sub-menus are displayed only when the user mouses over an item.Power to the Poster The vertical navigation design on this website is positioned right below the website’s name, making it prominent without drawing attention from the large rotating banner in the top-right.From the Couch The vertical navigation here shows yet another benefit: being able to accommodate more menu items.Nick Jones The portfolio of art director Nick Jones has vertical navigation towards the middle of the page. The menu summarizes his work and has an interactive component that scrolls the menu up and down based on the user’s mouse movements. When an item is clicked, the menu shifts to the left, making room for the corresponding content.Noam Design This dark vertical navigation for Noam Design leaves the menu option for the contact form permanently open.The Music Hall The vertical navigation on this website is grouped into two categories, giving users the ability to quickly find the link to the page they’re interested in.ONETWENTYSIX The vertical navigation in this portfolio reflects the traditional table of contents in a book. Menu items are categorized in two groups.Tailored pixels This simple vertical navigation is presented right below the website’s name, giving it a prominent position in the layout without taking away attention from the main content area. A dark gray background denotes active menu items, with an arrowhead pointing at the content, encouraging natural and effective eye flow.Mellasat Vineyard Mellasat Vineyard’s vertical navigation menu is a modular, one-piece design element that also contains the website name and logo. The menu is a focal element here.SIMPLE LIFE The navigation in this elegant, minimalist, typography-based portfolio is a central element and contributes to the overall layout. The menu items are repeated on the right in a larger font.Debbie Millman This menu creatively weaves in the description and purpose of the website.Utah.travel This interactive menu has a slick slide-out menu that displays sub-links and content when a user hovers over a primary menu item.Mathias Leihu The coloring of this navigation is subtle, but the menu manages to attract the user’s eye through its prominent location in the layout and the author’s high-contrast headshot.Go Media Inc Go Media Inc’s navigation is an accordion that reveals sub-menus. Clicking on a primary menu item triggers an animated downward effect that opens up sub-menu items.Circa, the Prince This dark grunge-themed vertical menu is subtle yet hard to miss because of its position.Glass Tiger Surfboards Glass Tiger Surfboards opts for a vertical navigation menu with low opacity so that the grassy background shows through.Corey Arnold Photography The menu on this minimalist portfolio website has a red see-through background so that the featured photo is visible even when the menu is expanded.Uniquexport This artistic menu is transparent, so that the distinctive floral pattern in the background isn’t obscured.yellowood store This menu has a dark-gray semi-opaque background that allows the background image to show through.Van de Weghe Fine Art This navigation system is revealed when the user hovers over “Menu.” The simplicity of the design is creative; the background images are the distinguishing element.TheyMakeApps.com This menu has illustrated icons beside menu items, which both complement the overall theme and help with visual recognition.Huis Oranje This vertical menu is a distinctive element in this layout. The icons to the right serve as eye candy and as visual representations of the menu items.Washtenaw Community College This menu is interesting because its grainy style is rarely seen on websites for institutions of higher education.Brown Blog Films The navigation here is set against a wooden background, with links in an organic scribbled font.A J Miles The portfolio of A J Miles has vertical navigation as its primary visual element. The menu is fashioned as a piece of paper held in position by tape.RedVelvetart.com This menu has colorful fonts with a hand-drawn look to them, complementing the overall theme.R.I.P. Cube Club This vertical menu is central to the layout. It has large fonts and a 3-D effect.LEAF TEA SHOP & BAR On this website, you can see how big font sizes can get when you have more vertical space to work with.Rick Monroe The personal website of Rick Monroe has navigation links on top of a textured background, right below the website name.Rich Brown The big font size contributes to the minimalist theme of this website.Strip Turnhout This website has an organic hand-written font for its menu, which sets the tone for the layout (which is arranged as a gridded notebook).NATIONAL TELEVISION This menu offers an interesting interaction. When an item is clicked, the menu shifts left or right to make room for the content, thus creating an engaging user experience.polargold This navigation has over-sized fonts, making it the highlight of the layout. Hovering over a menu item reveals an interesting animated effect.Notorious Design In this navigation system, the primary links are vertically oriented. Sub-menu items come out horizontally.Light is Light This simple text-based menu is findable without drawing too much attention from the focal point of the page: the slideshow.gary’s real life The items in this menu are done as strips of paper, adding a nice touch to the illustrated theme.Denise Chandler The vertical menu here takes up a large part of the layout. Hovering on an item reveals a simple CSS animation that moves the right-pointing arrows further right, giving the user a feeling of moving forward.Envira Media Inc This irregularly arranged menu truly embodies the website’s organic look and feel. Icons on the left of each item help with visual recognition and complement the design.Mulletized On this website, menu items are located near the middle of the viewport. The simple navigation adds a certain elegance without dominating the layout.Clearideaz This website’s navigation is unique, looking a little like basket-weaving. Being in the top-right gives it prominence.The Gates Notes Bill Gates’ official website has a unique menu that conveys innovation and forward-thinking: themes that the technology baron surely wants to convey to visitors.Ommwriter This menu’s items are displayed as translucent circles. On hover, a symbol is revealed that relates to that particular menu item, making the menu memorable.Gianni’s Steakhouse This menu is slightly tilted, and its skewed orientation is sure to grab the visitor’s attention. The design is appropriate for the website, which is for a restaurant.Aussie BBQ Legends Bold, striking, eye-catching. These adjectives aptly describe Aussie BBQ Legends’ vertical navigation. The menu plays a big part in setting the tone for the website.Sid LeeSid Lee agency uses an interactive navigation menu on the left side of the page. Some sections of the navigation have sub-sections which are displayed next to the primary navigation.Harmony RepublicHarmony Republic places the navigation menu on the left side of its logo. Unusual placement, but it works nicely. The current navigation section is highlighted by a white background.(al)© Jacob Gube for Smashing Magazine, 2010. | Permalink | Be the first to comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: menus, navigation, showcases

  Many of us today probably use the Web to book tickets and find information about movies. By selling tickets and entertaining visitors, websites help movies succeed at the box office and earn public approval. And yet, website developers don’t get any public recognition for the success of movies. Isn’t it a bit unfair in the Internet era not to bestow a single bit of appreciation for the presentation of movies online?Most modern movie websites are built in Flash, even when it’s totally unjustified. The websites often lack usability standards and require users to click through splash pages and introductions in order to access content. They have the luxury of being able to neglect common principles and standards because they garner attention merely by their association with the movies they promote. Let’s suppose, though, that these developers got their own Palmes d’Ors, Oscars and Bears. Wouldn’t this be strong motivation to create outstanding and usable websites?In this post, we imagine Oscars being given to both movies and their websites. This is, of course, not a new award from Smashing Magazine and far less an attempt to assume the right and honor of the Academy of Motion Picture Arts and Sciences. It’s just a fun way to observe the latest trends in movie website design and to showcase the best websites of the 2009 blockbusters, as well as recent and upcoming movies.[Offtopic: by the way, did you know that Smashing Magazine has one of the most influential and popular Twitter accounts? Join our discussions and get updates about useful tools and resources — follow us on Twitter!]Nomination: GraphicsThis is perhaps the most prestigious category in our virtual ceremony. It refers to the way a design uses photos, illustrations and graphic elements to create a pleasing and memorable visual experience.The Nominees Are…Law Abiding Citizen For its use of bold and expressive photos.Transformers For the Transformers models (of course).Ice Age 3: Dawn of the Dinosaurs (UK official website) For the icy illustrations.Alice in Wonderland For achieving wonders with illustration and photo manipulation.Cloudy With a Chance of Meatballs For the tasty illustrations and delicious little elements in the design.How to Train Your Dragon For some red-hot graphics.A Town Called Panic For the funky plasticine illustrations.And the Winner Is…The attention to detail on the Alice in Wonderland website is impressive. A seamless combination of digital illustrations and photographs and plenty of small Wonderland-style graphic elements makes this design eye candy.Nomination: InteractivityMany movie websites, especially ones for animated movies and action blockbusters, rely on interactive elements to engage visitors. The following websites of popular movies from 2009 deliver a solid interactive experience and are deserving nominees.The Nominees Are…Broken Embraces For the beautifully executed stack of torn photos, which serves as the navigation menu.Halloween 2 For the terrific (and terrifying) 3-D elements.District 9 For the interactive panoramic views of District 9.Cloudy With a Chance of Meatballs For the customizable food rain and lively characters.Harry Potter and the Half-Blood Prince For the magical image gallery.And the Winner Is…The website for Cloudy With a Chance of Meatballs is a joy to explore, mainly because of its interactive features.Nomination: Dynamic EffectsMovie websites have invariably included at least one trailer on the home page or on a splash page. The trailer usually plays automatically. But a growing trend is to use clips from the movie as a pre-loader or background. In doing so, film websites typically employ Flash animation and motion graphics for maximum visual impact. The following websites feature some excellent dynamic effects of various types.The Nominees Are…Halloween 2 For the spooky and shimmering video clips.Where the Wild Things Are For the beautiful and organically integrated video.Transformers For the animated Transformers (showing actual transformations would have been better, though).Watchmen For the incredible dynamic effects.Terminator Salvation For the well-styled video stream.Lovely Bones For the seamless combination of video fragments and images.Star Trek For the fantastic transition effects.And the Winner Is…The navigation on Star Trek’s official website simulates the experience of walking around the spaceship. This effect is excellently implemented and takes the visitor deep into the movie’s atmosphere.Nomination: Harmony With MovieMovie websites are of course all about the movies they promote. But screenshots, trailers, photos and images alone may be not enough to convey the atmosphere of a film. A lot more can by done by weaving the story and concept in with the design elements. Each website showcased below does a great job of recreating its movie’s feel and drawing visitors in.The Nominees Are…Alice in Wonderland For the gallymogger details throughout the design.Star Trek For the great use of space-themed material, which everyone loves.Drag Me to Hell For the shiver-inducing fly animation.Surrogates For the futuristic robot features.Up in the Air For the nifty airplane-style elements and icons.District 9 For the great use of alien-themed material.And the Winner Is…Our virtual Oscar goes to District 9. The movie’s dismal atmosphere is communicated well on all of the website’s pages. In fact, District 9 offers six distinct “experiences” apart from the official website. Features include interactive panoramic images, stylized graphics and video clips, as well as separate pages for humans and aliens (being faithful to the movie’s spirit).Nomination: Best Exclusive ContentThousands of online resources and databases are available where users can find out information about past, current and upcoming movies, watch trailers and book tickets. So, exclusive content is a kind of trump card for official movie websites. Without it, the websites are almost useless. Still, many studios continue to offer a minimum of content, such as trailer, screenshots, synopsis and a couple of posters for downloading. By contrast, all of the nominees for our Best Exclusive Content award offer treats for even the most fastidious of movie fans.The Nominees Are…Alice in Wonderland For the fun facts about the movie.Nine For the screenplay, which is available in PDF format.An Education For the extensive information about the film.Up in the Air For the precise “departure” and “landing” info.Watchmen For the incredible character profiles.The Wolfman For the fascinating insight into werewolf legends and mystery.And the Winner Is…Besides its comprehensive overview of the movie and a number of videos and photos, The Wolfman website offers a good amount of information in the Features section about the mysterious events depicted in the movie and the horror legacy of Universal Studios. Both the content and presentation are wonderful.Nomination: TypographyTypography greatly affects the user experience. Everyone loves beautiful typography, and we just couldn’t leave this element out of our categories. In most cases, a movie website’s attention to typography amounts to choosing an appropriate font family. On some websites, though, you’ll find some really nice work with styling and arranging.The Nominees Are…Halloween 2Watchmen NineHow to Train Your DragonInglourious BasterdsWhere the Wild Things AreBroken EmbracesAnd the Winner Is…The Inglourious Basterds website is practically the only design here that expands the work of the film’s art through typography. Both the selection and arrangement of type here evoke the spirit of the film and make the website easy and enjoyable to read.Nomination: Fun GamesGames, fan kits and other activities of the sort can be found on movie websites from various genres, from family comedy to horror. This entertainment engages visitors, in turn further promoting the film. Truly unique and engaging activities have made it into this category.The Nominees Are…Cloudy With a Chance of Meatballs For its five ways to play with food, one of which is in 3-D!Fantastic Mr. Fox For the lovely game interface design.Transformers For the fan kit and fan art sections.Sherlock Holmes For the clever test of deduction.Surrogates For the virtual surrogate creator.District 9 For the “non-human” support.How to Train Your Dragon For its wide range of craft activities.Avatar For letting you create your own avatar (not as beautiful as the movie’s, though).And the Winner Is…The website for How To Train Your Dragon offers seven online games and fifteen activities to print out and play. Good enjoyment for the whole family.Nomination: Cross-Media InteractionThe increasingly popular mobile Web and social networks just can’t be ignored by movie companies. Many movies are represented on Twitter, Facebook and other social networks and bookmarking services. Many movie websites have social media panels and widgets that let users get updates and share information about the movies on their own websites and social network pages.iPhone and iPod apps have become common promotional tools as well. Some movies even have community websites that bring people together around certain topics discussed in a film. The deepest and most versatile social media integration is exemplified by the following websites.The Nominees Are…Alice in Wonderland For the wonderful mobile applications.Star Trek For the complete collection of social network links.Pandorum For the deep media interaction (widget, social networks, iPhone game, etc.).District 9 For the earthling and non-human communities.Avatar For providing numerous ways to spread word about the movie.The Twilight Saga: New Moon For attending to all kinds of Twilight fans (take the TwilightMOMs community for instance!).And the Winner Is…With 5 official streams on major social networks, over 15 community websites and 4 items in the App Store, The Twilight Saga: New Moon is the clear winner in this category.Nomination: Best HTML WebsiteMany movie websites use Flash when HTML, CSS and a couple of good JavaScript effects would do. The four websites below break from this convention and prove that good movie website design does not necessarily have to include Flash.The CoveMusic by PrudenceFood Inc.When You’re StrangeAnd the Winner Is…The website for Music By Prudence fully deserves this award. The website was created by New-York based design duet Bartlett de Boer, which explains the idea for this design this way: “Together with our client, we decided on a Flash-like site, to be supported by WordPress’ content management system. We combined bold typography, huge background images and a smart jQuery application that creates a dynamic effect, presenting all the info in semi-transparent sections. This was one of the most exciting projects we’ve worked on so far.” No doubt, the Music By Prudence website is a credit to Matt Mulleneweg’s brainchild, WordPress, too.Nomination: Best Flash WebsiteMovie websites usually contain a massive amount of media content, which is why Flash is the most popular platform on which to build them. While many websites either overuse animations and dynamic effects or don’t justify their use of Flash at all, some Flash movie websites deliver attractive, entertaining and informative experiences quite well. Below are six movie websites that are worthy of our imaginary Best Flash Website Oscar.The Nominees Are…Alice in WonderlandHow to Train Your DragonInglourious BasterdsLovely BonesSurrogatesUp in the AirAnd the Winner Is…Inglourious Basterds! An attention to detail at all levels of the website, nifty yet unobtrusive effects and plenty of information make this Flash movie website stand out gloriously from the others.Red Carpet StarsSome movie websites that did not win our imaginary Oscars are still worth being showcased. Most of these, though not all, are done in a minimalist style, containing some basic information and a minimum of Flash effects. They are quite easy to navigate and their interfaces are visually appealing. Despite not being nominated here, they deserve some serious Hollywood buzz.City Island A lovely combination of photographs and sketches makes the website for City Island special.Mid-August Lunch This is more an interactive movie poster than a website. The page contains practically no information about the film itself, referring visitors instead to the studio website. Still, it features an original theme that we just couldn’t pass up.Invictus Like the films of maestro Clint Eastwood’s oeuvre, the website for Invictus tries to show the present through the prism of timeless values. How else to explain the use of Flash for this elegant and contemporary design, which could have been done with plain HTML and jQuery?The Hurt Locker Grungy typeface, sandy colors and good still images make this website a worthy online counterpart to the movie.Green Zone Some really great styling in the navigation menu.Diary of a Wimpy KidFunny cartoons and a graph paper texture contribute to the theme for this movie website.The Square The content here is contained in a stylized grid, which doesn’t in the least impair readability and usability. Dark colors and bold grungy textures make for a true “website noir.”Kick-Ass Plenty of games are integrated smoothly in the content here, resulting in a kick-ass movie website!Shutter Island The website for this brilliant movie is another black pearl in our collection. The focus here is on the dark island landscape, complemented by little polished details.Brooklyn’s Finest This is one of the few websites that have a good splash page. Overall, the website for Brooklyn’s Finest has some great photos and unobtrusive Flash effects. The city line shown as a film negative is the cherry on top.The Road The website for this impressive film, based on the Pulitzer prize-winning novel by Cormac McCarthy, is lean as can be. The minimalist design builds mainly on still images from the movie. The quotes from the novel that appear while the page loads (an feature also seen on the Inglourious Basterds website) contributes to this information-rich website.Hot Tub Time Machine The headshots that appear when you mouse over the menu items would make anyone smile. The short introduction is a nice touch, too. The Hot Tub Time Machine website certainly won’t leave you cold.Moon This website is notable for its atmospheric, pseudo-3D background images. The graphics are enriched by transparent elements with frames that mimic a plating effect.Lbs. This website has what you could call a camouflage design: it looks like pure HTML but is fully Flash. But don’t let that annoy you. The website loads relatively quickly and is easy to use. Also, the panorama on the main page is adorable.The Secret in Their Eyes When the subject matter is secrets, a dark laconic design is the way to go.Precious The website for the Oscar-winning film (really!) Precious shows great use of video to get visitors involved in the story.Valentine’s Day The website for Valentine’s Day has a social network-ish look and feel, mainly because the background photos look like the profile pictures on a social network.Please Give Although this is only a “Coming soon” page, showing a trailer, press notes and a Facebook link, the typography merits its inclusion on this list.(al)© Julia May for Smashing Magazine, 2010. | Permalink | 5 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: showcases

  Geo-location was a hot topic in 2009. With so many applications on GPS-enabled smartphones, more maps than ever were accessible to the average person. But how can Web designers and developers take advantage of an increasingly location-aware user base? This article explores existing trends, conventions and the possible future of interactive maps online.[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]The Fundamentals Of Online MapsWhen most people think of maps on the Internet, Google, MapQuest and TomTom might come to mind. These are the giants in the industry, but they are far from the most creative. These companies provide maps as a service. As you’ll see from the mapping applications featured throughout this article, Google doesn’t own the market. There is still plenty of room for creative map innovation.This isn’t a lesson in cartography, but understanding the purposes that maps can serve in modern Web design is important. Three main areas seem to represent the majority of tasks:Navigation and directions,Show relationships and trends geographically,Show points of interest.Interactive MapsThe expansion of Web technology over the past decade has opened a number of doors to presenting data online. One of the most rapidly improving tools for interactive presentation is the map.Interactive maps on the Internet present data most effectively when they invite action from the user. Showing relationships between data is easier when the user has the power to change the visuals. These are advantages that traditional print maps do not have. If a print map is not clear initially, a person can do very little to make sense of it. With online interactive maps, the simple action of moving sliders around reveals relationships between data and content.Panning and zooming are fundamental to the interactive map. These actions enable the user to focus their browser on the amount of information that they’re comfortable with.No Legend RequiredOn traditional print maps, the legend serves as a translator for the symbols used. Contextual windows eliminate the need for legends in many online maps. Instead of having to refer to an explanation of the symbol in the margins, the user simply clicks on a point to find out more about it. The results in fewer steps and less eye movement to accomplish the same goal. To illustrate just how intuitive this kind of action has become to Web users, try out the “America’s Best Adventures” map below: Clicking a dot brings up a contextual window.Legends are still needed in certain cases. Heat maps, for example, display intensity by shade of color, and users usually require a reference bar to make sense of the information. Contextual menus do not make legends obsolete across the board, just for simple “points of interest.”Common Types Of Map NavigationOther than panning and scrolling, there are a number of interesting ways to present digital maps. Below are some the of the most common among modern interactive maps. Keep in mind that mixing and matching most of these methods is possible; one does not necessarily preclude use of others.Drill-DownWhen the user has to move through various levels of specificity of data, a drill-down style of navigation is commonly offered. The drill-down clearly groups information of magnitudes ranging anywhere from the “big picture” down to an individual case.Google Analytics presents a drill-down style for its world maps. By clicking on a specific country, the map reorients itself to mute other countries, and then does the same at the state and city level. This allows the user to control the specificity of data without being overwhelmed.TimelineA timeline slider shows progress over time on a map. The slider doesn’t necessarily have to represent time itself. The main purpose is to show the correlation between the slider’s metric and the map’s content.ZoomThis is different from the drill-down method because with zooming, the map is typically not rebuilt or reorganized for each level of magnification. With zooming, the map allows information to be examined more closely, rather than regroups data for a smaller area.Some data may not be visible until a certain level of magnification is reached. This keeps broader views from being cluttered by details that have little relevance at that scale. An example of this is street names, which are hidden from view at the magnification shown below.Before and AfterLike the timeline approach, this one shows multiple states of the same location. The difference is that the before-and-after method shows only two states. This style has been showing up much more frequently lately, particularly with satellite imagery.After the recent Haiti disaster, the New York Times used composite images taken from space to create an interactive map that showed the destruction. The result was a striking before-and-after illustration of the earthquake’s destruction of Port-au-Prince.Point of InterestIn a point-of-interest map design, everything but the target area falls into the background. This allows the user to focus instantly on the relevant points of interest. Additional information can be conveyed by the relative sizes of the markers, making it easy to discern relationships between locations without clutter.Odopod takes this idea a step further on its contact page by offering a photo of its office’s front. Finding the right building is now much easier.Maps As Informational ToolThe Internet and digitization of information represents an interesting improvement to print maps. Used in conjunction with surveys and user feedback, maps can become an almost real-time representation of information. With this method, comparing two metrics side by side is simply a matter of selecting the desired ranges.The maps on National Geographic’s website illustrate how interactive maps can be used to show worldwide trends from collected data. The Earth Pulse map, for instance, has a menu on the side that allows users to display information based on metrics such as population, meat consumption and deforestation.From the Political WorldLocation gives context to current events. It’s no surprise, then, that news organizations are visualizing world events with some of the Web’s most innovative maps.Perhaps the most heavily mapped period of time was the 2008 US presidential election. Interactive maps were created daily to show voter opinion. Anytime a poll was released, you could be sure that an interactive map would soon follow. Because the information was tied to constantly updated data, a static map would have become irrelevant within hours.In the heat of the race, CNN released a tool that allowed users to assign votes and project which candidate would ultimately win. The map thus not only presented information, but became a tool for generating information.Once the election was over, the country’s voting patterns were mapped as well. One of the more interesting versions was the Washington Post’s map broken down by county. The map used Flash to give a full 360-degree view of election trends. The results of an entire campaign were summed up effectively in a single graphic.This is where maps tend to overlap with (or even become) infographics. The difference is in presentation and design. In the Washington Post’s map, the information was directly tied to a particular area. The data, then, would be relevant only to the context in which it was collected. A 30-year-old female voter in California is not the same as a 30-year-old female voter in New York.Unconventional MapsWhile the majority of maps in this article are of physical locations, don’t feel that you have to stick to that. Geographical maps are not the only kind of maps out there. Maps can also be used to explore more abstract information, not unlike static infographics. GOOD illustrates this with its “Roadmap to Harmony” presentation. The result is both logical and inspiringly creative. “Roadmap to Harmony” breaks the mold of location-based maps.The Future of LocationMost of the maps we’ve looked at are of physical locations and buildings. The future of interactive maps will have to accommodate the role of people, too, and people are a bit more mobile than bricks and roads.Services like Foursquare and Gowalla are making sure that maps and location are a part of the daily lives of smartphone users. Twitter is rapidly expanding its API to include location data. Where you are at any given moment has remarkable implications. This could lead to websites that collect such data and turn it into maps that show movement and trends.Mapping Action from LocationConsider how many people checked in at this year’s SXSWi conference. The entire conference was mapped thanks to the location-based badges of attendees. This was more than just about individuals sporadically updating their location; it was an demonstration of how an entire event’s “personality” could be mapped based on the actions of its participants. With so many attendees checking into each event, the data could be used to determine everything from eating habits to panel interest.People-Centric MapsRelying on GPS only to locate buildings may soon be a thing of the past. We may begin to see contact pages of website designers that have a “Find me here now” section, complete with GPS coordinates? NFL player Chad Ochocinco has already taken this level of interaction to a whole new level. And nothing is to stop the average person from jumping onboard, too (privacy concerns notwithstanding).A Showcase of Maps in Web DesignWe’ve covered a lot of ground today. The showcase below compiles more examples of maps for your inspiration. Thanks to Pattern Tap for making the process of searching by design element relatively painless (even though it doesn’t yet have a map section). Many of the examples below were scavenged from there and other locations. Interactive map for the future development of Innovista, a massive project of the University of South Carolina. Hotel Oxford puts its location in context. EveryBlock displays city news as point-of-interest markers. An exaggerated rendering of building location. KNI uses maps to show studio locations. Even if not perhaps to scale, Victoria Star’s map provides all the information you would need to find the company. A rough guide to finding bars. This one explores the routes of famous expeditions. A jQuery-powered map of open school-teacher positions. An interactive map of the fictional World of Warcraft.Build Your OwnLooking to generate your own map for a project? While JavaScript and HTML5 have come a long way, Flash-based alternatives like amMaps still offer some of the most robust solutions for interactive mapping. Almost every map mentioned in this article could be built using this (or a similar) system.If you’re looking for a non-Flash alternative, Carsonified recently published a great case study on using jQuery for interactive mapping, which explains the process. Know of any other Internet-based mapping systems out there that designers should know about? Share a link in the comments below.(al)© Zach Dunn for Smashing Magazine, 2010. | Permalink | Be the first to comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: showcases

  College and university websites have a lot of roles to fill. They need to provide information for prospective students (both new and transfer), parents of students and prospective students, current students, and alumni. In many cases, they’re also the gateway to the school’s intranet and the public face for both academics and athletics. They often need to include reams of information in a way that makes everything easy to find. It’s a huge challenge.And the truth is: most collge and university websites are horribly designed. Either they look like they were designed fifteen years ago and then forgotten about, or they’re so overloaded with information that it’s almost impossible to find what you’re looking for.But not every college or university website is horrible. There are some excellent sites out there, and below are some of them. If you know others, please share them in the comments to this post![By the way, did you know there is a brand new Smashing Wordpress Book? Push WordPress past its limits!]General Colleges & UniversitiesAppalachian State University Appalachian State University has a simple color scheme and makes great use of icons in their header.Ball State University Ball State University uses a sophisticated color scheme and typography combined with plenty of negative space.Bates College The bold header and grid-based layout work well on the Bates College site.Bennington College Bennington College uses a unique layout and design.Berea College Berea College uses a clean layout, and the cutout in the navigation bar for the logo really sets it apart.Case Western Reserve University Case Western Reserve University uses a unique layout and color options.Champlain College Champlain College uses a sophisticated, muted color scheme and excellent typography.Colby-Sawyer College Colby-Sawyer College has a simple layout with plenty of negative space.William & Mary The bold header image and excellent typography set the William & Mary site apart.The College of Wooster The College of Wooster uses an interactive, animated header.Denison University Denison’s website makes great use of negative space and a simple layout.Dickinson College Dickinson College’s site has a great color scheme and a subtle background image.Elon University Elon University’s site includes a lot of details that make the site look really polished.Hamilton College Hamilton uses a simple color scheme and straight-forward navigation.Hampshire College Hampshire College uses a unique, sophisticated color scheme and typography.Lenoir-Rhyne University Lenoir-Rhyne University has a clean layout and bold header slideshow.Marlboro College Marlboro College makes good use of a simple layout and color scheme.Middlebury College Middlebury College has a completely unique layout with excellent typography.Minot State University Minot State University uses plenty of negative space and clean typography.Nebraska Wesleyan University Nebraska Wesleyan has one of the best-looking college sites out there, with a fantastic background image and excellent typography.Northland College Northland College uses unique typography and grunge elements to stand out.Oglethorpe University Oglethorpe University uses a modern color scheme and typography.Ohio Wesleyan University Ohio Wesleyan uses a bold color scheme and graphics.Simmons College Simmons College uses a clean, grid-based layout and sophisticated color scheme.Sweet Briar College Sweet Briar College steps outside of the norm for a college website and uses a more relaxed, feminine design (appropriate for a women’s college).Syracuse University Syracuse University has a fantastic grid layout and modern color scheme.Thomas Edison State College Thomas Edison State College has a great illustration in their header and a sophisticated color scheme.Tufts University Tufts has a unique layout and excellent typography.The University of Alabama The University of Alabama uses a grid layout and plenty of negative space.University of Connecticut The University of Connecticut’s site has a simple layout and navigation.University of Maine Farmington The University of Maine Farmington’s website uses a basic grid layout and great typography.University of Miami The University of Miami uses a muted color scheme and simple, horizontal navigation.University of Minnesota Morris The University of Minnesota Morris’s site incorporates a number of small details that give the site its polished look.University of Nebraska-Lincoln A simple color scheme and clean, grid-based layout give the University of Nebraska-Lincoln’s website a polished and sophisticated look.University of Portland The University of Portland uses a simple layout and color scheme with plenty of negative space.University of Rochester The large background image and non-standard navigation set the University of Rochester’s website apart.University of the Sciences in Philadelphia The University of Sciences in Philadelphia uses a fantastic bright color scheme and clean typography.Ursuline College Ursuline College has a simple layout, good typography, and lots of negative space.Vancouver Island University Vancouver Island University uses a grid layout and fantastic, monochromatic color scheme.Wake Forest University Wake Forest University’s site has clean typography and a simple layout.Wesleyan University Wesleyan University uses a grid layout and sophisticated color scheme.Westmont Westmont utilizes a slideshow header and great color scheme.University of Aberdeen The University of Aberdeen has a fantastic grid layout.Bournemouth University Bournemouth University uses bright accent colors and tabbed navigation.University of Bradford The University of Bradford uses bright accent colors and a grid layout to stand out.University of Chester The University of Chester uses an obvious grid layout, an animated header, and simple navigation.Edge Hill University Edge Hill University has a header slideshow, minimalist color palette, and lots of negative space.University of Hull The University of Hull has a unique layout, simple navigation, and great accessibility features.Kingston University London The Kingston University London’s website uses bright accent colors and simple navigation.University of Leeds The University of Leeds has a simple layout, minimalist aesthetic, and good typography. They also make excellent use of icons to simplify navigation.University of Oxford Oxford uses a simple color scheme and clean layout and makes good use of negative space.University of Southampton The University of Southampton has a bold header and simple color scheme.Community CollegesSalt Lake Community College Salt Lake Community College uses photorealistic and grunge elements, combined with a unique layout.Passaic County Community College Passaic County Community college uses an obvious grid layout and a great color scheme.Anoka-Ramsey Community College Anoka-Ramsey Community College has a unique color scheme and a good use of negative space.Columbia State Community College Columbia State Community College has a simple layout and color scheme with clean typography.Fashion Institute of Design & Merchandising FIDM uses an excellent bright color scheme and a prominent slideshow.Jamestown Community College Jamestown Community College’s site has a simple layout and navigation.Joliet Junior College Joliet Junior College has a simple layout with a good use of icons.Hagerstown Community College Hagerstown Community College has a good color scheme, clean typography, and simple navigation.Lone Star College System Lone Star College System makes good use of transparency.Washtenaw Community College Washtenaw Community College has great hand-drawn elements, and a unique layout and color scheme.Northland Community & Technical College Northland Community & Technical College has a sophisticated layout and color scheme.Northwest Iowa Community College The Northest Iowa Community College site uses a mix of collage, photorealistic, and hand-drawn elements.Art and Design Colleges & UniversitiesThe Art Institute of Boston The Art Institute of Boston combines a simple layout with bold header graphics.Kansas City Art Institute The Kansas City Art Institute uses bright colors, a collage-style background, and loose grid layout.Memphis College of Art The Memphis College of Art site uses bright bright pink accents combined with a simple design and clean typography.Minneapolis College of Art & Design The patterned background, animated header, and clean typography set the site of the Minneapolis College of Art and Design apart.Moore College of Art & Design Bold graphics and a textured background makes the Moore College of Art & Design site stand out.The Ontario College of Art & Design The Ontario College of Art & Design uses a grid layout and modern orange and white color scheme.Pennsylvania College of Art & Design The Pennsylvania College of Art & Design uses a modern color scheme and bold header.California College of the Arts The California College of Arts uses a unique color scheme and animated header.University College Falmouth University College Falmouth’s site has bright accent colors, lots of negative space, and simple layout and navigation.Maryland Institute College of Art MICA uses a grid layout, muted color scheme, and excellent typography.SCAD SCAD’s minimalist light-on-dark design sets it apart.Corcoran College of Art & Design Corcoran’s mix of minimalist grid design and bold colors is fantastic.Emily Carr University of Art & Design Emily Carr University of Art & Design has a wonderful minimalist layout and clean typography mixed with bold accent colors.Oregon College of Art & Craft Bold background, great typography, excellent navigation.Ringling College of Art & Design The grid layout and bold background give the website of Ringling College of Art & Design a unique look.Other Institutions, Colleges & UniversitiesAsian University for Women The Asian University for Women’s site has an excellent gold and maroon color scheme and plenty of negative space.California Institute of Integral Studies The bold typography and great color scheme of the California Institute of Integral Studies sets it apart.Rochester Institute of Technology The orange and cream color scheme, simple navigation and clean typography make the Rochester Institute of Technology’s site unique.ConclusionWhile the vast majority of college and university websites out there are in need of serious overhaul, there are some fine examples of sites if you look hard enough. If designing a site for a college or university, remember that simplicity and negative space are both important, regardless of the amount of information a site needs to contain.© Cameron Chapman for Smashing Magazine, 2010. | Permalink | One comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: showcases

  China is a country with five thousand years of civilization. It is a multi-national entity extending over a large area of East Asia. China’s cultural influence extends across the continent, with customs and writing systems adopted by neighboring countries including Japan, Korea and Vietnam.China has gone through numerous ups and downs and twists and turns, from wealthy and prosperous (as during the Tang Dynasty back in 618–907 AD) to powerless and colonized (as during the Qing Dynasty, just around 100 years ago). Now China is reopening its door to the world again, embracing the latest trends, concepts and technologies, the World Wide Web being one of them.In our interviews with six well-known designers in China, each of whom wears different hats, the recurring theme was that China’s Web design industry is rising like a spiral from imitation to innovation and user-centered design.Chinese Web Design: Dongpai [By the way: The network tab (on the top of the page) is updated several times a day. It features manually selected articles from the best web design blogs!]State Of AffairsThe designers we interviewed had much to say about the direction of Web design in China, the status quo and trends. The individuals are spread out across four major cities in China, and they are:Yu Guo Former chief designer at Baidu, China’s largest search engine. Current city: Beijing.Whitecrow Zhu Co-founder of UCDChina, and principal product experience designer at Alipay, a subsidiary of Alibaba. Current city: Hangzhou.Junchen Wu Co-founder of UCDChina, and director of products at Tuniu Travel. Current city: Nanjing.Lytous Zhou Visual designer, UI lead at CK Telecom and author of the book UI Evolutionism. Current city: Shenzhen.John Woo Lead of the user-experience team at Google China. Current city: Beijing.Rex Song Freelance information architect; co-founder of UCDChina. Current city: Beijing.The interviews were conducted via phone, Skype and Google Talk. Questions were sent to the designers before the interviews to give them context, but the actual interviews were semi-structured. Being interested in the scope of their thoughts, we asked them not to limit their answers to just “Web design.” The designers were told that Web design here refers not only to visuals, CSS and the front end, but also the back end, infrastructure, design rationale, cultural elements, user-experience design and research and so on. We wanted the designers to express their thoughts as openly and as creatively as they wanted to.MFM Moliyo, a game website.Question: How do you see the status quo of Web design in China?Yu Guo: Almost 70% of Chinese Internet users are under 30 years of age. They are young, open, and they adapt to new things quickly. They like to play games online and enjoy looking for ways to entertain themselves online. So, you may see visually attractive elements on many Chinese websites, the purpose of which is to cater to this group of users.Whitecrow Zhu: About two years ago, we witnessed a huge trend where designers in China were imitating Korean websites in their use of Flash. Flashy and colorful design was once the trend. However, with the introduction of Web 2.0, websites in China are improving. Users are exploring the content as opposed to exploring solely the visuals. Visuals alone do not satisfy Chinese users any more. They are looking for useful and helpful content, and they want to contribute to the websites as well.Junchen Wu: It’s on an upward trend, getting better and better, but like a spiral. In terms of Web knowledge and techniques, Chinese designers are on par with designers in Western countries, but they have not reached the point of fully utilizing that body of knowledge. An excellent example of this is user research. Many designers know the concept, but they hardly include it in their design practices. They know of usability testing, but they rarely do it.Lytous Zhou: Well, two points. One, limited budgets are very common in China’s Web design market. As a result, Web design ends up with overwhelming visuals to attract attention. It might be flashy and pretty at first sight, but the information architecture might not be well planned, and usability can be poor. Regarding the second point, Chinese Web design tends to be very localized, as it should be.Chinese web design: Midea Microwave OvenFor example, Alipay, a byproduct of Taobao, became a successful standalone product because it took into consideration the purchasing behavior and psychology of Chinese users. China is a big country, and some websites are successful because they cater to particular geographical locations. The other side of the coin is that Chinese Web design is not quite international yet. It’s such a huge market and can sustain itself without even reaching out to the international market. You will see that UCDChina.com and a lot of other Chinese websites don’t have English versions, even in their navigation.John Woo: China has not formed one distinctive Web design style yet, because the country is big, and Chinese users are complicated in many ways. The impression of foreigners of Chinese Web design might be that it is busy and flashy, but I take it as practical. When Flash design was the fashion, many designers (or their bosses) wanted to use Flash to make their Web pages attractive. When SNS was booming in the US, it was soon introduced in China, together with the Facebook and Twitter design styles. When it’s practical and useful, many Chinese people will just borrow the concept and develop it further. Baidu, QQ and Taobao won business and respect this way.Rex Song: China has a large population, and the saying “the more, the merrier” applies to its Web design. You will see some Web pages that are busy and cluttered, with designers or stakeholders trying to put everything on the page. The other thing is that, currently, the primary motivation to go online for the average web surfer in China is entertainment. So, Web designers in China tend to make their websites play-ish, SNS-ish and visually attractive, as we saw with the popular trend back in 2004 to imitate Korean Flash websites.ShoeboxChinese Web Design In A NutshellSo, do you now have a rough idea of the status quo in Chinese Web design? Although our interviewees tended not to reduce Web design in China to certain patterns, we summarized a few bullet points based on the topics most frequently mentioned in our interviews.1. Flash-Heaviness: Born of ImitationFlash design has been a source of constant debates for years. The fact that optimizing Flash objects for search engines can be difficult is a major turn-off for some designers.However, Flash was called out, and it’s the most frequently mentioned keyword in our interviews. Back in 2004, when Korean websites were all in Flash, Chinese designers and business owners considered Flash the “fashion.” Rex Song mentioned that when this trend was extremely popular a few years ago, you could even download ready-made Korean-style Flash ZIP files from online stores for little money, so that you could do it quick without spending a lot of effort.Google is renowned for its focus on simplicity. But take a peek at the nuances that distinguish Google China and Google US:The design of Google China is a bit more vivid than that of Google US, with a hint of animation added to the former to enhance the richness of Google search. By the way, this concept was first implemented on Google Korea and Japan, although both of them have since reverted to a more static interface.Although Flash implementation began as imitation, it is now increasingly featured in the portfolios of design studios and freelancers, on websites to launch new products and for products geared to the younger generation.Shanghai Vive is an old Shanghai cosmetics company that is trying to rebrand and attract high-end consumers. Its branding uses Flash heavily, depicting an elegant and high-class life.Cool Bear Hi, one of the product lines of Great Wall Motor, has a Flash website to promote its new car release.To accommodate low-speed Internet connections, Cool Bear Hi does a good job of showing the progress of the loading Flash.The text below the car on Cool Bear Hi changes as more Flash loads. With the chipper text there to assuage visitors, the loading Flash doesn’t seem that boring to watch. Above are a few screenshots we took, and below is what it says at various points in the loading process:At 4%: “Choose Cool Bear Hi. Share your happiness.”At 22%: “Wear a smiling face every day, and say Hi to everybody.”At 41%: “Cool Bear is impatient, ‘Why hasn’t anybody taken me home!’”At 70%: “Book a test-drive appoint. Get your special gift and reward points.”Mian Dian Fang, a ready-to-serve breakfast company, also uses heavily Flash on its corporate website. The animation gives the steam bread and “baozi” a human touch, having them do morning exercises and other activities. The metaphor persuades customers that the company serves a healthy breakfast.Let’s look at how Mian Dian Fang shows its loading progress:The loading animation parodies the yeast process: the flour gets bigger and bigger, until you can see a full-blown website.Shoebox, a shoe brand for the younger generation in China, uses Flash across the whole website to show its grasp of fashion. In addition, the sketched art on the home page and old brown newspaper color for the background set up Shoebox’s philosophy: taste is an attitude of life; start with the simple; fashion is a kind of sport; start with Shoebox.Lenovo Mobile O1 takes advantage of personalities and embeds their stories in Flash to present the features, functionality and usefulness of its new product, Lenovo O1.Artlans, an interactive design studio, also uses Flash, especially for its menu buttons, the call to action and the language switcher. Design studios may not want to use Flash all over their portfolios, but rather in a few key places to show their skill at using Flash for clients.Idea Design, a design studio that uses Flash in full swing.2. Designing for EntertainmentWe really liked our one-on-one interviews because not only did we hear different stories from different people, but we also heard certain other stories from everyone. For example, Whitecrow, Lytous, Yu, and Rex all talked about the “entertainmentalization” of Chinese Web design. “When a social networking website comes to China, it must become a game website,” said Whitecrow.A case in point is a feature provided by Kaixin.com (Kaixin means “happy”), which recently spurred a social phenomenon in China: “Stealing vegetables.” Kaixin pretty much copied Facebook’s navigation and user interaction. But it’s different in what it allows you to do: set up your “Happy Farm,” build your house, grow your own vegetables and then steal your friends’ vegetables when they are ready to be harvested. Some dedicated players even made Excel spreadsheets to track their friends’ harvest season in order to expedite stealing. It’s like any other video game but embedded on a social networking website, allowing you to play with a wider variety of users. “Stealing vegetables” became so popular that it drew the attention of censors from China’s Ministry of Culture. Under pressure from the Ministry, the game is now called “Picking vegetables,” a less offensive euphemism for mainstream Chinese culture. Online players still prefer the more accurate name.Happy Farm Happy Ranch Happy Orchard The application was recently added to Facebook, but it is only for Chinese-speaking users at this time.Lipton Milk Tea features a “Hug Relay” game that you can play right on the website. Hug your friends by validating your account on Renren, another social networking website in China, and gain hug points.Once you accumulate enough hug points, you can shop on the online store and purchase gifts, an incentive to maintain momentum in the game:Like Lipton, M&M China also uses an online “relay” game to engage visitors to its website.I Love G3, a website from China Mobile to promote the 3G network and 3G cell phones, presents an animated Flash questionnaire for users to play around with.After you have answered a series of questions such as, “How would you kill time on a train?” and “How would you cross the ocean?” the system analyzes your personality and recommends 3G cell phones to match you:3. Designing for ClicksUnlike Latin and Germanic languages, Chinese is rooted in hieroglyphic characters. Typing in Chinese on an alphabet-based keyboard can be slow, especially for middle-aged and older users. So, you will see that some website user interfaces are extremely busy: text and image links everywhere—”the more, the merrier,” as Rex Song points out. These websites are designed for clicking, as opposed to searching (although keyword search is an essential component of any information-rich website).Yoho, an online shopping platform for the younger generation, takes advantage of every sliver of real estate on the page to promote its products. Yes, a search box is in the top-right for you to search, but with all of these images and hyperlinks, it’s more enticing to just click, click, click.It’s the same with China Visual, a visual design resource portal. The home page presents all sections of the website as text and image links, giving you a quick peek of the content.NetEase (aka 163.com), one of the largest news portals in China, takes full advantage of the Web reading pattern of Chinese users: i.e. clicking.Above is a screenshot of NetEase’s home page. The Chinese lunar New Year was approaching when we were writing this article, and you can see that this website uses red, a color symbolic of festivals, for the background. The page is filled with headlines of news and featured articles as well as ad spots. You can perform a search at the top of the page, but by scanning the entire page, you get a sense of what’s happening today. And if you’re interested in any of the headlines, just click—that easy.All that said, many websites are working to unclutter their UI, increase the font size and line spacing and enhance readability. “Sina.com, if you have been paying attention to its redesigns all the way back to the late 1990s, is doing better and better at information design,” said John Woo, lead of the Google China UX team.4. Designing for CultureWhen asked, “Can the world learn anything from Chinese web design?” Lytous Zhou answered without hesitation: “Culture. The Chinese respect Dao, and we have our own set of values and mores. Websites targeted to the Chinese market should follow the online habits and aesthetics of Chinese users. For example, cultural symbols, calligraphic elements and festivities: all of these could be integrated into a Web design if applicable. A lake may just be a lake, but associating a fairy tale with a lake makes it prettier.”True, if you add a fairy tale and human touch to a lake, the user’s perception of it would change.Pizza Hut China, which is an example I like to use every time I explain cultural differences, uses Chinese elements heavily all over its website: in the color scheme and family theme. Warm reds and yellows are colors symbolic of festivity in China, and the family dinner is highly regarded in Chinese society.By comparison, Pizza Hut US highlights fast food and online ordering on its home page. Red is also Pizza Hut US’ theme color, but it’s more solid, darker and cooler than the warm red on the Chinese website.Same with McDonald’s China website, where one main menu is dedicated to the “Happy Family Party.”Tong2 Studio has a unique look and feel with this traditional Chinese floral pattern on its background.Six Station, whose home page is a Chinese ink and watercolor painting in Flash, opens its creative and innovative mind to clients.Dongpai Design, an interactive design studio, has an interesting mini-website that borrows from the “Three Kingdom” story (a period of Chinese history) to communicate its design philosophy and values.While John Woo points out that incorporating national and cultural elements into design is not limited to the Web, he acknowledges the practicality of Chinese Web design—that designers will borrow anything that might be useful to them or their users.Want An Even Bigger Showcase?Not enough visuals for you? Here is a whole bunch of more websites to give you a better sense of design in China.UI Seven A design studio.IDT A personal showcase that records the designer’s 12-year love affair with his girlfriend (now wife) and his own professional growth as the Web evolved during those years.Youguan Cookies Also uses Flash animation to promote its product line.Xin Hongru An interactive design agency that uses both Chinese elements and Flash to showcase its work.Thinkpad Edge A new product line of the Thinkpad laptop.Moliyo MFM An online video game website, designed for clicks.361 Sports Borrows the theme of the 2010 Guangzhou Asian Games for its home page.Dove Chocolate China Uses Chinese elements and the lunar New Year to decorate its home page.BangbangWa A snack company whose website is rich in games and Flash.Brain Town A personal portfolio website.ShuXia A platform to showcase the creations of members.Jossy JoA clothing brand.Apsou An interactive consulting agency.Mole Lele A cartoonist’s personal website.WEBE7 Enterprise Network Interactive A portfolio website.Sanshen Toscana A real-estate website that relies heavily on Flash.Wotoon Design A design agency.Shaopan Film StudioX’mas Tree Workshop A mini games website where you can create your own Christmas tree and send it as an e-card to your friends.The GF Space A design agency.HAHA DIY A neat website for DIY home ornaments.Yimei Cross StitchHappy Basket Designed for clicks.WuHansoufang A pretty cool Flash website.Chateau Junding A domestic wine brand.TIIDA Incorporates a family theme into its Flash design.Magic Workshop A kids clothing company, using Flash-animated cartoons to capture the company’s culture.JJ Ying A neat personal portfolio website.Beijing Orange Advertising A creative showcase website.Nescafe Another website rich in both games and Flash.Yee Chino A restaurant.Gold Chino The sister restaurant of Yee Chino.Guoguo Diary A fairly simple but creative personal website.Rancho Santa Fe A real-estate developer in Shanghai.Challenges, Opportunities, TrendsChallengesWhen it comes to challenges in the Internet industry, one of the frustrations mentioned by Whitecrow, Junchen, Rex and Lytous is government censorship. YouTube, Twitter, Facebook, and Flickr are all blocked in China because some of their content is considered “inappropriate.” And for compliance purposes, “Sina Microblogging has a team of humans whose job is to censor content, in addition to machine filtering,” says Whitecrow.The international debate on how free and open the Internet should be is ongoing (see Nussbaum, 2010), and there is still no universal “policy” for the Internet. But without an open environment, China could be impeded from learning from and catching up to other countries.Still, every coin has two sides. “It limits your freedom,” says Whitecrow Zhu, “but meanwhile, it has a positive effect on UI design and content presentation. There is less room for gimmicks. It forces you to concentrate on useful content and how to present your content.”The other challenge mentioned by Junchen Wu and Rex Song was the lack of quality educational programs: “Vocational schools might teach you how to use Photoshop and Dreamweaver and how to code in HTML, CSS and JavaScript, but they may not teach you design thinking and the logic behind design. The World Wide Web is still young, and at higher-education institutions we have not seen any Information Architecture or User Experience Design degrees yet.”Our interviews did point to the fact that designers in China have not yet taken full advantage of rigorous research methodologies. Take what Junchen Wu said about the status quo of Chinese Web design: “Many designers know the concept, but they hardly include it in their design practices. They know of usability testing, but they rarely do it.”And in response to the question, “How do you convince stakeholders that a design is right?” Rex Song brought up the notion of “guanxi” and trust, and he thought the concept A/B and multivariate testing was “Western” and might yield a “low ROI.”This is understandable on the one hand, because China has a long history of interpretive reasoning, be it Confucianism or Daoism. On the other hand, Chinese Web designers in general have a long way to go in using hard data to back up their design choices.One might argue that the designer’s job is simply to design, the fact is that you need reasons to support your decisions that affect layout, color scheme, positioning of elements, user interaction and so on. Only “25% of the designers who relied on their personal opinion were right. A research study conducted by the Neilsen Norman Group (2009) concluded that “you’d be better off tossing a coin than asking advice of these people.” This cannot, of course, be said of everyone, but it speaks to the importance of data.Opportunities and TrendsWe were inspired in all six interviews by the discussion of the opportunities and trends in Chinese Web design.Question: What trends do you foresee in Chinese Web design?Yu Guo: E-commerce, I would say. Do you know Taobao? Some of my female colleagues have bought soy sauce, pickles and snacks that I’ve never heard of at Taobao. They love it. This is the market in China, and there is demand. I think every company should take advantage of it.[Authors' note: Taobao is one of the largest shopping platforms in China to connect buyers and sellers of "baobei" (treasures). Out of curiosity, we searched for chocolate on Taobao and found those seasonal truffles that are sold around Thanksgiving and Christmas exclusively at Costco, the largest warehouse membership club in the US.]Whitecrow Zhu: I think Web design in China is moving towards integrating more and more user-generated content. Douban, an online book and movie club, is a good example. Like YouTube, the majority of the website’s content is user-generated, and it has been pretty successful. Douban existed before YouTube, by the way.Several years down the line, e-commerce in China will be in full bloom. E-commerce is not tied to any ideology other than simple economics and consumer interest. It has less of a chance of being censored, and people demand it.Junchen Wu: Creating more value for customers. Listen to what they say, look at what they do, do what they do and think what they think. My belief is that Chinese Web design is getting better and better, in an upward-spiral trend.Lytous Zhou: Focus on users and your service. I don’t think we’ll see anything unnecessarily extravagant, like crammed content and excessive visuals. Features, functionality, industry standards and meeting customer needs are the trends, I believe. And you’ve got to think outside of the box.John Woo: Functional, useful and usable. Making websites flashy, with lots of reds and greens, is absolutely unnecessary. Focus on user essentials and user needs. Though not a website, the Tianyu (KTouch) cell phone is very popular in China these days, and I bought six for my family: four with big font display and handwriting input for my parents and parents-in-law, one with 3x optical zoom and an 800 MP camera, and one that looks like lady’s powder case (see picture below). Tianyu was a “Shaizhai” manufacturer but is now a registered company with a pretty good share of China’s cell phone market. Why? It focuses on user essentials and basic needs. Websites are no different.[Authors' note: "Shanzhai" literally means "villages in the mountain with stockade houses." The use of shanzhai became popular with the outstanding sales of shanzhai cell phones. Although shanzhai companies do not use branding as a marketing strategy, they are known for their flexibility in design to meet specific market needs. Shanzhai cell phones can be sold at prices much lower than normal cell phones. (Wikipedia, 2010)]Rex Song: In terms of online trends, we will develop our own Web design style using the backdrop of Chinese culture. Formatting-wise, we will be in line with the mainstream world, creating more user-centered designs and offering a better user experience.Wrapping UpThe Web in China is young, and Chinese designers are playing catch-up. Despite the challenges, we see even more opportunities: smart people, a big market, increasing demand, flexibility and innovative and user-centered design thinking.On many Chinese websites, we’ve already seen the “upward-spiral trend from imitation to innovation and user-centered design”. Innovation in China is a constant goal. It is being pushed in President Hu Jingtao’s State speech all the way down to classroom curricula. Says Bruce Nussbaum (2009), “To its credit, China has made design a national priority and is pouring billions of yuan into design education.”Through our interviews, we also collected some resources that our designers would like to share with Smashing Magazine readers (including those in languages other than Chinese).EventsUCDChina Book Club Meetups These monthly meet-ups occur on the third Sunday of every month in China’s eight major cities: Beijing, Shanghai, Nanjing, Shenzhen, Guangzhou, Hangzhou, Xiamen and Chengdu. They set a topic for each month, and club members can borrow the books from UCDChina library and return them at the next meet-up.UCDChina Annual Conference The first conference was held in Guangzhou in 2009. It’s free to attend.UPA China Annual Conference The UPA China Chapter conference, different from UPA International. The conference is usually held on “Usability Day” every year.Designer and Developer Front End Technology Forum A biannual forum for designers and front-end developers in China.Books, Blogs and Online ResourcesUI Evolutionism About HCI design on mobile devices, written by local designer Lytous Zhou.Emotional Design: Why We Love (or Hate) Everyday Things A classic must-read about design and emotion.Designing Web Interfaces: Principles and Patterns for Rich Interactions A book about design patterns for building Web interfaces with rich interaction.Yahoo! Design Pattern Library This website was credited by our interviewees as “one of Yahoo’s most important contributions to the design industry.”Douban An online book and movie club, mostly user-generated comments and criticism.iFeng Phoenix News Media, a new portal.Since 1984 About design and beautiful things in the world.Metroer About reading, including “design reading.”Mooogu About industrial and interior design. A good website to find inspiration.Apple4us Community blog for tech demos, reviews and ideas.Ffffound! An image bookmarking website.Notcot For your ideas, aesthetics and amusement.We Heart It A website that lets you create an online album from your favorite images and videos.Core77 Design magazine and resource.Engadget A Web magazine with obsessive daily coverage of everything new in gadgets and consumer electronics.The Design Inspiration Like its name suggests…Dbcut A Korean design community portal.Your Voice Is Important to UsWhat do you think about the Web design in China? We couldn’t cover everything in one post, and we are sure we have missed some perspectives. We look forward to hearing your feedback!Related PostsYou may be interested in the following related posts:Shalom! A Showcase of Web Design in IsraelShowcase of Web Design in RussiaShowcase of Web Design in GermanyShowcase of Web Design in MexicoShowcase of Web Design in IrelandAbout the AuthorsThis guest post was written by Kejun Xu and Hendry Lee.Kejun Xu, an information architect devoted to user experience research; a user researcher dedicated to user-centered design; a usability engineer engaged in making the Web easier to use; and a translator and interpreter who loves inter-cultural communication and bridging people together. She designs for her users, making their lives easier and hassle-free. She blogs once a while, about UXRnD, to record the auto parts and loose diamonds, in case she forgets.Henry Lee helps people overcome strategic and technical challenges in starting and growing their blogs. Read more of his blog tips, including website building with blog software, strategies, hosting, social media, Web writing, design and more. You can also hire his team at Marketing Loop to build a Web presence for your business or personal website. Stay in touch with Hendry by following him on Twitter.(al)© Kejun Xu for Smashing Magazine, 2010. | Permalink | 8 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: china, showcases

  Every now and again we showcase fantastic favicons, those tiny pieces of art that you’ll find in your browser’s address bar or when rifling through your bookmarks. These little gems are important because they serve as visual indicators to help visitors easily identify content in their browser. That aside, favicons are just nice to look at, and way too many websites don’t make use of them. We want to change that, which is why we are presenting what is now the ninth episode in our favicons series: a small article with tiny images and fast loading time… for a change.We’ve written numerous articles about favicons in the past. If you’d like to find out more, feel free to look at these posts:Favicon Episode 8Favicon Episode 7Favicon Episode 6: Black, Abstract and Hand-DrawingEpisode 5: The Delicate BeautiesPart 4: Creative Favicons: Tiny ArtworkPart 3: Creative Favicons: When Small Is BeautifulPart 2: Inspire Yourself: More Creative FaviconsPart 1: Inspire Yourself: 50 Remarkable FaviconsAny picture’s merit is debatable. But notice that these favicons were chosen not simply for their beauty and originality; it was important to us also that each fit the overall website design and logo. Pay attention to the details of the design.All favicons are linked, of course, to the websites from where they were taken (if they still exist). Click on them to get more insight into how favicon design relates to overall layout design. The order here does not indicate any ranking.Tableau PublicGnash ProjectTop RoundupsElastic Tabstopsi-on interactiveArc Technology GroupKodingenSound Light VisionHighchartsFacesPhotoscapeLondon ReviewsOpen FacesRocketThemeTechbridgeSoft eXpansionScrewturn WikiNimbupaniSpoonjuiceUniversität FreiburgParagon SoftwareiMastersTechEBlogFitBitDropBoxAxialisSwebappsAcquiaSniptMIX OnlineSecond MarketOpen XFilemail55ElevenOnehubProjectbubbleProjektwerkMedienlabIconshockSplitweedGobyM1 DesignPageStatCommadotBabbelblogTammy HartToufeeLion FrameworkHigh BeamMixxtCMSExpoAnd finally, all the favicons in one picture:(al)© Sven Lennartz for Smashing Magazine, 2010. | Permalink | 4 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: favicons, showcases

  Israel is a young country with an old heart. It has been quickly built up over the last 60 years as an independent democratic Jewish state and is shockingly cutting edge for a country so new.It is a tiny surreal sliver of land smack dab in the middle of the Middle East: a very European, modern civilization… just programmed to Jewish tradition. Israel has great weather, nice beaches along the Mediterranean sea, fresh and tasty food and a warm and friendly culture. It is home to historic holy sites of the world’s three major religions, and buses drive down streets whose stones are older than anything you’ll find in Europe.Israeli design at its best: ILook, an Israeli street-fashion blog. The text on the left side says: “Send me a good picture of a hipster and win 300 bottles of Maccabi beer” (via Tal Sach).It feels as if Israel has one foot in Silicon Valley and the other in ancient Canaan — with an undercurrent of Middle Eastern hospitality and culture in this already multi-cultural society. And yet, English is commonly spoken here because many Jews from all over the world immigrate here regularly (not to mention the thousands of tourists from around the globe who pour in for sun, falafel, nightlife and a dash of biblical archaeology.) In some areas, you hear as much Spanish, French, Russian and English on the streets as Hebrew.Because of its small size and the everyone-knows-everyone effect of being a bunch of Jews, cabin fever (and completion of mandatory army service for the younger generation) drives Israel’s citizens out on frequent travels across the globe, to India, Asia, and South America. As a result, a unique mix of cultural discoveries abroad is woven into Israeli culture.Tel Aviv is Israel’s most urban, chic city: the capital of all things sexy, secular and spiritual (in alternative ways to traditional Judaism.) You can read more on Tel Aviv’s unique soul in this article by Ehud Azriel Meir.Much like many of Israel’s cities — hastily built and functional, yet poorly planned — such is the unfortunate state of most of the country’s websites. Most Israeli websites look unfinished, and they probably are. And Hebrew being a right-to-left language doesn’t help! Being victims of circumstance, Israeli Web designers cannot unleash their creative potential to make modern, usable working websites.agadir, a Hamburger joint.Even though some cutting-edge technologies are being developed right here in Israel — which is home to former hot startups such as ICQ (which became AOL messenger) and Intel (which is inside your machine… have a look!) — most business owners still putter around in IE6. Israel opened its first official Mac store only last year.[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]What’s Unique About Israeli Web Design?Here are some other issues that designers face here (and, I imagine, in most places outside the US, Canada and Western Europe):Websites must work in legacy versions of IE (though IE6 is finally almost out). Israeli business owners emphasize this more than getting their websites to work in Safari or Firefox.There is a strong liking for Flash-based designs… it must be a cultural thing.Little value is given to Web designers (and those in related fields, such as copywriting — although marketers and SEO people seem to being doing okay), and many designers are not taking back their profession.Clients care more about cost than usability and standards.CSS-based designs are not standard, and many of the people responsible for hiring are not aware of it.Big agencies are usually asked to make conventional designs, and although they do quite impressive branding work, the websites they turn out are behind the times. Because they are launched by such big companies, the websites succeed “in spite of themselves,” leading many to believe that this is the formula for wildly successful websites: for Agency X to do our website the way they did for Company Y.The Lionways website.Many entrepreneurs here believe that because they are smart and successful in tech that they know your field as well as their own. They think they can write English better than a US-born copywriter and can design better than a graduate of FIT. Needless to say, this can be frustrating for the person trying to build a new website for them.Despite that, usability is starting to be demanded by many website owners, especially the genuinely intelligent tech companies, Web app providers and social media startups; hundreds of these are in Israel, mostly in English.Israel is always a few years behind American and European trends and standards, and this is no different on the Internet.The State Of AffairsWe spoke to key people in the Web design industry in Israel to get their point of view on the state of affairs.Q: Do you find you have to convince and educate clients a lot to be able turn out the high-end websites that you do?Arie Zonshine (Lionways.com): “Most people calling for a quote don’t really know what they want. It’s as if they are calling to get the price of an air conditioner. It doesn’t matter if they want a new site or a make-over of an existing site: they usually don’t have written specifications, they don’t know what kind of pages they want and they don’t have a visual concept.“So, I have to guide them through a series of questions, maybe looking at a few sites together in order to understand their needs. Sometimes, their lack of knowledge leads them ask for functionality that would work against them in terms of SEO, for example. I usually don’t have to work too hard to convince them to do things the right way.”Eran PalQ: Are clients surprised by how much you quote them? What buzzwords do you hear most from clients?Zonshine: “Always! Naturally, customers want the best price and, unfortunately in most cases, are not aware at all of the time and work invested. It’s even more problematic with issues such as Web standards and browser compatibility, because these aspects of the work have no visual impact on the website and are difficult for the client to appreciate. [I hear] SEO, AdWords and Flash. Very few mention browser compatibility, Web standards, semantic mark-up or CSS-based design”.Q: Approximately what percentage of Israeli businesses are into the new standards of websites written in XHTML and CSS, that are non-Flash and that use minimal JavaScript?Zonshine: “The numbers are unfortunately very low. I would say about 5%. Maybe less.”Alfred Gallery ExhibitionsQ: Why do you think most Israelis are into conceptual Flash designs that are hard to navigate, outdated and slow? Is this a cultural thing? Are more people waking up?Zonshine: “In too many initial conversations with potential clients, I hear requests to make things ‘Move on the screen like in PowerPoint.’ Many Israelis forget that the inside is just as important as the outside, and that foundations are more important than a cool façade (i.e. a flashy home page with clever animation) that has nothing behind it. I do believe it’s a cultural thing: you can see it in many areas. The ‘great façade with no foundation’ combo is very representative of Israeli culture. You see it everywhere. However, I do believe that appreciation of quality grows with time, experience and knowledge. More and more people call in already understanding the disadvantages of a Flash-only website”.Tower of DavidQ: Arie, I notice in your portfolio that you still use Flash, though you seem to have found the middle road between Flash and usability. Please explain.Zonshine: “Exactly. We wanted to make the point that cool and functional can work together seamlessly and are not contradictory. It was indeed an early decision that I took together with my partner Dana Ronen, who is responsible for the Flash programming on the site. We wanted to show creativity and Flash capabilities but also show that it can be done without compromising the accessibility, functionality and SEO of the site.“So, on almost every page, there is a small or big gimmick in Flash, depending on the content of the page and its function. On the home page, the flying business card gets center-stage; similarly, on the ‘About us’ page, the laptop CD tray makes an exciting entrance. On other pages we wanted the client to focus on the content itself, so the gimmicks were demoted to a supporting role and, in most cases, done in Flash (e.g. the credit card terminal, the coffee steam and the compass) and in other cases in jQuery (e.g. the changing color stamp on the contact page)”.Bee Creations Design AgencyQ: How does the fact that Hebrew is written from right to left influence your design work?Zonshine: “If the site will be Hebrew, you just need to flip your way of thinking horizontally. In terms of layout, it means that the logo would be probably placed in the top-right corner of the page rather than the top-left. You also need to mirror the placement of elements on the page, because the visitor’s eye-tracking patterns are mirrored in Hebrew.“The issue becomes more complicated when the site has both Hebrew and English or another left-to-right language. A good example of a dilemma that arises is a design that has a large background image, which I use quite often. When the background image cannot be flipped, it usually results in the logo and other elements being positioned on the “wrong” side of the page for one of the languages (Lionways is a good example of that). If, on the other hand, the image can be flipped, it’s much easier, as the Jerusalem Camerata site shows [see below] — the large violin image is mirrored on the English side of the site”.Waltz with BashirAnother example of this issue is Twitter, which scrambles any right-to-left tweets to an almost ridiculous degree. But again, Israel’s creative minds come to the rescue with Talker, a Twitter API-based… well, Twitter, except in Hebrew and right-to-left. Compare a Twitter Talker right-to-left account with a left-to-right account.Q: How does Hebrew affect other aspects of Web design?Zonshine: “First of all, a much smaller selection of safe fonts can be used for live text. Arial is probably the most common, followed by Times New Roman, Tahoma and Courier. That’s it, more or less. There aren’t any equivalents of Trebuchet, Georgia, Palatino or other fonts.“Also, if the site has both Hebrew and English, choosing a font for titles and logos becomes much trickier, because you usually need to choose two separate fonts — for English and Hebrew — that work well together. The Hiddush logo is a good example of that. I spent hours searching until I found a close-enough English font (Anderson the Secret Service) that worked well with the Hebrew one (AgadaMF), and even then I had to clean it a little to match the other. A few font shops in Israel, such as FontBit, offer quality fonts that are designed to blend well in both Hebrew and English”.“On top of all this, there are many technical problems with dealing with right-to-left texts in graphic elements, especially Flash components. Small and trivial things suddenly become an issue, such as the inability to control the location of punctuation marks, numbers and other symbols. Sometimes the only solution, as silly as it sounds, is simply to avoid certain characters, but this is impossible to control when dealing with dynamic content.“Q: Do clients pay on time. And what is negotiating like?Zonshine: “Negotiating is a part of Israel’s culture. People almost always ask for a discount. I almost always get paid on time”.Uzi Shmilovici (co-CEO at Netcraft) adds: “A lot of the logos that are designed in Israel have English typography. So the question is, where should the logo appear on the site: the left side or the right side?”Examining some of the biggest websites in Israel shows that this dilemma remains unsettled.“The other issue”, Shmilovici continues, “is using English words and phrases (either quotes or special terms) in the middle of Hebrew sentences. They force users to change the direction of their reading, which affects the flow of the article and scanning”.Israeli web design: Confederation House by bigdesignTypographyTypography is one of the most interesting crafts related to Hebrew websites and design. While traditional Hebrew fonts are great for creating an ancient or holy atmosphere, Web designers face a big challenge in finding or creating modern (or even futuristic) fonts from an alphabet that was invented for one thing: Torah books.Typography fans might be interested in the “Torah Scribe,” written by a person who handwrites Torah books and who follows a strict set of rules and guidelines. The slightest mistake makes the book un-kosher, and he has to throw it away and start all over again (which is why Torah books cost so much).Another trend in Hebrew typography is nostalgic fonts from the early days of the state (the British Mandate). A great example is the Palestina font created by Oded Ezer (see image below), which is an effort to fuse an ancient typeface to a modern design.Oded Ezer’s website is a great place to look for modern Israeli fonts and experiments in Hebrew typography. A leading Israeli typographic artist, Ezer also runs the blog Spare Type. If you are into typography (and who isn’t?), you must check out two works by Ezer in particular: Ketubah and Typosperma.Any Israeli knows how hard it is to find beautiful fonts in Hebrew. Lucky we have Oded Ezer, a typographic artist, logo and type designer, lecturer and typographic experimentalist. His studio is located in Israel.Fontef, Israeli font designers.Ha’Gilda: Hebrew fontsInteresting Solutions to Israeli Design ProblemsYotam Hadar redesigned nrg.co.il, Israel’s second-most popular news source and seventh most popular website. The old version had too many boxes, low readability and nowhere to focus the eye, not to mention unconventional and hard-to-use navigation. Since its redesign, the website has continually gained popularity (and the statistics show much longer stays), yielding more income and a smaller team on which to rely for maintenance. (The website was completed while the designer was working at Maariv, in collaboration with NRG’s design team, under chief designer Amir Hadad.)Efficiency Is A Double-Edged SwordIn a 62-year-old country that is in a constant state of war, where every citizen has to join the army at the age of 18, efficiency (not to be mistaken for productivity or effectiveness) is almost sacred. It has been the most important quality in building this country, and it tends to be the most valued quality in any project. One could say, “It doesn’t matter if it’s good, as long is it works…” Sort of… Close enough. Thus usability, aesthetics and trends are ignored quite often, making the job of the designer secondary.Another side effect of this harsh efficiency-driven attitude is the de-emphasis on a proper technological education. Because clients only demand that things “work,” standards, trends and aesthetics are the last thing on a developer’s mind. In turn, clients lack a real understanding of the media, which is why so many Israeli websites use Flash. The lack of variety of supported Hebrew Web fonts is also a factor. But fortunately SEO is creeping in and forcing even the most stubborn clients to ditch Flash for HTML and to replace images with live text as much as possible, which will hopefully push typography awareness to the next level.ha’Sushia has an original navigation menu.Adam Benayoun (CEO and co-founder of Lionite), puts it very well: “It is a technology-oriented market. A lot of Israeli companies don’t focus on the front end, design, UI, experience, because we are all developing and selling technology to the US.”Lea Aharonovitch (a senior product manager at Answers.com and a UI/UX blogger) adds: “I would even go further to blame each and every one of us Israelis as consumers for not demanding higher standards from websites that prefer banner spots to design.”“Just a quick look at some of the 130 Israeli Web 2.0 companies demonstrates how much creative types and services are trying to solve problems and foster new exciting ways to do more on the Web… If we support designers and let them show us what they can really offer, we stand a chance that the next ‘Made in Israel’ design article will boast about how Israel has become the cutting edge of intuitive and excellent user-centered design.”Lea is also a former manager of UPA Israel (Usability Professionals Association), which recently initiated a series of usability reviews published weekly on Israel’s biggest news website Ynet (the equivalent of CNN in terms of traffic and importance), inspecting a different Israeli website every week.Tel Aviv city budgetQ: What other setbacks against designers in Israel can you identify?“Behind every Israeli designer stands a team of managers who just don’t get it,” says Aharonovitch. “Managers don’t think they can afford to offer simple, less monetized interfaces, so designers are required to add as many monetization elements as possible”.Shmilovici: “Strong interactive companies lead clients to invest a lot of money in the media (where they have big commissions), and the result is usually less resources for UX and design (because the development part is a must anyway)”Oded Ezer, whose work was featured earlier in this piece, give us a typographer’s point of view: “Conservativeness. Instead of relying on 3,000 years of documented culture and Jewish heritage, young designers are looking to modern European design for inspiration.”Dinamo-DvashLocal InfluencesIt’s worth mentioning that the second official language of Israel is Arabic, another right-to-left language with amazing appeal to typographers. But a whole other article would be required for that and for the question of why Israel has so few Arabic websites.ShatilMossawa CenterKoloudtof. This website is Hebrew but influenced by local cultures. Remarkably, about 50% of Israelis come from Arab countries.Let’s Turn To The FutureWeb designers in Israel seem to have two choices: find work overseas, or deal with the conditions in Israel, which in most cases mean lower wages and having to dabble in print design and other unrelated design work. This is another reason why finding good examples of Israeli Web design is hard, because most of the work is done for European and American clients or, if done for domestic clients, just doesn’t compare to the quality of design overseas.But as Israelis, we always look at the bright side and seek solutions. “Clients in Israel are just like clients all over the world,” says Adam Benayoun, putting as much of the blame on service providers. “We need to educate clients on the importance of design,” he says, advice that is as true of designers in Israel as it is anywhere else.Baboo, a lighting boutique.Lionite is a great example of Israeli creativity in business model and workflow. The Tel Aviv-based Web shop provides a complete solution for clients in Israel and overseas, combining development, design and even marketing. “Clients overseas prefer us because of our standards, not because of or despite of our being Israeli,” says CEO Adam Benayoun. “We believe you have to be good no matter where you are from, no excuses.”Netcraft’s Uzi Shmilovici seems to agree with that philosophy: “Although Israel is not the cheapest place on earth, it is still cheaper than Europe and the US. That said, professionally, Israeli designers are definitely on par with European and American designers. Take those two facts together and you’ll understand why Israeli design gives you the best value for your money.”Q: So, what do you think we have to offer the world in terms of style, influence, etc.?Shmilovici: “I do think that some of our unique typography issues have led to some nice progress. Because the Israeli font inventory was weak, we had to come up with new fonts quickly. Some of those explorations, done by Oded Ezer for example, ended up in the MoMA.” Oded EzerAharonovitch: “Israel is considered one of most innovative nations in the world when it comes to technology. It’s hard to compete with our sense of creativity, our high level of adaptability and flexibility and our high skill level in problem-solving and other traits.”While at times it may seem that we’re not organized or that our affairs are managed informally or that our processes are not well defined, these are our advantages when considering the Agile or Lean development method that has been gaining popularity recently. The last thing to mention is the emotional strength and maturity that many Israelis develop at an early age — mainly derived from growing up in as challenging an environment as the Middle East and serving in the army at the age of 18.”Showcase of Israeli Web DesignDenis ZilberSchlafstundeRachel TimorElad TayerKeoss Studios (warning: music is turned on automatically!)Anz.co.ilAravaRubin MuseumE-Dologic.co.ilHayehudim, an Israeli music band.Kid.org.ilMoran in the big cityMoran in the big citySegal WinesSiblingOded Babayoff“The Block”Israel TodayIE StudioThe Red Sea Jazz Festival WebsiteZero NineStudiogavriel’s workThe Wall, Jerusalem.Sipholux.co.il3 BearsKitshQuicheria, one of the many Flash-based websites in Israel (via Wix.com)Terry Poison, electro-rock and roll band.Duddi Hasson, Fashion photographer.halas.am, Holon Art Lab Audio Serviceshani bar, Fashion designer.while you were away, Ben Ben-Horin.hello supersize, Matty Marianski (Supersize), Motion graphics and interaction design.The Jerusalem CamerataThe Red Sea Jazz Festival WebsiteHydrosIsraeli Designer ShowcaseThose who are able to rise above the circumstances end up turning out top-notch websites. Some such stars are featured here.Shual (meaning “Fox” in Hebrew) is a two-person team that churns out modern Web-standard websites. Its own portfolio is startlingly green. Aside from this neon-green page complete with fox howl, the team turns out such beautiful websites as the following:Galia OffriArt FocusNetcraft does it right and sets a good standard. It is one of the leading agencies in Israel.It designed this well-known e-commerce website:Lionite is an Israeli agency with a unique approach to business.It also created Octabox…… and Cubicl.Itamar Lerner is an Israeli-born graphic designer. He started working as a designer at 2002. In the following three years, he was employed by several design studios around Tel Aviv.Adam Tal (a collaborator on this article) created this stylish website to make his wish come true and was shocked by the feedback and attention he received.Daina Reed is a freelance Web designer in Tel Aviv.Inbal Pinto and Avshalom Pollak Dance Company created this beautiful, simple and artistic Flash website, which may be impractical for most in the real world.Inkod Hyperanucampaign offers great insight into the real Israel (as opposed to the Israel you know from the news).IllustratorsLiron Tocker is a talented Israeli illustrator and icon designer who lives in Germany.Mikimottes is commendable for his sketching of everyday Israeli scenery.Asaf Hanuka worked on the art for the award-winning animated documentary feature film by director Ari Folman.hoop: this is just about the end of our journey. If you wish to absorb more Israeli design, you should visit hoop.Related PostsYou may be interested in the following related posts:Showcase of Web Design in RussiaShowcase of Web Design in GermanyShowcase of Web Design in MexicoShowcase of Web Design in IrelandAbout the AuthorsDaina Reed is a freelance Web designer and Web project manager in Tel Aviv.Adam Tal is a Web entrepreneur who believes that code is poetry and design is music. Follow him on Twitter @adamtal, or check out his website.Sara Eisen is a freelance writer, editor, journalist and “marcom” and Web content consultant. She blogs at http://the-word-well.com.Also, this article wouldn’t have been possible without the contributions of Joey Simhon and Lior Yair of Netcraft, a digital agency in Tel Aviv that specializes in user experience and Web technologies. Special thanks to Avi Joseph, CEO of SmediaC for helping with the research for this article.(al) (dr) (at) (vf)© Smashing Editorial for Smashing Magazine, 2010. | Permalink | 12 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: israel, showcases

  Germany, which is situated in the heart of Europe and neighbors nine other countries, is not only the motherland of eminent philosophers, poets, composers, world-famous automobiles and great beer, but also a place where some of the most talented and highly ranked Web designers live.German design is certainly worthy of respect and a delight to the eye of anyone who takes the time to observe it. For years, we have accumulated knowledge, upheld eternal principles of style, simplicity and accessibility, adopted best practices and kept up with the latest global trends. I’m proud to present here a showcase and discussion of world-class German Web design.German Web Design: jung von matt[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]State Of ThingsThe creative industry in Germany is extremely competitive and consists of thousands of freelancers, studios and agencies. We have the pleasure here of presenting a brief interview with several German design gurus to lend some insight into the local design scene. As talented creative professionals, blog and book authors and freelancers, they are passionate about sharing their knowledge with others. Our participants are:Prof. Fons Matthias Hickmann, graphic designer, typographer, Professor of communication design at the University of the Arts Berlin, Director of Fons Hickmann m23 design studio, author of “Beyond Graphic Design” and “Touch Me There” books;Mike John Otto, founder and Creative Director of blackbeltmonkey design studio;Kai Becker, Creative Director at Elephant Seven agency;Christian Bartsch, Associate Creative Director at Neue Digitale / Razorfish agency;Dirk Ollmann, freelance Creative Director;Markus Angermeier, design freelancer;Björn Seibert, Web designer, information architect, founder of the Webzeugkoffer blog, and author of the book “Professionelles Webdesign mit (X)HTML und CSS”;Dirk Behlau, graphic designer and photographer.creative style agenturQuestion: Could you please describe the current state of the German design market. What is the life of a freelancer, developer or designer in Germany like? How much do designers earn?Prof. Fons Matthias Hickmann: Working with interesting and open-minded people is not something you can take for granted. And earning money by doing what you love involves luck.Mike John Otto: The current situation for good designers, developers and especially freelancers is surprisingly good. That strange year 2009 wasn’t as bad as many thought it would be, and there was a big demand for good creatives with experience to help realize projects at agencies. As many bigger agencies reduced their team sizes, freelancers were highly welcome, and I honestly think that shrinking in such a “crisis” always benefits the quality of creative projects, because people try harder to prove themselves with good work instead of just doing their job.Kai Becker: I think 2009 has been a hard year for designers. Although we had a lot of work (compared to conventional advertising agencies), many clients cut their budgets, which often meant less time for the design process. I also missed jobs in which the design or idea played a leading role. Briefings were very conservative or half-hearted and often came with a very reduced budget. A screen designer earns around €2000 to 2800; from there on you’d be an Art Director. Most of them earn €2900 to 4000, but a few earn a bit higher. Freelance screen designers earn in the range of €150 to 250 per day, Freelance art directors get from €300 to 500. Because conventional agencies had to sack quite a few designers, a lot more freelancers have been available in 2009, and as far as I know they have had a hard time.Armin MorbachChristian Bartsch: I think we have the perfect market right now for small studios and freelancers. All the big agencies tried to build up knowledge of digital services in the past five years to be more integrated. Those that failed now have to to work with specialists and independent freelance networks to be competitive. Clients want their 360° communication, and you need professionals for that. A lot of these professionals, including myself, can be found on Design made in Germany, a platform for German designers. Money-wise, I would say it is the same as everywhere else. If you are good, you’ll be booked.Dirk Ollmann: The financial crisis had a strong impact on the freelance market. I know a lot of them were starving and sleeping under the bridges in Hamburg. Just joking. Life is not that bad, but agencies tried to manage all of their work with their own staff, and so hiring freelancers was a no-go for the last two years. Now the market is rising again, and the fact that agencies were very cautious and kept their staff counts low will now help freelancers. An art director can earn between €300 and 500 a day, depending on his skills, quality and speed.Björn Seibert: Web designers and developers are working — surprise, surprise — as freelancers and employees. Freelancers work more on interdisciplinary projects and teams. The employees work in small specialized agencies, in bigger full-service agencies and large industry enterprises. I would guess the majority work for small to mid-sized businesses. But overall, I don’t think that this is particular to the German market.Working as a Web designer or developer is rarely a 9:00 to 5:00 job. Your income depends of whether you work as a freelancer or employee. Secondly, it depends on whether you work for a small agency or large enterprise. It may also depend on education. Employees can earn from €35,000 up to 50,000 or even more. As a freelancer, it depends on your market, target groups and customers. As a freelancer, you can and should ask for an hourly rate of at least €50 and up.sven kils – graphic studiosDirk Behlau: Hmm… I have been working as a freelance graphic designer and photographer for ten years now, and I have been lucky enough to develop Pixeleye Interactive (my business) from year to year. I mainly work for international lifestyle, car and custom-bike magazines and top brands. For example, I was in Mexico with the Finnish rock band Leningrad Cowboys in the fall of 2009; we will produce a photo book and DVD documentary together. All I mean to say with this example is that I am not sitting in my office every day from 9:00 to 5:00. I travel a lot, meet cool people and a lot of new things happen. So no day is like another, which keeps me motivated. How much do designers earn? That depends on how “established” you are in the business… I have all I want and can make a good living out of it.Question: Are there any patterns of usability or rules of thumb that are typical of German design? Are the standards of Web design in Germany changing?Prof. Fons Matthias Hickmann: Although the Web is completely different from print or anything else we thought we knew, you can still apply your principles and tastes to Web design. At the moment, almost anything is possible, and that makes it exciting.Mike John Otto: Well historically, German design has always been really clear and straightforward. On the one hand, everything produced in Germany, including the design, is usually very precise and content-driven. On the other hand, I see a new trend of more experimental designs that try to break out of grids and usability patterns. As globalization hits every one of us, and with one click anyone can see what is highly rated in other countries, German designers are trying to develop something new, a new German design language, as happened on the German music scene before.A new German aesthetic language that still hasn’t quite developed but will hopefully soon be as strong as the German music and art scene is today. The most creative areas in Germany currently are Berlin, Hamburg and the Frankfurt am Main area. A lot of smaller German design and digital studios pop up and do remarkable work far away from daily advertising work, even if the big networks still play a bigger role in the German creative scene than they do in, for example, the UK or Sweden.{ths}Kai Becker: I wouldn’t say so. This is a difficult point, but I can’t see anything explicitly “German” in Web design from here. Standards are always changing, but I think that affects Web designers and developers worldwide.Christian Bartsch: The design culture in Germany is still very young. With the rise of Berlin as one of the hot spots in Europe, German design has taken a big step. We had and still have a lot of influence from Spain and France. If we speak of Web design, Germany always has been competitive in the global market. You will find a lot of German projects on The FWA.Dirk Ollmann: For me, as a creative director who has worked on a lot on big brands in the car and consumer goods industries, the financial crisis has had a huge effect on marketing strategy and the process and technology of the Web designer. It turns out that the short-term “return on investment” is more important than long-term brand building.Today, analytics is the driving force in Germany. But what effect has this had on Web design? The trend is “back from Flash to HTML.” This is the technology that works best with Google’s search engine. Actually, the new BMW website design is based on HTML. Last year’s Web designers were expected to have a lot of skill in Flash and inventing new navigation concepts and visualizations. Now, we’re going back to the roots of Internet, keeping it very simple, do everything that Google wants and trying to sell the product with a few clicks. That’s it.bellyshadesBjörn Seibert: First of all, I don’t think there should be a special rule set for a specific national market. We and others are working hard for a common understanding of Web standards, usability and accessibility around the world. There could be derivative or special requirements for special markets or target groups. But there is foremost a strong demand for international and widespread standards by which every designer and developer can build websites and applications of high quality and a high level of user experience.Spurred by the Web standards movement in the US, and led by “General” Zeldman and his combatants, the Web standards movement accelerated very quickly in Germany as well. Many of us in Germany started thinking about those standards and proposed best practices. In 2005, Jens Grochtdreis founded the Webkrauts. The Webkrauts are working hard on doing awareness training for Web standards and best practices in Web design and development. Their publications help to educate others and point to obstacles.colibri – contactlinse & brilleQuestion: How important is professional education in the design industry, and do you feel that the education available in Germany is adequate to develop world-class designers?Prof. Fons Matthias Hickmann: Professional education is very important, and more open-minded and sensible young talents are out there than ever before. I am anxious for them to take over soon.Mike John Otto: I truly believe that all world-class designers have an innate feel for design but have also learned and shaped their skills at art school and by working in agencies. So yes, a professional education is not only important but essential, and a few very good ones not only teach students creative and software techniques but open their eyes to art, design history, common trends and design rules as well as things like film, theater and marketing. Nowadays, design students who are looking for jobs have to know much more than they did a couple of years ago: about film, conceptual thinking, advertising rules, digital trends such as social media and online campaigns, to name just a few.These so-called “digital natives” have a much wider range of techniques and hardware to mix into their daily work than I had when starting out in the business in 2000. This is a big opportunity and a big pain at the same time. Every good school has to prepare to students to meet this wide new range of market needs.figurenschneider puppenbau norman schneider, bielefeldKai Becker: For advertising agencies, your portfolio matters the most. I judge designers by the work they have done already, not if they have studied the right thing. And yet Burg Giebichenstein in Halle, Germany, is the place that develops world-class online designers. If you can make it there, you’ll make it anywhere.Christian Bartsch: I think professional education shapes your style and keeps you focused. I experienced big differences in quality at German design schools. After four years, I transferred because I was unsatisfied with the conditions at my school. Design is evolving. Multi-touch and augmented reality offer new ways to approach content. Interfaces are becoming more and more complex. Some schools still think in paper.Dirk Ollmann: Of course, a professional education is essential. It speeds up your talent. But learning your craft is only one aspect. You should also use your university or design school to meet people and network. World-class designers? Of course there is enough room for them in Germany. Have a look at the biggest multi-touch wall made by Sensory Minds!MWP OnlineBjörn Seibert: This topic was the subject of my latest article for the German “Webstandards Magazin” (Issue 4/2009). And yes, I think there is a need for more professionalism in terms of education and orientation for job starters in the field of Web design and development. Indeed, we are seeing a bit of action with apprenticeship; people who study digital media and design have the opportunity to do some specialization. But so far, there is no special degree course or job training that fully concentrates on educating Web designers and developers. In my opinion, there is still a lot of work to do in offering more professional education and better safeguards to hopeful professionals — safeguard that would keep people from thinking that any Web design job could easily be done by their neighbor’s son.Dirk Behlau: Nowadays, getting a good education is becoming more and more important for someone to be successful in the design field. There are a lot of good people out there. I started 15 years ago as a full auto-didact, developing my own style and look. Designers coming from university are often very impractical in normal “office life.” They may have learned how to use programs like Photoshop, but they don’t have the experience to be successful in their business. Self-marketing and self-promotion are very important, and these are not taught very well in universities.Question: Where do you get inspiration from? How do you stay informed about the latest design trends? What books and magazines do you read?Prof. Fons Matthias Hickmann: Like almost everybody I speak to about inspiration, I feel overwhelmed by the amount of information we process every day from the Web. A few websites are clever and thoughtful, giving insight into the creation and process of design, rather than just showing random pictures. Where do I get my inspiration from? From every form of culture. And from daily life. The Web now plays a part in both.Mike John Otto: I get my inspiration from a mixture of influences: Hamburg and Berlin’s night scenes, youth culture and their dress and music codes, travelling, music magazines and my daily work with colleagues and students from my class. Of course, I check out design websites such as The FWA, High Floater and Digital Arts, as well as magazines such as PAGE and IdN, but I don’t get inspired by checking out other design work. True inspiration comes from fields such as music, theatre and story-telling. Sometimes new ideas are born of these influences, and sometimes one kind of recycles all of this stuff and creates something new from it.visualorgasmDirk Ollmann: Before you design, you need an idea. I think this is the most difficult thing. A lot of designers use the Internet to try to come up with a unique idea, but that’s the last place to find it. I try to keep my eyes open for things that happen in real life… keep my eyes open and record. After a while, you have a database of ideas waiting for implementation. Stop working, get inspired! Ideas will come by doing something completely different. Try something! I use to pet my cat, kite-surf, play bass, etc. Nevertheless, there are some websites I check regularly: Behance for random searching (those are some cool guys from Eastern Europe); for style, The Cool Hunter is one of my favourite websites; and The FWA for state-of-the-art Flash design.Björn Seibert: A normal day starts with Google Reader and the Twitter timeline. These are my main sources of information for keeping up to date on Web design trends and issues. Actually, I’m subscribed to about 230 feeds, mostly covering design, Web design and development, usability and user experience topics. Further, I’m subscribed to some Posterous blogs. I love to discover small new unknown blogs with good and relevant copywriting. For me, inspiration is nothing you go out looking for. It starts with good content, smart insight into Web design issues and smart solutions to common problems. I read a lot of Web design-related books. Lately: Sexy Web Design, Designing with Web Standards, Integrierte Informationsarchitektur. At the moment, there is only one magazine I’m willing to pay for, the quarterly Webstandards Magazin.iconwerkDirk Behlau: I travel a lot, meet new artists and exchange ideas with them. And I do read a lot of magazines and check websites, blogs, social network websites, etc. So, I do look everywhere, and I’m interested in a wide range of themes from movies, music, video games, travel, lifestyle, hot-rodding, custom culture, skateboarding, custom bikes, graffiti, tattoos, to name just a few. I do get a lot of magazines from around the world every month, covering everything from cars to tattoos to music. I love the Juxtapoz and IdN magazines.Question: Are there any other issues unique to German Web design? Do you see any remarkable differences in comparing it to creative industries worldwide?Prof. Fons Matthias Hickmann: One obvious difference is the language. English is omnipresent on the Web, German is big as well. How should we deal with that? Is translation a good method, or an alternative? How will our culture change? What can we do as designers?Mike John Otto: Not really. British, US and Swedish influences are big in Germany, and so the product is becoming more and more similar. A German design and Web design language is being formulated more and more but is still not strong enough. Most of the German work seen at award shows and in magazines is still mainstream from a handful of very well-known German agencies. Although German ads and design are winning more and more at award shows: Germany was in the top five in quite a few rankings this year. I hope a remarkable difference will show itself in German design sometime soon.MoarghKai Becker: There may be slight differences between European, Asian and American Web design, but I would not say they are remarkable. Perhaps German Web design is typically straight, clean, simple and tidy. Kind of what you would expect from a German, wouldn’t you? :)Christian Bartsch: Right now, Flash development is particularly good in Germany. Small studios such as blackbeltmonkeys, Less Rain and Artificial Duck are pushing the limits.Dirk Ollmann: Germans are often seen as “number crunchers” — that’s absolutely true. The big brands always want to know what the results will be before we do anything, and we try to avoid any mistakes. The result is that we miss a lot of opportunities that the Internet provides. But maybe this is a worldwide problem as well. Styles and trends? I hope German Web designers will kill glossy 3-D buttons, wet-floor shadows and those ’80s trend next year. Website design will evolve into big clear typography, short copy, only a few themes per page, big easy buttons and a lot of video content.Making videos will become increasingly easy, and we’ll turn away from the high-end glossy advertising grease. Even big brands will host their videos on YouTube or Google Video to allow users to embed. “Sharing” will be the driving force of content and Web design in the coming years. The biggest task of brands will be to conquer social networks like Facebook, MySpace, etc. But most brands have no idea how to achieve this. For me, this is one of the most interesting fields in advertising today.das leben ist wie eine schachtel pralinenBjörn Seibert: I generally have a more global point of view. But what must be emphasized is that a line of German Web design has emerged. There are a bunch of very talented Web designers, and the Web standards movement is upon us, in no small part thanks to the Webkrauts initiative. There is also a highly recommended Web-standards podcast Technikwürze that covers the latest Web design trends and features the best from the Web in Germany. But I think that sometimes we should be more self-confident and share with each other our thoughts about modern Web design and current issues.Dirk Behlau: That’s difficult to answer because I work for international clients that demand my particular style. Sometimes I think European and American clients are more experimental.What’s Going On In Germany?EventsA number of design and tech-related events happen in Germany on regular basis. Some worth mentioning are Forum Mediendesign (7 November 2009 in Cologne); Designers’ Open (23-25 October 2009 in Leipzig); webinale (25-27 May 2009 in Berlin); WebTech (16-18 November 2009 in Karlsruhe), DesignCamp (January 24-25, 2009 in Cologne). A famous international arts festival, “Illustrative,” was held this year in Berlin (16 October to 1 November 2009).Forum MediendesignDesigners’ OpenWebinalewebtech conferencedesigncampIllustrativeVolkssport DesignDesign ZoomAwardsAmong the most prestigious awards in the German design industry are the red dot design award, iF communication design award, Designpreis, Gute Gestaltung, Deutscher Multimedia Award (DMMA), BIENE-Award and LeadAward.DDCred dot awardInternational Forum DesignDesignpreis DeutschlandDeutscher Multimedia AwardBiene AwardLeadAwardsShowcase Of Web Design In GermanyIn this showcase, we bring you a selection of the most inspiring and well-designed websites in Germany, either personal experimental or corporate.friseur hamburg – rolf & berndJunopilotpisto – magazin über web und die welterfolgreiche webseiten und marketing-kampagnen aus hamburgKaiserschnitt Hair-Stylingbieh.detanner + tailoroliver twardowski, addicted to coffeedinge geregelt kriegen – ohne einen funken selbstdisziplinMichael Heinsenartcore-illustrationsflaek footwearBianca Elmerkinderspiele, malvorlagen, kindergeburtstagstefan velthuys – web & frontend-designerstilvolles webdesign, printdesign, illustration und animationnoel nieto – strassenfussballerhigh quality writing instrumentsbauer konzept & gestaltungandreas mühevisionpixel mediendesignNerdFilmsJägermeisterJ. Konrad SchmidtDonate-a-mealKubis WeltJulius Brink & Jonas ReckermannIrrlandLukas Lindemann RosinskiDiet RiotThe Lotus EaterHolsten PilsenerPaulanerAllude CashmereOchs SchmidhuberArthur SchlovskyMarc AurelCarsten MellMichelbergerhotelKubikfotoPritt WorldSupergidKiri SpassNeubauladenTelemazDesignschneiderAndreas HinkelWendt & KuehnSantamaria TourIsabel AbediKultikaQuintezzenseWild Web WoodsMustafas GemüsekebapMy Lanephotocase – kreative stockfotosmisfall – t-shirthabitat seven – very flexiblecape arcona type foundryvier für texas *ideenwerkwm team – showtime for your brandxplicit ffm / grafik – und webdesign aus frankfurtShowcase Of Design AgenciesThe design sector in Germany is dominated by a number of highly professional creative agencies that have earned international public attention and many prestigious awards: among them the red dot design award, iF communication design award and Designpreis.Scholz & VolkmerClients: Mercedes-Benz, Adidas, Samsung, Coca-ColarecomClients: Adidas, American Express, Audi, BASF, BMW, Bosch, Braun, Canon, Chevrolet, Citroen,Douglas, Ehrmann, Fiat, Ford, Gerry WeberMutaborClients: Adidas, Audi, BMW, Breuninger, L’Oreal, Nivea, T-Mobile, VolkswagenTilt Design StudioClients: Audi, BelmondoSaint Elmo’sClients: BWM, Lufthansa, AxelSpringerGNC DesignClients: HTC Deutschland, Ford Deutschland, Renault Nissan DeutschlandToca MeClients: Amway, BMW, Burda, Compaq, Fujitsu Siemens, Henkel, L’Oreal, Mc Donalds, Microsoft, MINI, Müller Milch, Novartis, Red Bull, RitterSport, Sony BMG, Vodafone, Xboxhauser lacourClients: Bayer, Berlin Chemie, Commerzbank, Lufthansaurbn;Clients: McDonalds, Adidas, Sarotti, Hasseröder, hohes-C, L’OrealblackbeltmonkeyClients: Mitsubishi, Edeka, FC Bayern, Chelsea FCTaobotClients: Beck’s, Coca-Cola, Commerzbank, Deutsche Bank, GfK Group, Jay-Z, Leica Camera, Mercedes Benz, Metro Group, o2 Deutschland, Smirnoff, Swarovski, ThyssenKrupp, TobleroneMoccuClients: L’Oreal, Garnier, Volkswagen, Deutsche Telekom, Vodafone, Dior, Maybelline, WWF, CanonGoldener WestenClients: Axel Springer, Coca-Cola, Edeka, ZKM KarlsruheMetaDesignClients: Volkswagen, OTTO, Conrad, Audi, Klett Verlag, Lufthansa, Nici, eBayApertoClients: Audi, Bayer, BenQ, Coca-Cola, F.A.Z., Siemens, Sony, Triumph, VolkswagenLovedClients: Adidas, Audi, Comdirect, Görtz, s.OliverAntwerpesClients: Aral, BayerAre We DesignerClients: BASF, Burda, Deutsche Telecom, VodafoneMarctropolisClients: ARD, Beate Uhse, Bild, BMG, Burger King, Chupa Chups, Procter & Gamble, Red Bull, RTL, Siemens, Skoda, Universal Music, ZDFParasol IslandClients: MTV, IKEA, Sony EricssonFiftyeightClients: DHL, Mazda, Milka, Lacoste, Jaguar, RTL, Nintendo Deutschland, Disney, Procter & Gamble, Ferrero Deutschland, Karlsberg, Nike, Renault Germany, Warner Music Germany, Sparkasse, Opel, MTVShowcase Of Web Design FreelancersBesides the professional creative agencies, we find a lot of freelancers working in the industry.United States of DesignClients: Adidas, Audi, Bacardi, Berliner Sparkasse, Bertelsmann, Coca-Cola, Deutsche Bank, Mini, MTV, Mozilla, Plazes, Sprite, Siemens, Sony, Sony Ericsson, TDK, VolkswagenMartin AnderleClients: Adidas, BMW, Sony Ericcson, Volvo, ZDFkosmarClients: Stiftung Warentest, Daimler, SPD Berlin, PlazesDirk SchützeClients: Leibniz, Konica Minolta, Deutsche PostRadekalClients: Gillette, IKEAmediziehmClients: Peugeot, Ford, JaguarMatthias DittrichSugah DesignpsychosystemsThorsten Konradsieben:nullchez-booHoan Luu DucDavid HellmannC.L.I.T.O.R.I.O.U.SYour Opinion Is Welcome!What is your opinion of the German Web design scene? In case we’ve missed any exceptional websites, please share them, and your thoughts, in the comments section. We always look forward to your feedback and support!Related PostsYou may be interested in the following related posts from our new series on global Web design:Showcase of Web Design in RussiaShowcase of Web Design in IrelandShowcase of Web Design in MexicoStay Tuned And Get In Touch!This article is the fourth in our new Global Web Design series. Over the next months, we’ll be covering various continents, featuring Web developers and designs from different countries and looking closely at what is happening on the Web design scene worldwide.If you”d like to prepare an article for this series, please contact us, and we’ll discuss details.(al)© Aygul Zagidullina for Smashing Magazine, 2010. | Permalink | 2 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: germany, showcases