Design Treats

Home › Items tagged with inspiration

• I posted to smashingmagazine.com

  Showcase Of Appetizing Restaurant Websites

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

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

  

  • Tags:
  • inspiration
  • showcases

  September 2 2010, 6:54am | Comments »

• I posted to smashingmagazine.com

  Corporate Website Design: Creative and Beautiful Solutions

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

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

  

  • Tags:
  • inspiration
  • showcases

  August 25 2010, 1:51am | Comments »

• I posted to smashingmagazine.com

  Balancing Inspiration and Individuality

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

    I love it when a good story is broken down so that even the simplest of minds can understand. I’m not the smartest, fastest or most creative person in the world, so I don’t like using a lot of big words or fancy jargon to try and impress you — but I’m learning every day, and that is what pushes me on. Let me cut the small talk and dive right in.The Current StateWhen I look out on the hillside of design, all I see are copies of what great designers have done before us. The landscape has become so congested with cookie-cutter homes that seeing the real people living inside has become hard. It’s like watching that movie Pleasantville, in which everything is black and white and no one knows any better, and yet there are those pursuing something different, something original.My hope is to inspire you to step away from the computer and open your eyes to the world around you. Expand your mind; think beyond the limits of the liquid crystals staring back at you.[By the way, did you know we have a free Email Newsletter? Subscribe now and get fresh short tips and tricks in your inbox!]Getting StartedThe first step in any recovery process is to admit that there’s a problem. Once we’re comfortable admitting that we’ve been copying each other’s style, we can move on. The next step in this design detox, if you will, is to close the laptop, turn off the monitor, put down the iPhone and go find a pen or pencil and some paper. Not so fast with that Moleskine journal! It won’t help you. You understand that Apple and Adobe products don’t do the work for you, and neither will the Moleskine make you a better [fill in your profession]. Only with time, patience and practice will you begin to refine your skills.Don’t worry if you think you can’t draw. I hear that a lot, and I wish people would remove the word “can’t” from their vocabulary. Maybe you’re not good at drawing people but are amazing at drawing monsters, or maybe you’re not good at drawing buildings but are excellent at sketching wireframes. Just because your drawings don’t look like those of people you admire does not mean your drawings are no good.Live in the MomentTime does not stop — shocker, I know. You can’t fight it. Rather, think of it as the Rolling Stones do: time is on my side. Realize that time will make you better. The get-rich-quick approach is a cheap substitute for an investment of time: it might work for a few people, but it never lasts. Save yourself the trouble and commit to the long-term effort. Better yet, take an art history class and learn how long it took the great artists to achieve success. You’ll find that some were not recognized until after they were dead.Pioneers Of the New FrontierSo where do we turn for inspiration? I always look to artists in other media. I’ll mention a few who have set a high standard — one so high that it hasn’t been beat. Still, I believe you have what it takes to run faster, jump higher and think bigger.Leonardo da VinciLeonardo da Vinci was the original Renaissance Man. Not only was he an amazing painter, he was also an extraordinary mathematician, sculptor, anatomist and writer — and those were just a few of his occupations. His career, which left a legacy that is still unsurpassed, is characterized by a passion for discovery and creation. If for no other reason, da Vinci is an inspiration to us because of his fervent passion for learning.M. C. EscherMaurits Cornelis Escher is a great example to us because he pursued his passion and succeeded, even without a degree. M.C. Escher’s artwork — an excellent source of inspiration for modern design — has a great deal to do with mathematics, but he never had formal mathematical training. Those of us building the Web could learn a thing or two from Escher’s work on symmetry and patterns.Norman RockwellNormal Rockwell defined a generation. His depictions of the American lifestyle in the early-20th century are iconic. If Rockwell were alive today, he would definitely be one of the all-stars posting stuff to Dribbble.Closing WordsThere’s nothing like the feeling of accomplishment that comes from doing something you didn’t think you could. Whether you want to build websites, paint a mural, design icons or draw characters, I encourage you to make time for practice and to get away from the computer at least an hour a day. Pick up a book, take a walk, call a friend — do whatever you can to take your mind off technology. In those moments when we quiet our minds, inspiration comes and we can just be ourselves.P.S.Just one last nugget before you leave: don’t let a lack of inspiration overwhelm you or make you feel like less of a person. I know from personal experience that drowning in inspiration makes me feel unsuccessful. And yet when we judge ourselves against our own work, we hinder our growth. We have to find a balance between being inspired and being true to ourselves. That’s what makes the journey so exciting.(al)© Kyle Steed for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags:

  

  • Tags:
  • inspiration
  • Opinion column

  August 20 2010, 6:46am | Comments »

• I posted to smashingmagazine.com

  25 Useful Videos and Presentations for Designers

  http://feedproxy.google.com/~r/SmashingMagazine/~3/525PSQRhyro/

    With the huge number of design-related conferences and events around the world, the Web gives those of us who cannot attend them a great opportunity to listen and benefit from their great and talented speakers. To aid in this, here we present some of the best videos, interviews and presentations about design and related topics.Using Design to Make Ideas NewSpeaker: Milton Glaser Legendary graphic designer Milton Glaser dives deep into a new painting inspired by Piero della Francesca. From there, he muses on what makes a convincing poster, by breaking down an idea and making it new.Designing for ObamaSpeaker: Steven Heller Steven Heller speaks at AIGA Philly on the outpouring of posters for Barack Obama’s 2008 presidential campaign. Heller also compares today’s political graphics to the campaign posters of the last generation and explores the relationship between democracy and design.Paula Scher Gets SeriousSpeaker: Paula Scher Paula Scher looks back on her life in design (she’s done album covers, books, the Citibank logo and much more) and pinpoints the moment when she started really having fun. Watch out for gorgeous designs and images from her legendary career.An Interview With Debbie MillmanSpeaker: Debbie Millman AIGA President Debbie Millman talks at AIGA Philly about the need for designers to embrace technology and how the AIGA can adapt to changes in the field through an active membership.David Carson on Design and DiscoverySpeaker: David Carson Great design is a never-ending journey of discovery, on which it helps to pack a healthy sense of humor. Sociologist and surfer-turned-designer David Carson walks through a gorgeous (and often quite funny) slide deck of his work and found images.Designing the Obama CampaignSpeaker: Scott Thomas As the design director for Obama’s 2008 campaign, Scott Thomas led a now-historic political campaign, in which branding, design and the Web played a truly pivotal role. Likening the experience to “building an airplane in flight,” Scott talks about the creative individual’s need for triage, the crucial role of incremental improvements and the importance of returning to the hand and keeping things simple.Three Ways Good Design Makes You HappySpeaker: Don Norman Design critic Don Norman turns his incisive eye to beauty, fun, pleasure and emotion, as he looks at design that makes people happy. He identifies the three emotional cues that a well-designed product must hit to succeed.Designs to Save NewspapersSpeaker: Jacek Utko Jacek Utko is an extraordinary Polish newspaper designer whose redesigns for papers in Eastern Europe not only win awards but increase circulation by up to 100%. Can good design save newspaper? It just might.Typographic HierarchySpeaker: Tony Pritchard Typographic hierarchy is about analyzing textual information and prioritizing based on meaning. The designer determines the order in which the user views information through basic typographic techniques such as size, weight and position of type.Urging Designers to Think BigSpeaker: Tim Brown Tim Brown says that the design industry is preoccupied with creating nifty, fashionable objects, even as pressing questions like clean water access show it has a bigger role to play. He calls for a shift to local, collaborative, participatory “design thinking.”How to Make a FontSpeaker: Chank Diesel Watch a font come to life before you very eyes! Filmed on location at alphabetician Chank Diesel’s font-making workshop at Clockwork Active Media Systems in Minneapolis.How Art Shapes CultureSpeaker: Thelma Golden Thelma Golden, curator of the Studio Museum in Harlem, walks us through three recent shows that explore how art examines and redefines culture. The “post-black” artists she works with are using their art to instigate a new dialogue on race, culture and the meaning of art itself.An Interview With Erik SpiekermannSpeaker: Erik Spiekermann An interview with professor and typography designer Erik Spiekermann about his opinion of typefaces such as Helvetica and Arial.Happy DesignSpeaker: Stefan Sagmeister Graphic designer Stefan Sagmeister takes the audience on a whimsical journey through moments in his life that made him happy and notes how many of these moments had to do with good design.Interview With Jonathan Hoefler and Tobias FrereSpeaker: Jonathan Hoefler and Tobias Frere Hoefler and Frere-Jones are American typeface designers. Here is a clip of them talking about everyone’s favorite font in the documentary Helvetica.John Maeda on His Journey in DesignSpeaker: John Maeda Designer John Maeda talks about his path from a Seattle tofu factory to the Rhode Island School of Design, of which he became president in 2008. Maeda, a tireless experimenter and witty observer, explores the crucial moment when design met computers.Two Minutes With Robin NicholasSpeaker: Robin Nicholas Robin Nicholas, creator of Arial, discusses his creative inspirations, favorite typefaces and the evolution of fonts.The True Face of Leonardo Da VinciSpeaker: Siegfried Woldhek Mona Lisa is one of the best-known faces on the planet. But would you recognize an image of Leonardo da Vinci? Illustrator Siegfried Woldhek uses some thoughtful image-analysis techniques to find what he believes is the true face of Leonardo.Five Secrets from 86 NotebooksSpeaker: Michael Bierut Renowned graphic designer Michael Bierut claims that he’s not creative. Instead, he likens his job to that of a doctor who tends to patients: “the sicker, the better.” Digging into the 86 notebooks he’s kept over his career, Bierut walks us through five projects, from conception to execution, extracting a handful of simple lessons (e.g. the problem contains the solution; don’t avoid the obvious) that lie at the foundation of brilliant design.Thinking Deep on DesignSpeaker: Philippe Starck With no pretty slides to show, designer Philippe Starck spends 18 minutes reaching to the very root of the question “Why design?” Listen carefully for the perfect mantra for all of us, genius or not.Two Minutes With Nadine ChahineSpeaker: Nadine Chahine Nadine Chahine, a font designer and Arabic specialist at Monotype Imaging, discusses her creative inspirations, favorite typefaces and the evolution of fonts.Treating Design as ArtSpeaker: Paola Antonelli Paola Antonelli, design curator at New York’s Museum of Modern Art, wants to spread her appreciation of design in all shapes and forms around the world.Practice Makes Pixel PerfectSpeaker: Ryan Sims Ryan Sims speaks about how to understand talent and how to become a great designer.Intricate Beauty by DesignSpeaker: Marian Bantjes In graphic design, Marian Bantjes says, throwing your individuality into a project is considered heresy. She explains how she built her career doing just that, bringing her signature delicate illustrations to store fronts, valentines and even genetic diagrams.Designing for the TabletSpeaker: Marian Bantjes Books, magazines, televisions. We hear these words and understand well what shape their content will take. But tablet? Digital magazine? How does the size of the object frame the user experience? How does it affect the object’s portability and accessibility? How will our experience with these devices compare with that of more “full-figured” media? Do we need to consider grid, typography and behavior differently? Hear four perspectives on how telling stories in new spaces creates new experiences.[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #2 is Successful Freelancing for Web Designers, 260 pages for just $9,90.]Other ResourcesVideos about design at the TED ConferenceVideos about design at the 99 Percent ConferenceVideos about design on VimeoAdobe Design Center: Video WorkshopSeven Must-See Web Design Videos and PresentationsAdobe Photoshop Video Tutorials: Best Of20 Beautiful Video Motion PiecesSeven Must-See Web Design Videos and Presentations(al)© Otba Mushaweh for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags:

  

  • Tags:
  • inspiration

  August 14 2010, 11:40am | Comments »

• I posted to smashingmagazine.com

  The Future of the Internet

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

    “In only a few short years, electronic computing systems have been invented and improved at a tremendous rate. But computers did not ‘just grow.’ They have evolved… They were born and they are being improved as a consequence of man’s ingenuity, his imagination… and his mathematics.” — 1958 IBM brochureThe Internet is a medium that is evolving at breakneck speed. It’s a wild organism of sweeping cultural change — one that leaves the carcasses of dead media forms in its sizeable wake. It’s transformative: it has transformed the vast globe into a ‘global village’ and it has drawn human communication away from print-based media and into a post-Gutenberg digital era. Right now, its perils are equal to its potential. The debate over ‘net neutrality’ is at a fever pitch. There is a tug-of-war going on between an ‘open web’ and a more governed form of the web (like the Apple-approved apps on the iPad/iPhone) that has more security but less freedom.An illustration of a computer from a 1958 IBM promotional brochure titled ‘World of Numbers’ So what’s the next step in its evolution, and what’s the big picture? What does the Internet mean as an extension of human communication, of the human mind? And forget tomorrow — where will the web be in fifty years, or a hundred? Will the Internet help make the world look like something out of Blade Runner or Minority Report? Let’s just pray it doesn’t have anything to do with The Matrix sequels, because those movies really sucked.This article will offer in-depth analysis of a range of subjects — from realistic expectations stemming from current trends to some more imaginative speculations on the distant future.[Offtopic: by the way, have you ever visited Smashing Magazine's List of tags? There might be something interesting for you.]Security“Death of the Open Web”?Those words have an ominous ring for those of us who have a deep appreciation of the Internet as well as high hopes for its future. The phrase comes from the title of a recent New York Times article that struck a nerve with some readers. The article paints a disquieting picture of the web as a “haphazardly planned” digital city where “malware and spam have turned living conditions in many quarters unsafe and unsanitary.”There is a growing sentiment that the open web is a fundamentally dangerous place. Recent waves of hacked WordPress sites revealed exploited PHP vulnerabilities and affected dozens of well-known designers and bloggers like Chris Pearson. The tools used by those with malicious intent evolve just as quickly as the rest of the web. It’s deeply saddening to hear that, according to Jonathan Zittrain, some web users have stooped so low as to set up ‘Captcha sweatshops’ where (very) low-paid people are employed to solve Captcha security technology for malicious purposes all day. This is the part where I weep for the inherent sadness of mankind.“If we don’t do something about this,” says Jonathan Zittrain of the insecure web, “I see the end of much of the generative aspect of the technologies that we now take for granted.” Zittrain is a professor of Internet governance and regulation at Oxford University and the author of The Future of the Internet: and How to Stop It; watch his riveting Google Talk on these subjects.The Wild West: mainstream media’s favorite metaphor for today’s Internet The result of the Internet’s vulnerability is a generation of Internet-centric products — like the iPad, the Tivo and the XBOX — that are not easily modified by anyone except their vendors and their approved partners. These products do not allow unapproved third-party code (such as the kind that could be used to install a virus) to run on them, and are therefore more reliable than some areas of the web. Increased security often means restricted or censored content — and even worse — limited freedoms that could impede the style of innovation that propels the evolution of the Internet, and therefore, our digital future.The web of 2010 is a place where a 17 year-old high school student can have an idea for a website, program it in three days, and quickly turn it into a social networking craze used by millions (that student’s name is Andrey Ternovskiy and he invented Chatroulette). That’s innovation in a nutshell. It’s a charming story and a compelling use of the web’s creative freedoms. If the security risks of the Internet kill the ‘open web’ and turn your average web experience into one that is governed by Apple or another proprietary company, the Andrey Ternovskiys of the world may never get their chance to innovate.Security SolutionsWe champion innovation on the Internet and it’s going to require innovation to steer it in the right direction. Jonathan Zittrain says that he hopes we can come together on agreements for regulating the open web so that we don’t “feel that we have to lock down our technologies in order to save our future.”According to Vint Cerf, vice president and Chief Internet Evangelist at Google, “I think we’re going to end up looking for international agreements – maybe even treaties of some kind – in which certain classes of behavior are uniformly considered inappropriate.”Perhaps the future of the Internet involves social structures of web users who collaborate on solutions to online security issues. Perhaps companies like Google and Apple will team up with international governmental bodies to form an international online security council. Or maybe the innovative spirit of the web could mean that an independent, democratic group of digital security experts, designers, and programmers will form a grassroots-level organization that rises to prominence while fighting hackers, innovating on security technology, writing manifestos for online behavior, and setting an example through positive and supportive life online.Many people are fighting to ensure your ability to have your voice heard online — so use that voice to participate in the debate, stay informed, and demand a positive future. Concerned netizens and Smashing readers: unite!FreedomNet NeutralitySome believe that the fate of the Internet has been up for grabs ever since the federal government stopped enforcing ‘network neutrality’ rules in the mid-2000’s. In a nutshell, net neutrality means equality among the information that travels to your computer: everyone has the right to build a website that is just as public, affordable, and easily accessible as any other. However, some companies like phone and internet service providers are proposing ‘pay tiers’ (web service where you need to pay premium fees in order to allow visitors to access your site quickly). These tiers of web service could kill net neutrality by allowing those who can afford premium service (particularly large media companies who don’t like sharing their audience with your blog) greater access to consumers than the average web user.The debate over net neutrality reached a boiling point when Google and Verizon announced a ‘joint policy proposal for an open Internet’ on August 9th, 2010. Despite the proposal’s call for a “new, enforceable prohibition against discriminatory practices” amongst online content, many criticized it, citing leniency and loopholes.Net neutrality needs to be made law. If the Internet were to have a slow lane and a fast lane, your average web user could lose many of his or her freedoms and opportunities online, thereby shattering the core values that make the Internet so profoundly valuable to society. However, that’s just the tip of the iceberg for this thorny issue. To learn more, read the full proposal or watch the Bill Moyers episode ‘The Net @ Risk.’The World into the WebBrowser-based EverythingGoogle is developing a variety of applications and programs that exist entirely within the browser. Their PAC-MAN game was a preview of what’s to come because it allowed in-browser play of a simple, lightweight video game that required no downloads and relied on pure HTML, CSS, and Javascript. At the company’s 2010 I/O conference, Google laid out its plans to develop “rich multimedia applications that operate within the browser” (according to this New York Times report on the conference). The company plans to sell in-browser web applications like photo editing software (imagine using a Photoshop equivalent entirely within the browser) that it will sell in a web applications store called the Chrome Web Store.If our programs and applications are about to be folded into the browser, what will exist within the browser in ten years? Currency? Education? Consciousness? Personally, I’m hopeful that my browser will be able to produce piping hot cheeseburgers sometime soon.The Internet as a Collective ConsciousnessThe Internet is a medium, and philosopher Marshall McLuhan believed that all media are extensions of the human senses. The engine of our collective creative efforts is the force that’s causing the web to evolve more rapidly than any biological organism ever has.Transcendence is one of the great themes of human culture. Image of seated Buddha statue: The Metropolitan Museum of ArtThe Internet is an extension of the collective human mind and it’s evolving into a medium of transcendence. By constructing a place where the collective human consciousness is both centralized in one location (on your computer) and globally accessible (for those with the means to reach or use a computer, that is), our human spirit is transcending the human body. Way back in 1964, McLuhan himself wondered, “might not our current translation of our entire lives into the spiritual form of information seem to make of the entire globe, and of the human family, a single consciousness?”With the advent of trends including social media, ‘lifecasting,’ and ‘mindcasting,’ the Internet is being used as a real-time portal for the human consciousness. Perhaps those trends will be inverted by some web users of the future: instead of bringing offline life to the web (as so-called ‘lifecasters’ do when they stream live video of their attendance at an offline event), some web users will live their entire public lives online. Imagine a pop star who conducts her entire career online: every interview, live performance, music video or album release conducted solely through a browser window or mobile screen. Or a media theorist who exploited the platform of the web while discussing the theoretical ramifications of those actions. It’d be a great gimmick.The Web into the WorldThe ‘Web of Things’The ‘web of things’ or ‘Internet of things’ is a concept that will be a reality (at least in a rudimentary form) in the near future. The idea is that devices, appliances, and even your pets can all be tracked online. With Google Maps for iPhone, you can currently track your location on a digital map in relation to the streets and landmarks in your area. So it’s not hard to imagine a world where you can zoom in on your location and see detailed, 3D renderings of your surroundings: the cars on your block, the coffee machine in your kitchen, even Rover running around in your backyard! And it’s a good thing that you’re digitally tracking the location of poor Rover; he’s liable to hop the fence and make a run for it now that you’ve created a satellite computer out of everything you own (including his dog collar) by attaching a tracking device to it.AT&T is betting big on the web of things. According to this Reuters article, the phone service provider is investing in tracking devices that could be installed in cars, on dog collars, and on the pallets used to move large shipments of products. The dog collar, for example, “could send text messages or emails to the owner of a pet when it strays outside a certain area, or the device could allow continuous tracking of the pet.”Combine the concept of the ‘web of things’ with Second Life-style 3D imaging and you can imagine a web-based duplicate world — a virtual world that corresponds to the real one. But what are the implications of a world where every physical item has a corresponding digital existence online? Can we track the physical effects of climate change in the web of things? Will there be a digital avatar for every pelican carcass in the vicinity of the oil spill that’s devastating the Gulf of Mexico? It’s a tragic shame to develop a virtual world if we let the natural one go to waste in the meantime.Interactive LandscapesIt has been said that today’s science fiction is tomorrow’s reality. Unfortunately, most good science fiction stories are cautionary tales set in dystopian nightmares.QR codes on the façade of Japan’s N Building. Photo: GizmodoSimon Mainwaring reports on the N building in Japan, where “the whole building facade has been transformed into a real time dialogue between smart phones and what’s going on inside the store.” The exterior of the building is layered with QR codes (an alternate form of bar code) that can deliver real-time information to your phone. In Stephen Spielberg’s film Minority Report (adapted from a short story by mad genius Philip K. Dick), Gap ads came alive to hawk khakis to Tom Cruise. Looks like we’re about one step away from this scenario.Mr. Mainwaring imagines a future with “billboards that watch you shop and make targeted suggestions based on your age, location and past buying habits,” and “stores will effectively be turned inside out as dialogue and personalized interaction with customers begins outside the store.”The technology is cool, but it sounds like a pretty annoying future if you ask me. Who wants to be accosted by a holographic salesperson? The web grants us a great opportunity to use our collective voices to speak out on topics that matter to us. Because there are no regulations yet for much of this technology, it may be up to concerned citizens to make themselves heard if Internet-based technology is used in intrusive or abrasive ways.The ‘Innerweb’Cyborgs are among us already — humans whose physical abilities have been extended or altered by mechanical elements built into the body (people who live with pacemakers are one example). What will happen when the Internet becomes available on a device that is biologically installed in a human? What will the first internal user interfaces look like?Here’s one speculation.In the near future, we may be capable of installing the Internet directly into the user’s field of vision via a tiny computer chip implanted into the eye. Sound far-fetched? I doubt that it would sound far-fetched for Barbara Campbell, whose sight has been partially restored by a digital retinal implant (CNN reports on Barbara’s artificial retina).Ms. Campbell was blind for many years until she had a small microchip surgically implanted in her eye. A rudimentary image of Ms.Campbell’s surroundings is transmitted to the device, which stimulates cells in her retina, in turn transmitting a signal to her brain. It’s a miracle that the development of a bionic eye has begun to help the blind see.How else might doctors and scientists take advantage of the internal microchip? Perhaps the user’s vision will be augmented with an Internet-based interface with capabilities including geolocation or object identification. Imagine if technology like Google Goggles (a web-based application that identifies images from landmarks to book covers) was applied inside that interface. The act of seeing could not only be restored but augmented; a user might be capable of viewing a landscape while simultaneously identifying web-based information about it or even searching it for physical objects not visible to the naked eye. Apply the concept of augmented sight with the idea of the ‘web of things’ — an environment where physical objects have a corresponding presence on the web — and you can imagine a world where missing people are located, theft is dramatically reduced, the blind can see, and ’seeing’ itself means something more than it used to.If the web is an extension of our senses, it follows suit that the web may be capable of modifying those senses or even accelerating their evolution.The Crown Jewels“The next Bill Gates will be the deliverer of a highly technological solution to some of our climate change challenges.” — Lord Digby Jones of BirminghamIn preparation for this article, I considered a variety of wild ideas and fun speculations about the future. Could the Internet be used to solve the problem of climate change, generate tangible matter, or contact extraterrestrial life? Maybe those ideas sound like the stuff of imaginative fiction, but in a world where quantum teleportation has been achieved and researchers have created a living, synthetic cell, it almost seems as if the concept of science fiction is being eradicated while real technology brings our wildest fantasies to life. Here is the result of my most daring (absurd?) speculation.Time TravelThe functionality of the Internet relies on a linear series of events. Image: Eadweard MuybridgeI called on physics teacher Mark Stratil to answer my last burning question: could the Internet ever be capable of facilitating the development of time travel? Here’s Mark’s answer:“The Internet is still based on computers, which make linear calculations. Right now, all computers are based on binary code, which is a series of yes and no questions. You can make something that’s incredibly complex with a series of yes and no questions, but it takes a certain amount of time. The Internet still has to go through those calculations and it still physically has to make one calculation that will lead to the next calculation that will lead to the next. So no matter how fast we can get our computers – they’re making billions of calculations, trillions of calculations per second – there’s still going to be some lag time. They’re still limited by time in that way. They still need some time to make that conversation or that calculation.In that way, they’re kind of chained to time. Their whole existence is based on a linear sequence of things that happen. In order to create something else, something that goes outside of time, you would have to make it a non-linear system — something that that’s not based on a series of yes and no questions, because those have to be answered in a precise order. It would have to be some kind of system that was answering all the questions at once.”So Mark’s short answer to my fundamental question was basically that the Internet, in its current state, would not be capable of facilitating time travel. However, if the Internet was liberated from the linear structure of binary code and migrated onto an operating system that ‘answered all questions at once,’ then maybe it could have the potential to manipulate time or transcend the boundaries of time.Sounds unlikely at this point, but one of the Internet’s greatest capabilities is the opportunity to share and develop ideas like these!ConclusionResponsible EvolutionThrough technology, we hold the reins to our own evolution.For the first time in history, it might be said that there are moral implications in the act of evolution. The Internet is an extension of our senses and our minds, and its progress is propelled by our own creative and intellectual efforts. The future of the Internet will be shaped by millions of choices and decisions by people from all walks of life. Designers and programmers like us have the advantage of technical skill and specialized knowledge. Given the increasing presence of the Internet in our lives, our choices can have deep reverberations in human society.We’ll face small choices like what color to use for a button and larger choices like which platforms to endorse and which clients to support with our work. But the real questions form broad patterns behind every media trend and every mini technological revolution. Can we use technology to develop solutions to environmental problems — or will we abandon the natural world in favor of a digital one and the ‘web of things’? Have we fully considered what it means to merge biology and technology? And finally, do we really need a digital tracking device on our coffee machines?What a thrilling time to be alive! Let’s proceed with great enthusiasm and a commitment to designing a future that is meaningful, peaceful, and staggeringly exciting.Partial BibliographyNew York Times Magazine: “The Death of the Open Web”Simon Mainwaring: “The Future of Shopping: What Happens When Walls Start Talking”The Gutenberg Parenthesis: Parallels Between Pre-Printing Communication and the Digital EraNew York Times: “Google Pitches a Web-Centric Future”Google Talks: The Future of the InternetMoyers on America: ‘The Net @ Risk’ (Video)Pew Internet Research Poll: Future of the Internet IVGoogle I/O: The Web is Killing Radio, Newspapers, Magazines, and TV (TechChrunch reports)Related PostsYou may be interested in the following related posts:The Evolution of the LogoThe Dying Art Of DesignLessons From Swiss Style Graphic DesignArt Manifestos and Their Applications in Contemporary Design© Dan Redding for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: analysis, future, internet

  

  • Tags:
  • inspiration
  • Opinion column
  • analysis
  • future
  • internet

  August 11 2010, 4:25am | Comments »

• I posted to smashingmagazine.com

  Showcase Of Delicious Coffee Websites

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

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

  

  • Tags:
  • inspiration
  • showcases

  August 10 2010, 6:58am | Comments »

• I posted to smashingmagazine.com

  Beautiful Examples of Transparent Screen Trick Photos

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

    Two weeks ago we published a showcase of beautiful pinhole photography, and this weekend again we’ve got something unusual and creative to lift up your spirits and challenge your creativity. Illusions can be eye-catching and attractive and when you apply them to computer displays, the results can be quite interesting and deceptive.Take transparent screen trick photos, for example. The idea is simple: you take a photo of your surroundings and set this photo as your desktop wallpaper. Once the display is positioned precisely, the transparent screen trick is achieved. Simple, but what can you do with this simple idea?Below we present a short selection of some original transparent screen trick photos. The environments presented in these photos appear to have a completely transparent screen which creates an optical illusion. We also feature step-by-step-tutorials in the end of this post: and here you go — now you have something fun to do over the weekend![By the way: The network tab (on the top of the page) is updated several times a day. It features selected articles from the best web design blogs!]Transparent Screen Trick PhotosStrobist Lighting6/365 Clear ScreenUntitledPeon.masterFirst AttemptI WIN!!!! alternative 10/365Transparent screen 3Transparent screen. [177/365]ExperimentsTransparent Screen 6Transparent Screen 1Transparent Screen ExperimentTransparent Screen 5My Transparent Screen!Transparent screen 3Transparent Screentransparent screenTransparent ScreenTransparent Screen – Tristantransparent screenBeethovenTransparent screenTransparent iBookMy transparent screenTransparent Laptop ScreenTS-pc2Transparent Screen First TryTransparent TabletSee-thru laptops!Caffè a computerGrayscaleTransparent ScreeniPod touchTransparent Screen 2Added a laptopTransparent Screen LaptopTransparent laptopStanding on ChairKeithconroyPlay Desktop With Me?My transparent macbookPeon.masterTransparent Screen Tutorials and ResourcesJust for Fun – Transparent Laptop TutorialThis project involves taking three different pictures. The first two will be taken at the same time, and the last will be taken after some editing. It is very important that you do not move your computer or tripod during the whole process.Transparent TFT Screen TutorialLearn how to create a transparent looking tft screen by combine smart photographing with some easy photoshop tricks. You will need a camera tripod and of course a digital camera to do this.Transparent Screens Flickr GroupA huge and growing gallery of photos with the transparent screen trick effect.© Aquil Akhter for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: photography, photos

  

  • Tags:
  • inspiration
  • photography
  • photos

  August 7 2010, 10:52am | Comments »

• I posted to smashingmagazine.com

  The Showcase of Beautiful Pinhole Photography

  http://feedproxy.google.com/~r/SmashingMagazine/~3/YCm-pBdVfBE/

    Camera is a remarkable piece of innovation. However, it is people — professionals and newbies alike — who make it truly remarkable. It’s the photographer behind the camera. It’s their imagination, passion and talent and knowledge of the medium. You don’t need a high-end costly equipment to get beautiful results. Just your talent, a way of looking at different things and imagination is together more than enough for a great shot. It’s also the ability to envision the final result in your mind which is important.Pinhole camera is a simple home-made camera (toy camera) which only uses film or CCD sensor (more recently) enclosed in a fully opaque container and does not use any lenses or any kind of optical instruments. You can easily construct this camera yourself using things lying around like match boxes or any kind of boxes, paper, duct tape etc. The small amount of light passing through this pin sized hole produces image onto a photographic film or a CCD sensor.If you don’t want to get your hands dirty on creating a pin hole camera by yourself, you can use your DSLR with some modifications (replacing camera lenses with a pinhole). Also, pinhole cameras are available in the market: and they are quite popular, too — after all, you don’t have to worry about the focus and distortions as there are no lenses involved. Also, you might end up with lovely motion blurred photographs.In today’s weekend post we present beautiful and inspiring photographs shot using a pinhole camera. Please notice how photographers use the camera creatively to produce quite remarkable images. At the bottom of this post you will find links to some photographers and references to related resources to get you started. Also, we listed related Flickr pools which contain thousands of further examples of what can be achieved with this techniques. Get inspired, folks![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!]Beautiful Inspiring Pinhole Camera PhotographsTarquin CoatesTetsuyaThe calmness of blue by Andrew WatsonDaniel TückmantelInvader by TEIKOMackesonDanielle HughsonTea RoomA. WallisAn Oceanic Ghost Forest by Danielle HughsonZeb AndrewsMackesonDanielle HughsonScott VanderStouwTea RoomScott SpeckScott SpeckMackesonBruno MaleguegonebikingThe Iron Cycloid by Scott SpeckMatteo BagnoliThe Sleeping Zebra by Scott SpeckSarah KnopfFollow The Tunes by Tim FrancoBill Breslernhung dangDarren C.Scott SpeckTea RoomCeleste BrignacA. WallisDarren C.Zeb AndrewsKakkiKent MercurioMackesonSaraErikZeb AndrewsMichael C. Pasturmist-yZeb AndrewsTea RoomAlways de SunRemarkable PhotographersAnd here is a brief overview of some remarkable photographers from Flickr. These are some of great photographers that will come to your mind every time you think of pinhole photography. They have added a new demission to photography: their photostreams are full of beautiful photographs.Zeb AndrewsTea RoomScott SpeckFurther ResourcesThe Ultimate Guide to Create Your Own 35mm Pinhole Camera.Exposure Times for Pinhole PhotographyPhotography 101 – Light and the Pinhole Camera20 Strange Beautiful Pinhole CamerasTurn Your DSLR into a Pinhole CameraTurn Your Holga into a Pinhole CameraDIY: Pinhole Lego CameraDIY: Panoramic Pinhole CameraPinhole CalculatorFlickr Pool: PinholeFlickr Pool: Pinhole PhotographyFlickr Pool: Color Pinhole PhotographyFlickr Pool: Polaroid PinholeFlickr Pool: Pinhole Perspective© vailrodrigues for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: photography, pinhole

  

  • Tags:
  • inspiration
  • photography
  • pinhole

  July 25 2010, 7:36am | Comments »

• I posted to smashingmagazine.com

  Showcase of Sweet Chocolate Websites

  http://feedproxy.google.com/~r/SmashingMagazine/~3/0RQhha26d5w/

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

  

  • Tags:
  • inspiration
  • showcases
  • chocolate

  July 15 2010, 1:36am | Comments »

1 2 3 4 5 6 7 8 9 10

Popular Tags

• design
• inspiration
• Freebies
• coding
• Graphics
• downloads
• workflow
• free
• showcases
• Developers Toolbox
• How-To
• CSS
• photography
• wordpress
• Design Showcase
• icons
• wallpapers
• Events
• usability
• photoshop
• tools
• typography
• Tutorials
• useful
• mobile
• smashing
• Blog
• javascript
• navigation
• css3
• e-commerce
• Fonts
• techniques
• jquery
• Opinion column
• best of
• portfolios
• trends
• CMS
• Minimal
• themes
• Color
• php
• Forms
• Best of the Month
• movies
• clients
• illustration
• tables
• retro

Search