Design Treats

Home › Items tagged with showcases

• I posted to smashingmagazine.com

  Shalom! Showcase Of Web Design In Israel

  http://feedproxy.google.com/~r/SmashingMagazine/~3/kqzA0DyPRRc/

    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

  

  • Tags:
  • inspiration
  • showcases
  • israel

  February 23 2010, 5:53am | Comments »

• I posted to smashingmagazine.com

  Showcase Of Web Design In Germany

  http://feedproxy.google.com/~r/SmashingMagazine/~3/TgAbpRfEPgs/

    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

  

  • Tags:
  • inspiration
  • showcases
  • germany

  January 26 2010, 4:36am | Comments »

• I posted to smashingmagazine.com

  35 Beautiful E-Commerce Websites

  http://feedproxy.google.com/~r/SmashingMagazine/~3/6bIyf3Z8Irw/

    Despite any financial recession and economic stress, online purchasing continues to grow. Expansion of the market and evolving technology that simplifies our daily lives help to set the pace of e-commerce design. Customers want the shopping process to be quick and easy, and merchants want to increase sales by making their stores attractive and popular. Thus, e-commerce design tends to combine a look and usability that is at once unique and eye-catching. In this post, we showcase 35 attractive online store designs.One of the trends we observed from this collection is a minimalist design style. Small details and accents (e.g. unobtrusive background patterns, icons, pictograms and typography) reflect a brand’s spirit and match the character of its products. Some websites, though, are unconventional, rich in visual effects. Please note that the selection of stores featured in this showcase was based more on design aesthetics than usability. But we made sure that the websites included here provide at least an easy shopping experience, even for foreign visitors.[Offtopic: by the way, have you ever visited Smashing Magazine's List of tags? There might be something interesting for you.]Showcase of Beautiful Online Store DesignsBlikBlik manufactures whimsical removable graphics to spice up the walls of your home. Even though the “About” info gets a bit lost in the large product preview in the center, getting an idea of what Blik is all about doesn’t take longer than a couple of seconds. Aside from the stylish look, the easy shopping experience is what makes this design exquisite: all products are categorized by tags, the thumbnails are big, product descriptions are detailed and supported by decal outlines, and quick tips are placed here and there for maximum assurance. Vintage-looking faded colors and rotating logo add considerably to the elegance.Fred PerryFred Perry’s e-commerce store has a contemporary and elegant look, conveying key features of the brand very well. The stylish grayscale color scheme, along with sparse text in Helvetica font, make an impact. The design naturally combines Flash and JavaScript. The mini-cart window, the readable layout of the shopping cart and checkout pages, the usable navigation and informative product descriptions all up to a slick and friendly shopping experience.NectarThe website for clothing and accessories boutique Nectar was designed by Sunrise Design studio. The website’s structure allows you to browse goods and make purchases with ease. A muted palette and slipshod watercolor strokes in the background give the layout a positive feel. By the way, if you visit the designers’ portfolio page, you’ll see that painted styles must be their passion.Tommy HilfigerAnother giant brand: Tommy Hilfiger. This design relies on simplicity, a comfortable shopping experience and its corporate identity.SeibeiNow, that’s a design you will not forget! The site has a very simple, even minimal navigation combined with a striking “cartoonish” design. Product pages are clean and straightforward. Nice and unique design solution.BellyshadesThe design of German club-wear and accessories store Bellyshades stands out for sure. The vibrant acid colors, insane typography and animals that stand in for shopping carts will leave you anything but cold.Ten Little MonkeysThis design has a very strong visual appeal; vibrant colors work well on the dark background, the navigation is colorful yet intuitive (notice how the section for girls and boys are distinguished). Also, the choice of typography is appropriate for the shop’s main objective: selling branded children’s fashion and gifts.DogCollars.caHere’s another beautiful e-commerce website: DogCollars.ca. It’s a simple HTML website with a neat grid-based layout, a warm chocolate color and big high-quality thumbnails. The design is minimalist but not plain, and it delivers a satisfying shopping experience.’47Premium sports apparel brand ’47 has an interesting history: “This is a classic story. It’s the American dream come to life…” Thus, the company emphasizes the individuality of its brand in its store design and associates that brand with a community. The website combines jQuery and Flash, which slows the loading speed, but given its objective, this is not critical. Creative visualization and a well-implemented shopping mechanism make for a wonderful e-commerce design.Storyville Coffee CompanyCreating an e-commerce Flash platform, let alone a good one, is challenging. In addition to the Converse store profiled above, our showcase includes another fully Flash-based online store: Storyville Coffee Company. This one sports a pleasant coffee theme (appropriately enough), an original table-like product viewing area and an easy shopping process.Narwhal Co.Accessories made from recycled ties? Yes! Narwhal Co. produces original jazzy merchandise from recycled ties, including wallets, wrist wear, covers and cases.  The tie theme in the website’s header and footer, the stylish icons and the inventive product slideshow on the main page give this design a special flavor.The Famous 4th Street CookieBeautiful typography and high-quality images make this a tasty design.Via SnellaThe website of Swedish male fashion brand Via Snella is clean both in design and usability. The store itself is not very big, so the product gallery is not cluttered with the superfluous navigation bars, announcements and slideshows that are typical of large comprehensive online stores. Instead, the background of the fancy product thumbnail grid is made up of a classic black and white scheme, along with austere typography and plenty of white space.Twelve SouthTwelve South creates accessories exclusively for Apple computers. No wonder Apple’s style can be felt both visually and in the functionality, which is a compliment enough to Twelve South’s store design.GodivaHigh-quality food photography against a light minimalist background is quite effective for Godiva Chocolatier’s store design. Seeing those yummies on the main page is all it takes to hook you. Tons of products are available here, but the sophisticated navigation system and clean layout make shopping a comfortable experience. The shopping cart and checkout pages adhere to principal usability standards.Marc Hansen’s Comic BookAn original, striking and beautiful design that perfectly sets the atmosphere and communicate the style of the designer and his main product – a comic book.Vanilla VanityNow, that’s a weird web design. The products offered in the shop are just as weird, by the way. An original, unique design which deserves a spot in this showcase.Atom BicyclesA very simple, clean and stylish design with unusual navigation and good-looking product pages.ConverseOne would expect a great design from top-class brand Converse. Our expectations are met. Despite being entirely Flash-based, Converse’s online store is quick to load and easy to navigate. We see no heavy graphics or fancy Flash transitions here. Converse’s brand is communicated well by means of simple effects, including concrete and jeans textures, hand-drawn product selection frames and grungy graphics. The buying process is similar to the famous sneakers themselves: comfortable and painless.Steve & Co.Aside from its refined and clean appearance, the website for leather accessories store Steve & Co. is remarkably usable. For instance, the whole shopping process requires little jumping around: you can browse and preview products, add them to the cart and review purchases without reloading the page.iWorkwear.nlThis design has plenty of white space, making the black and yellow scheme especially appealing. There is no visual appeal, but the site works very nicely and it is very user-friendly. Even if you don’t speak Dutch, getting your bearings on iWorkwear.nl is easy because of the intuitive placement and highlighting of elements. A transparent table of brands sold in the right sidebar helps us easily find clothing without having to use the main navigation panel, which is in Dutch.Sony Style USASony Style USA is a pearl in our collection. It would be hard to find a more comprehensive, sophisticated and seamlessly designed e-commerce website. If you are looking to buy a laptop, you can read exhaustive product overviews, compare and browse reviews of similar products and even configure the computer you’ve selected, all without leaving the website. Even with the variety of products, the store is well organized and easy to navigate. The dark and light colors, along with the Flash and jQuery, perfectly fit this online store.Abel & ColeThe spirit of a small, environmentally friendly neighborhood grocery store is well reflected in this design by means of charming sketches and hand-drawn typography.Hollister Co.Hollister Co. sells Southern California-inspired casual wear. The store has a cool vintage style. Products are displayed horizontally; hover over an item to see its price and available colors without leaving the page. How usable! Warm sand colors and sepia-toned beach photos reflect the “SoCal” spirit of the brand. And we sure like those “Dudes” and “Bettys” categories!GargyleGargyle online warehouse website is simple yet cute. Blue dotted lines and lovely icons wonderfully reflect the old country-club lifestyle that Gargyle that aspires to.GiraffeA colorful design for young families and children. The design perfectly sets the atmosphere for the shopping experience. Notice how well PayPal-payment is communicated.farfetch.comWell-known fashion boutique farfetch.com has an elegant black-and-white design. Nothing gets in the way of a pleasing shopping experience here. The auto-detection of your location and currency are stylish features.WinestoreEverything here is about elegance, style and creativity. Vibrant pink against a white background makes for a vivid yet clean website. Beautiful typography and the “bar code” header complement the company’s image well. Pictograms with information about the wines’ color, body and flavor are a smart addition.Ork Posters!This one will interest all those who love typography, print design and data visualization. Ork Posters is the brainchild of Jenny Beorkrem, whose original typographic neighborhood posters quickly became a success. The online store is nothing short of a manifesto of typography love.laPatateBelgian t-shirt store laPatate has a creative and funny design (the men’s tee samples enjoy the lion’s share of laughs). The website is available in French only, but clear cart icons and a standard check-out page make for an intuitive shopping environment.SnuppedSnupped is a nice dark-themed store that sells laptop sleeves. You can buy pre-made sleeves or build your own design, configuring the size and choosing from a number of funky patterns. The products are not tagged or grouped into categories, but this is hardly an oversight given the store’s small size.CellarthiefCellarthief is a beautiful online wine store that sells only three wines at a time. The Apple.com-inspired content blocks against the real-looking wood background shows how the classic spirit of the wine industry is fused with modern design values.Harry WinstonA lot of glamour, shine and luxury is in this one. Harry Winston’s jewelry store features an amazing design with images that mix typography and jewelry.Olive & MyrtleOlive & Myrtle produces beautiful sustainably developed goodies. A clear layout, soft natural colors and subtle typography make this website look modern and eco-friendly.Hokey CroquisCuCuuCuCuu is a charming little store that sells bags and accessories made from recycled materials. The design is minimalist and the shopping experience simple.TeezRules and standards are made to be broken from time to time. You don’t have to speak Russian to tell that the design of Ukrainian t-shirt store Teez is far from ordinary. A chaotic mash of text and images is obviously a new trend in Web design. Despite all of this, the shop looks and feels pretty darn awesome. Take a minute to explore the website and you’ll see how easy it is to shop there. Off-the-chart creativity!Kinki MicksThis small store sells exclusive car wheels and vintage riding accessories. The design has a simple retro style that perfectly fits the company’s profile.Red Is WhiteRed Is White’s design is bright, and the shopping process is pretty solid (the power of inspirational Web design in practice!). A carefully arranged grid, unobtrusive colors and a smooth corduroy-looking texture make the website visually eye-catching, yet they do not eclipse the products. The way the t-shirt thumbnails are displayed is quite handy: just roll over an image of a print to see how it looks on a model.Related postsYou may be interested in the following related posts:Showcase Of Modern Navigation Design Trends69 Sexy Portfolio Designs To Inspire YouThe Big Showcase Of Online T-Shirt Stores50 Beautiful and Creative Blog Designs(al)© Julia May for Smashing Magazine, 2010. | Permalink | 50 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: showcases

  

  • Tags:
  • inspiration
  • showcases

  January 22 2010, 8:56am | Comments »

• I posted to smashingmagazine.com

  Progress Trackers in Web Design: Examples and Best Practices

  http://feedproxy.google.com/~r/SmashingMagazine/~3/djrcv7BPmpk/

     When designing a large website, especially one that contains a store, you may be required to design a system for ordering online, or a multi-step process of another sort. Walking users through this process by making it easy and intuitive is key to helping increase conversion rates. Any frustration along the way may cause them to leave and pursue other options. Progress trackers are designed to help users through a multi-step process and it is vital that such trackers be well designed in order to keep users informed about what section they are currently on, what section they have completed, and what tasks remain.In this article we will look at various uses of progress trackers and see how they’ve been implemented, what they are doing well, and what they are not doing well.[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.]What are Progress Trackers?You may not be familiar with the term ‘progress tracker’, also called a ‘progress indicator’ — but chances are good that you have encountered one at one time or another. They are used in online stores when placing an order, signing up to an online product or service, or even when booking a holiday online. Progress trackers guide the user through a number of steps in order to complete a specified process. An example of a progress tracker at GameThe Difference Between Progress Trackers and BreadcrumbsAs we have detailed previously in Breadcrumbs In Web Design: Examples And Best Practices, breadcrumbs are a way of enhancing navigation by revealing a user’s current location. Initially, breadcrumbs and progress trackers may seem very similar and in many ways they are, however, there are significant differences.Breadcrumbs show you only where you have been (or what sections are above the current section in the application’s hierarchy), whereas progress trackers indicate a set path that a user follows to complete a specific task. Progress trackers show you not only where you are currently located, but also what steps you have previously taken, and what steps you are about to take. Example of breadcrumbs at CoolspottersProgress trackers are best used when there is a specific goal to achieve. They are synonymous with conversion and are used as a way of improving usability — which is key when optimizing conversion rates. Conversion is all about selling online so you will see a progress tracker in some form in almost every online store.Now that we’ve reviewed what a progress tracker is, let’s look at situations that would require or even benefit from the implementation of a well-designed progress tracker.Uses of Progress TrackersAs mentioned previously, progress trackers can be used in a variety of contexts. The following three are the most common.1. Online Ordering By far the most common application of progress trackers is in conjunction with online purchasing, since this usually involves multiple steps. The progress tracker used by HMV. The progress tracker used at Etsy.2. Feature Tour Guides Progress trackers are also used to guide users through the features of online products and services, as demonstrated in the following examples: Progress tracker as used by Search Inside Video. Flickr’s tour page provides a look at the features of their service.3. Multi-Step Forms If a form requires a lot of user input, it may be best to split the form into multiple steps. Livestream’s progress tracker design. The progress tracker used on Buffalo’s Project Planner formBest Practices in Progress Tracker DesignIndicating a Logical Progression Most progress trackers are designed to display the steps from left to right. In most lands, people read from left to right, so it makes sense that progress trackers follow that pattern. That isn’t enough though — there has to be something that informs the user that they are performing a multi-step process. Blockbuster have included both arrows and numbers in their progress tracker, thus clearly communicating a logical progression.Keeping the User Informed of their Location One key aspect of good progress tracker design is keeping the user informed of where the user is in the process. This complements the logical progression because the user will know where they are in relation to where they have been, and what sections are to follow. Mr and Mrs Smith indicates the user’s current location by clearly highlighting the current step and turning the arrow downwards.Positioning Since progress trackers are a form of navigation, it is best to place them below the primary and secondary navigation (such as breadcrumbs) and above the content that the progress tracker relates to. Also, while a progress tracker can act as a page title, it is best to place the title of the current section underneath the progress tracker, to reinforce the current location. Gamestation places their progress tracker clearly below the primary and secondary navigation.Implementations of Progress TrackersPlain Text Below is an example of a plain text progress tracker on Media Temple’s website. One benefit of a plain text progress tracker is that it can be edited easily.Sprite-Based Sovereign uses the popular CSS sprites technique to build their progress tracker and reduce HTTP requests going through the online booking process.Design Mistakes to AvoidIndistinguishable from Breadcrumbs TypePad’s Design Assistant can be very easily confused with a breadcrumb navigation system.Not Enough Information easyJet’s old progress tracker on their booking path was poorly executed. Although it gave you the total number of steps in the process, it didn’t indicate which steps you’ve completed or which were remaining.Their new progress tracker, launched within the last few weeks, is a big improvement, indicating current location, past steps, and steps to come. They now also make good use of the page title which has descriptive wording to complement the current progress tracker label.No Sense of Progression daniblack incorrectly uses a tab system for their progress tracker. The problem with this is that tabs don’t offer any visual representation of progress. The addition of numbers or arrows would give at least some sort of indication of progression in this example.Progress Tracker ShowcaseNow that we know what a progress tracker is, how it is used, and the best approach to its design, let’s look at a number of well-designed progress trackers currently in use.Battle.net uses the method of incrementally filling a bar as you progress through the steps in their sign-up form.IkeaAmazon has a shopping trolley travelling across their progress tracker, leaving an orange line marking where it has been.Organic SupermarketThreadlessUrban OriginalsFireboxAppleVitradirectMouse to MinxCafePressTopshopJohn Lewis uses an image of a truck travelling along their progress tracker.Comet ticks off sections that have already been completed.Boots‘ Progress tracker spans the width of the page.Web MD uses a progress bar and percentage values as a way of tracking progress on their health check questionnaires.ArgosAltrecSurfRideiWorkwearZumiezToys”R”UseBagsFoot LockerThe Ultimate Green StoreCrate and BarrelPistol ClothingAmerican ApparelPC WorldAbel & ColeEcco USADesign PublicGolfsmith uses a combination of numbers and a progress bar with an arrow.PETCOFootball FanaticsThe Habitat CompanyWalton Garden Buildingslookfantastic uses icons to visually enhance their progress tracker.B&QRelated postsYou may be interested in the following related posts:Showcase Of Modern Navigation Design TrendsDesigning “Coming Soon” PagesCall to Action Buttons: Examples and Best PracticesSearch Results Design: Best Practices and Design Patterns© Tom Kenny for Smashing Magazine, 2010. | Permalink | 45 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: progress, showcases

  

  • Tags:
  • inspiration
  • showcases
  • progress

  January 15 2010, 2:52am | Comments »

• I posted to smashingmagazine.com

  35 Examples Of Masterful Lighting Effects In Web Design

  http://feedproxy.google.com/~r/SmashingMagazine/~3/4OjPHZyxCnw/

  Using a light source the right way can add dimension and beauty to a website design. Strong light sources create a stark contrast between light areas and shadows in a design, making the elements look more realistic and dimensional and less flat. Some websites opt instead for a dim light source to create a soft glow around particular areas of the website, to attract the eye more subtly. Lighting can also create a mood for a website. Some websites use bright swirls of light to show energy, while others use a dim glow to create a peaceful mood. In the examples below, you will see a wide range of lighting effects used, from subtle lighting effects to bold rays of light streaking across the page. You can learn how to better use light and shadow to polish your page designs and make them stand out on the screen in our recent article 5 Simple Tricks To Bring Light and Shadow Into Your Designs. Masterful Lighting Effects In Web Design 45royale

  Newism

  TaoEffect

  McCafe

  Postbox Inc.

  Weloveicons.com

  31 Three

  Icondock

  Mailchimp

  for a beautiful web

  CampaignMonitor

  Crush + Lovely

  Camp Creative Group

  Design moves me

  ditley

  artificial studio

  Revive Africa

  Lisa Moseley

  WebKitbits

  rareview

  Your Web Job

  Strutta

  Drew Wilson

  envato

  icebrrg

  Revyver Labs

  Mike Precious

  nekob

  nitobi

  Search Inside Video

  Monterey

  Tutorial9

  GoodBytes

  foehn

  Alex Buga

  youLOVE.us

  avalonstar

  Viget Labs

  Barack Obama

  About the Author Angela Rohner is founder of the Flash and CSS design gallery TheBestDesigns.com, which she started in 2001. She currently works as an Art Director and Front-End Developer in Dallas, TX. To get in touch with Angela, you can find her on Twitter, or you can visit her website. (al)

  © Angela Rohner for Smashing Magazine, 2009. | Permalink | 36 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine

  Post tags: design, effects, lightning, showcases

  

  • Tags:
  • design
  • Design Showcase
  • showcases
  • effects
  • lightning

  May 7 2009, 3:31pm | Comments »

• I posted to smashingmagazine.com

  More Web Design Trends For 2009

  http://www.smashingmagazine.com/2009/01/21/current-web-design-trends-for-2009/

  Last week we presented 10 Web Design Trends For 2009, our review of the most promising developments and techniques in web design that may become big in 2009. In the first part we covered embossing letters (”letterpress”), rich user interfaces, PNG transparency, big typography, carousels and media blocks. This post is the second part of our review. It presents design trends for 2009 in terms of layouts, visual approaches and design elements. Please notice that this post showcases trends and developments that were extensively covered in our previous articles (e.g. handwriting, retro and vintage etc.) and therefore weren’t covered in this post (they are all linked in the overview, so feel free to explore these single posts as well). Did you miss any recent development in this overview? Let us know in the comments! You may want to take a look at the following related posts:

  Web Design Trends For 2009 40 Creative Out-Of-The-Box-Layouts Textures In Modern Web Design Retro and Vintage in Modern Web Design Navigation Menus: Trends and Examples Hand-Drawing Style In Modern Web Design

  Web Design Trends For 2009 Let’s first take a closer look at some of the trends we identified, discovered and observed over the last months. In this overview, you’ll find a review of each trend and more beautiful examples that can inspire you in your next project.

  Out-of-the-box layouts

  One-page layouts

  Multi-column layouts

  Huge illustrations and vibrant graphics

  More white space than ever

  Social design elements

  “Speaking” navigation

  Status elements (Flickr, Twitter et al)

  Dynamic tabs

  Ever larger search boxes

  Category visuals

  Author icons

  Icons and visual clues

  Tag index (instead of tag clouds)

  Illustrations in blog posts

  Watercolor

  Handwriting

  Retro and vintage

  Organic textures, tiles and photographic backgrounds

  Badges

  Price tags

  Ribbons

  1. Out-Of-The-Box Layouts As we pointed out a couple of months ago in the showcase 40 Creative Design Layouts: Getting Out Of The Box, we are observing a strong trends towards more individual and creative layouts. Instead of applying conventional boxy layouts, designers are experimenting with the way information is structured, presented and communicated. In these out-of-the-box-designs, the overall creative approach is often more important and more memorable than the attention to details. Still, usability, typography and visual design are rarely overlooked and are often carefully executed. Creative layouts are particularly popular for portfolios, websites of design agencies and promotional websites (e.g. commercial campaigns of large companies), but they are also very popular on blogs.

  When it comes to creativity, the line between a usable and unusable design is very thin; thus, usability testing is particularly important, because a new creative approach can literally break a website. Often, it’s a good idea to find a compromise between a creative approach and a classic, traditional design, and try to achieve a balance between a “bulletproof” (yet ultimately boring) usable designs and an innovative unusable designs. Keep in mind that innovative ideas need some time to mature: to be rethought, modified, adapted, optimized and finally integrated in the design. We strongly encourage designers to break out of the usual boxed layout conventions, experiment with new approaches and risk crazy ideas. Show what you are capable of!

    2. One-Page Layouts An alternative route that designers often take to impress their visitors is using so-called one-page layouts: layouts that use one single page to present the content of the website. It doesn’t necessarily mean that these designs are minimalistic (adhering to the principle “Less is more”). On the contrary, such designs are often quite complex, include rich imagery and vivid animation effects and therefore take some time to load.

  When the user clicks on a navigation option, the page changes (partly), and new content is displayed in the area that was previously occupied by the previous content. The navigation of such layouts is supported by sliding and scrolling effects from common JavaScript libraries. The main advantage for the user is the simple fact that she needs less mouse movement and less clicks to get the information she is looking for. Because this approach is quite new, there is a good chance that some readers will get confused by the unconventional navigation techniques. An alternative “static” version may be helpful or even necessary in this case; you’ll have to offer an alternative version anyway for search engines and for people who have deactivated JavaScript support in their browsers.

    3. Multi-Column Layouts A design with multiple columns (3+ columns) is not necessarily a complex design. On the contrary, when designed properly, multi-column designs can be really helpful to visitors because they are given (hopefully) a better overview of the available navigation options and can more quickly find the information they are looking for. Over last few years, we’ve seen an explosion of content on the Web, which has led to the problem of a decrease user attention span, the time that visitors are willing to spend on a given website (see an article on ReadWriteWeb for details). Consequently, it’s no wonder that designers have tried to find ways of presenting information compactly, both to keep visitors on a website as long as possible and to make it as easy as possible to find content.

  One way of achieving this is simply to use layouts with more columns placed next to each other. The idea is quite reasonable. Screen resolutions have been constantly increasing in recent years (though a wide adoption of netbooks, like Asus’ Eee PC, may change that), providing users with more horizontal space and designers with additional space to fill with content. The result: now more and more designers are using more and more columns. We have observed a strong trend towards these so-called multi-column layouts, which are often fixed layouts of 850 by 1000 pixels in width. Multiple columns are used in magazine layouts and portfolios. In these layouts, grids are often used to guarantee a structural balance, hierarchy and order. With multi-column layouts, the importance of active white space between and within columns cannot be overstated. (Active white space is the space that is deliberately left blank to better structure the page and emphasize different areas of content.) For this purpose designers often make use of Shneiderman’s Mantra (”convey big picture first, reveal details later”), providing users with a brief overview of available options first and offering details on demand — later, when a link was clicked (Mozilla Labs is a great example of just that).

    4. Huge Illustrations And Vibrant Graphics Just as huge typography keeps dominating modern Web design, huge illustrations seem to be gaining popularity across both professional and personal Web projects. And designers are trying to communicate the message of a website using interactive elements (embedded video blocks) and visual elements (introduction blocks and illustrations). Recently in designs, illustrations have taken up much more space than before and usually supplement huge typography, and they are more attractive, more vivid and therefore more memorable to visitors. Alternatively, designers are also using vibrant graphics, particularly for backgrounds but also for other design elements. Various styles and graphic approaches are used: grunge, collage and scrapbook, ornaments, retro and vintage, watercolor, organic textures and photographic backgrounds.

    5. More White Space Than Ever Probably one of the most predictable, yet extremely beneficial, developments in Web design over the last few years has been the increasing prominence of white space. White space dominates many designs and is used generously to improve the flow of articles and structure of websites. In fact, we have never seen so much padding in content areas and navigation menus. Padding of 20 to 25 pixels in the wrapper and content area is becoming a rule of thumb, and even more padding is often considered acceptable. Hopefully, this development is here to stay.

    6. “Social” Design Elements If you take a close look at the blogosphere, you’ll hardly be able to find a blog that doesn’t use some kind of “social” icons or social blocks to encourage readers to promote its stories on popular social media websites. Every author loves traffic and recognition, which is why the social element in modern design is becoming bigger and aesthetically more attractive. Social icons are usually put all over the place, often in the top right of articles or at the bottom of the post. Social blocks often fill the area beneath a post and sometimes appear beside a list of related articles. Twitter, Flickr and Last.FM integration is still common for blogs and portfolios.

    7. “Speaking” Navigation We wrote about “speaking” block navigation in one of our showcases last year, and this design element seems to remain popular across various websites. The most significant task a navigation menu has to accomplish is to unambiguously guide visitors through different sections of a website. However, it’s quite hard sometimes to communicate the content of a website’s section with just one or two keywords, particularly if horizontal navigation is used. That’s why navigation options aren’t often listed simply one after another using appropriate keywords (i.e. using “silent” navigation). Instead, designers are attempting to concretely explain what options are available and what visitors should expect from a website section upon clicking the corresponding link. Because designers are trying to initiate more effective dialogue with visitors, we like to call this navigation scheme “speaking” navigation, as opposed to “silent” navigation, which is based on listings of keywords.

  So that visitors perceive content as being easy to navigate, the navigation is often structured with blocks of the same height and width. Large icons are quite often used; but in most cases the decision as to whether or not they are appropriate depends on the content of the website and the overall layout. “Soft” hover effects often support the navigation design by making browsing more pleasant.

    8. Dynamic Tabs One of the most popular trends in interactive design is having a tabbed area whose content can be changed dynamically. The idea behind dynamic tabs is that the content of all tabs is loaded when the page is loaded, but only one part of the content is displayed at a time (the attribute display is used to achieve this effect). You can follow a tutorial on dynamic tabs and ‘tabs’ visual control in jQuery to create dynamic tabs.

  Did we miss something? Did we miss any recent development in this overview? Do you have any further ideas or suggestions? Let us know in the comments! Related posts You may want to take a look at the following related posts:

  Web Design Trends For 2009 40 Creative Out-Of-The-Box-Layouts Textures In Modern Web Design Retro and Vintage in Modern Web Design Navigation Menus: Trends and Examples Hand-Drawing Style In Modern Web Design

  

  • Tags:
  • design
  • Design Showcase
  • showcases
  • trends
  • 2009

  January 21 2009, 8:00pm | Comments »

• I posted to smashingmagazine.com

  Web Design Trends For 2009

  http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/

  We Web designers are a fickle lot. We love to experiment with things. We love to observe how people interact with our work. And we love to try out unusual design approaches that might possibly go mainstream and become a classic approach. As result, new design approaches come up, and as more and more designers notice them and make use of them, new trends emerge. Over the last months, we’ve analyzed numerous Web designs, observing emerging trends and weighing the merits of numerous design decisions and coding solutions. In this post, we present Web design trends for 2009: recent developments, new design elements and new graphic approaches. We also discuss situations in which these trends can be used and present some beautiful examples. Did you miss any recent development in this overview? Let us know in the comments! This article covers only 10 of the over 25 trends we’ve identified over the last months. The second part will be published next week. We’ll cover new layouts, new visual approaches and new design elements. Please stay tuned. Web Design Trends For 2009 Let’s first take a closer look at the main trends we identified, discovered and observed over the last months. In this overview, you’ll find a review of each trend and more beautiful examples that can inspire you in your next project.

  Letterpress

  Rich user interfaces

  PNG transparency

  Big typography

  Font replacement (sIFR, etc.)

  Modal boxes

  Media blocks

  The magazine look

  Carousels (slideshows)

  Introduction blocks

  Now let’s go into details and take a closer look at each of the trends presented above. 1. Letterpress One of the most unexpected trends we’ve observed over the last months was the emergence of letterpress (actually pressed letters) in Web design. Probably the most important reason for this trend is the simple fact that this technique has been rarely used until now. Letterpress is used in various styles and on various websites and for various topics; in particular, it is often used in product designs and on websites for online services.

  1. Rich User Interfaces Happily, user interfaces in modern websites and Web applications are becoming more beautiful and more usable. Over the last year, the user experience for these applications has dramatically improved, resulting in rich and responsive user interface that have tremendous similarities with classic desktop applications. AJAX and Flash are widely used to offer users the dynamic interaction that they have come to expect from advanced, sophisticated, professional solutions. In particular, we’ve seen much more white space over the last year, much more padding and much more space for various design elements. We also observed that many modern user interfaces display intuitive visual clues to communicate the status of a user’s interaction with the system. For instance, upon being clicked, event buttons often change their appearance from a “normal” to a “pressed” look (as on Newspond.com and Quicksnapper.com), confirming and providing immediate feedback on the user’s interaction with the system. Aside from this, more and more services are now able to be personalized by the user: for us, it’s a clear sign that adaptive user interfaces are coming in 2009.

  Both examples are evidence that designers of Web applications are paying significantly more attention to the way in which functionality is presented and are trying to improve the user experience with more interactive and responsive solutions.

  1. PNG transparency PNG transparency, although unsupported by Internet Explorer 6, seems to have gained popularity on the scene over the last year. Apparently, designers are trying to better integrate background images into the actual content and are aiming for a style that is often seen in printed media, magazines for instance. In most cases, semi-transparent backgrounds stand out in the overall background of a page and are intended to highlight an important design element, such as a headline or announcement. Sometimes PNG transparency is used for the background of modal boxes as well. Last year, we described a variety of ways in which can get creative with transparency in Web design, and many designers seemed to experiment with these techniques in their work. Interestingly enough, transparency is often used either in the header or footer of designs, but some designs go beyond that.

  2. HUGE Typography We presented some outstanding examples of BIG typography in previous posts. In 2009, big typography should remain popular. In particular, design agencies, portfolios, product websites and online services will use big typography to communicate the most important messages of their websites. The font size of these design elements often goes beyond 36 pixels, and in many cases quite expensive typefaces are used to reach an audience. Overall, designers are paying closer attention to typographic details such as leading, line height and choice of font. The consequence: websites are more beautiful and more consistent and look solid and trustworthy.

  3. Font Replacement As designers pay more attention to typography, they also pay more attention to the fonts that are used for the copy in the body of websites. Although classics such as Helvetica, Arial, Georgia and Verdana undoubtedly dominate, we observed a slight trend towards font replacement (for instance, with sIFR). What is interesting is that these fonts are often seamlessly integrated in the design of websites; they are almost never used for their own sake or simply to “upgrade” the typography of a website. Designers are trying to blend beautiful typography and arresting visual design to improve the appearance of websites and improve the user experience.

  4. Modal Boxes (Lightboxes) Modal boxes (dialog windows) are, essentially, the second generation of pop-ups. They serve as a user-friendly alternative to classic JavaScript windows and support users by focusing their attention on the most important area of the website. Modal windows are always triggered by a user action (e.g. signing up or logging in) and appear on top of the main content, like a window in a regular desktop application. Modal windows are often presented in a very subtle way: they are often semi-transparent and have a “Close” button.

  5. Media Blocks With more broadband Internet access, users can now afford to browse more than they did a couple of years ago, and designers can use this opportunity to present content in a more attractive and memorable way. Hence, it’s no wonder that many product websites use media blocks (for videos and screencasts) for this very purpose. The main advantage of such elements is that they can communicate content quickly and effectively and make it easier for users to consume information. Users just lean back and enjoy the show; they get everything explained to them step by step, without having to click, search for descriptions or learn the navigation. The movies are usually pretty short and get directly to the point; they are mostly formal but can be entertaining, too. But please make sure that videos are an alternative presentation of (and not the main or only!) content on your website. Not every user has broadband access to the Web, not every user is willing to watch a video (e.g. because he or she may have a radio or music playing in the background), and not every user has Flash and JavaScript installed on his or her machine.

  6. The Magazine Look An interesting development in the design of blogs is the adaptation of various techniques usually found in traditional (print) media. The arrangement of posts on the page, the use of typography, illustrations and even text alignment often resemble traditional techniques from print. Grid-based designs are gaining popularity as well but are used mostly in portfolios, product pages and big blogs; they almost never appear on corporate websites or in online shops.

  7. Carousels (Slideshows) Carousels are essentially slideshow navigations, in which the content rotates vertically or horizontally (hence the name “carousel”). To rotate the navigation, users need to click on one of two toggle elements (usually a left/right or up/down arrow). Depending on the toggle element selected, the content is rotated in the desired direction. Instead of clicking through various sections of the website for their favorite stories, users can quickly skim through the available stories without vertical scrolling or unnecessary mouse movements. The result: users save time, and the carousel focuses their attention sharply on the content, instead of on interacting with the browser. Such slideshow navigation is often used on entertainment websites and big blogs, but designers also make use of it in their portfolios to showcase their work in a more interactive way.

  8. Introduction Blocks The upper-left area of a website is the most important block on the page, because it grabs the most attention from visitors. Therefore, it makes perfect sense to place the most important message of the website right there and thus make sure that readers get the message as quickly as possible. In fact, this is exactly what many designers are doing. Whether for a Web application, corporate design, online service or portfolio, designers are pushing their slogans and brief introductions to the top of the page and are using strong, vivid typography to make a good first impression. Some introductions are short, others are quite lengthy; in either case, they usually take a lot of space; the full width of the layout and between 250 and 400 pixels in height are common dimensions for these introduction blocks. Notice, though, that introduction blocks almost never appear in blogs and rarely in online shops.

  Stay tuned! This article covers only 10 of the over 25 trends we’ve identified over the last months. The second part will be published next week. We’ll cover new layouts, new visual approaches and new design elements. Please stay tuned. (al)

  

  • Tags:
  • design
  • Design Showcase
  • showcases
  • trends
  • 2009

  January 14 2009, 9:00pm | Comments »

• I posted to smashingmagazine.com

  50 Beautiful And Creative Portfolio Designs

  http://www.smashingmagazine.com/2008/11/26/50-beautiful-and-creative-portfolio-designs/

  By Jacob Gube Design portfolios come in various forms. Traditionally, they have been print-based and something you would carry to a client pitch or meeting to showcase what you’ve done and how you did it. Today, many designers take advantage of the Internet to publish and showcase their work via their online portfolios. Having your work displayed online removes the geographical restraints that traditional portfolios impose on you. With many portfolios online, it’s often hard to stand out from the sea of competition out there. It takes a creative design to grab the user’s attention long enough for him or her to enjoy sifting through your work. Adding rich interactive elements, framing your work in a unique way, and concocting a means of providing a unique experience can not only get the user’s attention but also show your capabilities as a designer. In this showcase, you’ll find a variety of beautiful, unique and highly creative portfolio designs. The aim here is to stimulate your creativity and inspire you to create your own portfolio or re-think your existing one. You’ll see portfolios from a wide range of fields, including Web design, product design, illustration, photography and even animation. So, we now present to you 50 beautiful and creative portfolio designs. You may also want to take a look at the following related articles:

  Creating A Successful Online Portfolio In this article, we review five pitfalls that commonly plague portfolio design. Then we’ll offer portfolio tips that, if carefully considered and well executed, will deliver quality results for your portfolio.

  50 Beautiful and Creative Portfolios Pikaboo This portfolio showcases a creative navigation scheme; use the scroll button on the mouse to navigate up and down the showcase. Alternatively, the designer gives you a columned view of the showcased work if you click on “Overview.”

  Lyndon Wade This portfolio effectively integrates the interface of the design. Clicking a category link of the portfolio expands a “film-strip” view of the thumbnails in the section. Upon clicking a thumbnail, it expands to a full-screen view; clicking on the left or right allows you to navigate through all of the showcased paragraphs in full-screen mode.

  Jesse Willmon’s fall 2008 DESIGN-TACULAR Jesse Willmon presents his portfolio in a unique fashion, through “doodles,” giving it a memorable user interface.

  Daniel Stenberg Daniel Stenberg frames each of his works beautifully and allows users to navigate through them horizontally. The result is a clean and simple but effective portfolio design.

  Domenico Tedone Design Unconventional navigation schemes can be a great way to leave a lasting impression on users (but they can also make users leave in an instant); Domenico Tendone capitalizes on Flash’s strength of being responsive to user events by showcasing his work via a revolving 3-D wheel. Use the scroll button to scroll through his work.

  Marc Dahmen Marc Dahmen gives us a creative user interface by showing his projects as business cards. Clicking on a business card gives you a nifty animation as it enlarges. To make navigation easier, the portfolio provides keyboard shortcuts (you can see them at the top left of the page).

  SuperLover The excellent selection of colors in this portfolio complements the showcased artwork, and the organization of each piece makes it stand out.

  Aline Caron Portfolio The presentation of the thumbnails in this portfolio gives it a unique interface, reminiscent of the chemical table of elements.

  chris woods Minimalist portfolios focus the user’s attention on the works being presented, as seen in the portfolio of Chris Woods.

  Deep Deep’s portfolio gives users a unique navigation interface; the plain solid background and text make the showcase the highlight of the home page.

  Dave Werner’s Portfolio Dave Werner’s portfolio gallery is shown as an artistic collage; clicking on a piece in the collage expands it.

  Booreiland Booreiland’s portfolio gives users a “breadcrumb” navigation scheme so that they can easily jump through sections.

  vivified In this showcase, the projects dominate the entire page, and a thumbnail gallery on the right-hand side gives you a way to browse through the projects.

  nisgia.com Interactive designers can show off their creative skill in user interaction by having a portfolio with distinctive interactive elements, as shown by nisgia’s portfolio.

  Rob Young Rob Young frames his projects in a MacBook Pro laptop, alluding to the nature of his job as an art director and designer.

  Sid Lee This clean and simple portfolio gives focus to the active work being viewed by allowing it to take up a large part of the viewing area. Hovering over the right-hand side of the page opens up an alternate navigation menu.

  Nile Inside Artwork is displayed in a “film-strip” view, and clicking on a piece expands it without navigating away from the film strip. Even with the rich interactivity of the portfolio, it doesn’t rely on Flash.

  Les illustrations de Lapin Illustrations displayed side by side beautifully showcase the illustrations made in the artist’s sketchbook, giving the portfolio an unprocessed, raw, natural look.

  Contrast Conventional design portfolios are visual, but that isn’t the case with Contrast’s portfolio, which displays its “thumbnail” gallery in a text-based format.

  sroown sroown effectively uses its logo to frame its design gallery. Note the red “Jump back to top” element along the right-hand side that follows you along as you scroll down the page, a subtle enhancement of the interface that gives you insight into the small details they pay attention to in their designs.

  OnWired OnWired showcases its design process by taking us from conception to final product in each of its projects.

  Michael Muller Photography Michael Muller’s portfolio directs the user’s attention to his photographic work by making it the focal point of the page. Hover over each piece to navigate through his work.

  EveningLab A creative interface makes EveningLab’s portfolio stand out.

  Die Neue Modern Irregular shapes and sizes of the thumbnails in this portfolio give it a unique and “systematic disorder.”

  Made Like Me This portfolio shows the typical way of displaying thumbnail galleries; but by leveraging the artwork’s vivid colors and placing the art against a dark background, each piece pops out of the page and the gallery achieves a unified look.

  Marius Roosendaal An accordion user interface gives Marius Roosendaal’s portfolio a nifty way of showcasing his work while allowing it to remain compact, thus maximizing valuable screen real estate.

  Jason Reed Web Design Jason Reed’s portfolio features a horizontal accordion menu, which minimizes the need to scroll and, again, makes the design compact.

  Thibaud’s portfolio Thibaud’s portfolio uses color swatches as interactive elements, which not only hints at the nature of his work but also effectively showcases his skill, experience and creativity in interactive design.

  standardimage Standardimage features a unique navigation scheme that auto-scrolls down the page when you click on a menu item. The portfolio design is clean, simple and minimal, which makes each piece stand out.

  bcandullo.com Brad Candullo beautifully frames his creations with worn notebook pages, giving them an organic look and feel.

  James Lai Creative James Lai Creative’s portfolio sits on the front page. Each thumbnail is in a frame, and you can navigate through them horizontally.

  formrausch This portfolio puts each project in a beautiful frame, showing the designer’s meticulous attention to detail.

  Serial Cut Another minimalist portfolio design that focuses attention on the artwork.

  Dawghouse Design Studio Dawghouse Design Studio displays its projects on a notebook paper background. The hand-drawn concept is carried through with each graphical element, including the “View site” button and the “Next” and “Previous” buttons.

  Hot Meteor Eye-catching, smooth animation that uses horizontal and vertical movement creates a memorable user experience.

  Oneover.com The unconventional 3-D showcase seen in this portfolio provides a great user experience.

  13 Creative 13 Creative houses its portfolio on a steno pad. A beautiful navigation scheme and subtle, fluid animation make this portfolio a memorable design.

  TROZO GALLERY Eduardo Valdivieso’s style of art transcends the canvas and works well as part of a Web design, allowing the two media to complement each other.

  Danny Blackman Danny Blackman’s animated navigation makes navigating through his projects a pleasant experience.

  Frisk Web Frisk Web displays thumbnails of its projects as taped-on Polaroid shots, giving the portfolio design an uncommon and remarkable layout.

  foxie’s graphic design This creative portfolio interface uses books sitting on a bookshelf for navigation.

  Visualbox Visualbox takes advantage of the vivid colors of its work by placing its portfolio against a plain dark background, effectively emphasizing the “Visual” in its company name.

  Ed Peixoto An unconventional layout for a thumbnail gallery and subtle yet memorable hover-over animation make this portfolio design impressive.

  Odd Web Things Odd Web Things stays true to its name by showcasing its work in an unusual fashion. You just might think about the design long enough to remember the company’s name, or even explore the rest of its website looking for an explanation.

  NANAMIart NANAMIart integrates its portfolio in the design by displaying it near the header, giving users access to it at all times.

  Vault49 This portfolio is text-based until you click on the name of a project; the name then expands to show a preview of the artwork.

  SKINS INTERACTIVE Fluid, smooth 3-D animation makes browsing through Skin Interactive’s portfolio an enjoyable user experience.

  adncom A rotating display that revolves around an illustrated sheep gives adncom’s portfolio a unique twist.

  SeymourPowell The deck-of-cards introduction gives users a sense of what SeymourPowell is all about in a matter of seconds.

  hellokarl hellokarl combines subtle, fluid animation along with great large-scale product shots to create an engrossing mood.

  Related posts You may also want to take a look at the following related articles:

  Creating A Successful Online Portfolio In this article, we review five pitfalls that commonly plague portfolio design. Then we’ll offer portfolio tips that, if carefully considered and well executed, will deliver quality results for your portfolio.

  About the Author Jacob Gube is a Web developer/designer and author of Six Revisions, a blog on Web development and design. If you want to connect with the author, you can follow him on Twitter. (al)

  

  • Tags:
  • Design Showcase
  • showcases
  • portfolio

  November 26 2008, 3:00pm | Comments »

• I posted to smashingmagazine.com

  Favicon Episode 8

  http://www.smashingmagazine.com/2008/11/20/favicon-episode-8/

  Every now and again we showcase beautiful favicons — tiny pieces of art you’ll usually find in your browser’s address bar or when searching through your bookmarks. Favicons are important as they provide visual indicators to visitors and help them to easily associate the content with a bookmark in their browser. Besides, favicons are just nice to look at and there are way too many sites which don’t make use of them. We like to change things. Which is why here is the 8th episode of the favicons series. For a change a small article with very small images and a quick loading time. We’ve written enough about favicons in our previous posts. If you’d like to find out more about them, feel free to take a look at our previous posts:

  Part 1: Inspire Yourself: 50 Remarkable Favicons Part 2: Inspire Yourself: More Creative Favicons Part 3: Creative Favicons: When Small Is Beautiful Part 4: Creative Favicons: Tiny Artwork Episode 5: The Delicate Beauties Favicon Episode 6: Black, Abstract and Hand-Drawing Favicon Episode 7

  Please notice that the favicons weren’t chosen simply because of their beauty; it’s been important to us that the favicon perfectly fits to the overall site design. Pay close attention to the small details of the design. All favicons are linked to the sites where they are used — you can click on them to get more insights into how favicon design can be related to the layout design. All favicons are listed without a particular order. All images are linked - of course, if the page that contained the favicon still exists.

  Nofifu

  Celsius Compile

  CodeIgniter

  Typo3 Switch

  Tajloro

  Nicole Bauer

  Computersight

  Leisure and Cultural Services Departement Hongkong

  Sodevious

  Inspired Buddy

  Digital Camera Ressource Page

  Accessites

  Creative News

  Bed and Breakfast Brescia

  Web Urbanist

  loup de lou

  Vida Comunicação

  Clay Ant

  Patrick Monkel’s Karma

  Designspotter

  Train1on1

  Turism Point Romania

  Heartprints

  The Pennsylvania Federation of College Republicans

  Burrow Physiotherapy Pontefract

  Dean J. Robinson

  Salt Solutions

  Lyte Byte

  Foxycart

  Notified

  Evoluted

  Lifesize

  Iconified

  Kidsmodern

  Knoxville Tourism

  Etnies

  Maxvoltar

  we:pressecenter

  Scrummy

  Stefano Verna. Yes, a simple idea, but very effective in a bookmarklist.

  Web Magazine

  My Bank Tracker

  Ge a Freelancer. Reminds at Christ the Redeemer statue in Rio de Janeiro.

  Scinexx

  Diplod

  Strands

  Custom Canvas

  I like to Design. Last but not least the very animated one.

  

  • Tags:
  • inspiration
  • Design Showcase
  • showcases
  • favicons

  November 20 2008, 3:04pm | Comments »

1 2

Popular Tags

• inspiration
• design
• downloads
• Freebies
• Graphics
• free
• Developers Toolbox
• How-To
• Design Showcase
• photography
• wordpress
• icons
• photoshop
• coding
• Tutorials
• CSS
• wallpapers
• workflow
• Events
• showcases
• useful
• tools
• smashing
• techniques
• typography
• usability
• best of
• Fonts
• e-commerce
• CMS
• Best of the Month
• php
• retro
• portfolios
• trends
• navigation
• templates
• movies
• javascript
• Forms
• ui
• vector
• brushes
• illustrator
• Business Cards
• vintage
• vectors
• applications
• christmas
• video

Search