Most logos aren’t designed in fifteen minutes, but most designers aren’t Aaron Draplin. Aaron’s a Portland fixture by way of the Midwest, the owner of Draplin Design Co., and an advocate of “blue collar” design: design that works. Here he takes our logo design challenge, creating a dozen iterations of a logo for a fictional construction company. Not inspired? Just wait. Watch as he sketches, brings his ideas into Illustrator, and tests and tunes the different iterations. The logos Aaron creates prove design can elevate any company or brand. Along the way, he provides tips for freelancing, finding inspiration, and providing clients context for logos that won’t just live in PDFs.
Here we present an inspiring collection of interface designs for mobile devices, which we’re sure will give you some ideas. Enjoy!
THE BEST TALKS ON WEB DESIGN AND DEVELOPMENT FROM 2013
There is a recurring tendency among many web designers, developers, and agencies to get stuck in the occasional rut, become stagnant, and sometimes even lose perspective about the evolution and direction of web design today.
We believe it is absolutely fundamental to dedicate time to listening to the great visionaries of your chosen field who can help you see things from a different, innovative, and enriching viewpoint. These forward thinkers can help you attack projects with a renewed determination and encourage you to step out of your comfort zone – dive in head first to an unfamiliar sector, or experiment with the latest technology or programing language!
We have hand-picked 15 videos of the most important creative thinkers for today’s article which features the likes of Jeffrey Zeldman, Ethan Marcotte, Simon Collison, Shelly Bowen, or Bruce Lawson. We hope they can inspire you and give you a clutter-free vision of the current state of all-things web.
Content First by Jeffrey Zeldman – An Event Apart Boston: The rules of design engagement are changing. You may no longer be in control of the user’s visual experience. Learn the number one job of every web designer, how to persuade clients and bosses not to subject users to dark patterns, why the days of “Best Viewed With…” are finally behind us, and how a mobile (or small screen) strategy can help you improve your content, rethink your web experience, and put the user first.
Ethan Marcotte – The Map Is Not The Territory – Build Conference: When we create for the web, we participate in a kind of public art. We code, we design, we build for an audience, and our work feels successful when—if—it’s met with their delight. We shape digital experiences that provide a service, or that create joy, or that simply connect readers with words written half a world away. But in this session we?ll instead look at some ways in which our audience reshapes the way we think about our medium, and see where they might be leading us—and the web—next.
The Curious Properties of Intuitive Web Pages by Jared M. Spool – An Event Apart Boston: When a web page works, your users know exactly what to do. Everything makes sense, and they accomplish their goal, pleased with your site. Yet, often pages don’t work, and users get flustered and confused. It turns out that intuitive web pages abide by a set of curiously unintuitive properties. Watch Jared explain how to merge interaction design, visual design, information architecture, and other skills together to assemble web experiences that delight your users.
Simon Collison — Crafting the Progressive Web // Ready to Inspire’12: For many of us, the work we most value is imbued with a sense of craft, honesty, and purpose. We’re at our best when responses are instinctive, not bound by rigid tools or inflexible methodologies. Craftsmanship makes our work more meaningful to us, and more valuable to those who commission or consume it.
Shelly Bowen — How Content Strategy Makes Design Shine // Ready to Inspire’12 A cohesive, effective design depends on all the parts in play … including content. But content is often left until last, isn’t well thought-out or well crafted, and then may even compromise the integrity of the design and the business. Shelly Bowen will share 5 simple steps to integrate content strategy into your process to ensure all the parts stick together nicely (and your business goals are achieved).
RDO – Bruce Lawson: Bruce Lawson is a married, 40-something year old English graduate and web developer. He has lived in Turkey, Thailand, India, Bangladesh and Russia, but now lives in Birmingham, UK. Bruce works for Opera as an evangelist of Open web standards, based on his firm belief that the web is a revolutionary communication mechanism and should be available to all
Karen McGrane: Adapting Ourselves to Adaptive Content – An Event Apart: For years, we’ve been telling designers: the web is not print. You can’t have pixel-perfect layouts. You can’t determine how your site will look in every browser, on every platform, on every device. We taught designers to cede control, think in systems, embrace web standards. So why are we still letting content authors plan for where their content will “live” on a web page? Why do we give in when they demand a WYSIWYG text editor that works “just like Microsoft Word”? Worst of all, why do we waste time and money creating and recreating content instead of planning for content reuse? What worked for the desktop web simply won’t work for mobile. As our design and development processes evolve, our content workflow has to keep up. Learn how to adapt to creating more flexible content.
Jason Santa Maria – On Web Typography – Build Conference Achieving a thorough grasp of typography can take a lifetime, but moving beyond the basics is within your reach right now. In this talk, we’ll learn how to look at typefaces with a discerning eye, different approaches to typographic planning, how typography impacts the act of reading, and how to choose and combine appropriate typefaces from an aesthetic and technical point of view. Through an understanding of our design tools and how they relate to the web as a medium, we can empower ourselves to use type in meaningful and powerful ways.
Tim Brown — Universal Typography // Ready to Inspire’12The web is universal, so we should practice a typography that is equally universal. By focusing on traditional typographic principles, embracing progressive enhancement, and understanding how fonts, CSS, web-enabled devices, and user contexts coexist, we can reevaluate what it means to successfully set type — and inform the decisions we make about typefaces, font sizes, and white space. Let’s practice future-friendly, responsive typography.
Brad Frost — Death to Bullshit // Ready to Inspire’12More information exists now than ever before. 72 hours of video are uploaded to YouTube every minute. 10% of all photos ever taken were taken last year. 700,000 apps in the App Store. The list goes on. We’re being inundated with more information than ever, but there’s still only 24 hours in a day. With more stuff out there, people are forced to focus on what truly matters to them, and their tolerance of unnecessary noise is rapidly diminishing.
Tiffani Jones Brown – True Story – Build ConferenceWe are all storytellers. Everything we create—from opinionated tweets to designed products—says something about who we are. At their best, these stories help us relate and call us to great acts. At their worst, they reduce us to absolutes like “Top 10 ways to win” or “Here’s how to fail” when the truth is rarely so clear-cut.
Mandy Brown – The Cut – Build ConferenceTo edit is to cut: to remove, to shear away, to crumple up on the floor. We edit so that the message can get through, so that what we say is clear. It’s a necessary skill no matter the medium in which we work. Whether editing words or film or designs, a good edit requires the right combination of timing, compassion, and ruthlessness.
Luke Wroblewski – Mobile To The FutureWhen something new comes along, it’s common for us to react with what we already know. Radio programming on TV, print design on web pages, and now web page design on mobile devices. But every medium ultimately needs unique thinking and design to reach its true potential. Through an in-depth look at several common web interactions, Luke outlines how to adapt existing desktop design solutions for mobile devices and how to use mobile to expand what’s possible across all devices.
It’s a hot new technique in web design, but can backfire if overused. Check out these great examples of parallax scrolling done well…
With new technologies like HTML5 and CSS3, it’s becoming possible to create more advanced, interesting and remarkable effects in the browser. While these effects can be gimmicky, when employed in the right way they can result in a remarkable and memorable website.
One big web design trend of the moment is parallax scrolling, which involves the background moving at a slower rate to the foreground, creating a 3D effect as you scroll down the page. It can sometimes be overwhelming, but when used sparingly it can provide a nice, subtle element of depth.
To show how it should be done, we’ve collected together 25 sites that employ the technique to good effect. In some cases the parallax scrolling is the star of the show; in others it simply adds a touch of depth that makes the foreground seem to pop out a little. We hope you find this a useful source of inspiration for your next project, and if you come across any creative examples that we’ve not listed, we’d love to hear about them in the comments.
01. The Beast
Folk singer Laura Marling’s album, A Creature I Don’t Know, was given an accompanying website made by London agency Studio Juicewith illustrations by Shynola. It’s a site that self-scrolls as a poem is read out, while vivid illustrations and animations with parallax perspectives are revealed.
The site makes extensive use of new semantic elements and the data-* attributes used to trigger animations at specific audio cue points (such as scene changes, animation cues and so on) and also assigning control speeds and directions of the moving parallax elements.
02. The Lab
Alzheimer’s Research, the UK’s leading dementia research charity, aims to communicate information about dementia in an engaging way using its website The Lab.
From idea to treatment, users can scroll through two labs and a clinic, each of which is filled with pop-up information buttons. When clicked, new pages open with details on how scientists’ ideas are turned into reality and how this can make a difference for the thousands of people living with the disease.
Neo Mam Studios have come up with is beautifully designed and brilliantly executed infographic. An online experience built with HTML5 and CSS3, the challenge in building the infographic was to keep the CSS as simple as possible.
“The parallax scrolling effects were probably the most difficult to achieve,” says Neo Mam’s Danny Ashton. “Our developers looked at the available libraries and described them as a bit ‘wonky’, so they ended up creating their own instead.”
In most circumstances when you scroll, you’re scrolling to a different page. But on this agency’s website, each page has its own scrolling mechanism piece or element that makes everything extremely interesting. It’s a brilliant and fun approach to parallax design and proves that the technique continues to produce inventive results.
The people behind the Atlantis World’s Fair decided to make a website to explain its purpose and history. They used some parallax scrolling not as just a way to present information, but as a way to animate information and to tell their story. A fun and interesting approach to interactive information, this is a perfect example of parallax scrolling.
Renowned music website Pitchfork has gone above and beyond with its ‘Cover Stories’ series. Making its website look like a lovingly designed print magazine, the features include parallax scrolling, interactive interviews, video content and photography unlike any other.
Masterminded by Pitchfork’s creative director Michael Renaud, their interview with British newcomers Savages is the best yet. Moving portrait photography and video content by Se Young accompanies insightful text, whilst the music player provides the perfect soundtrack.
07. Green Man
Welsh festival Green Man unveiled a brand new website for this year’s shenanigans. The illustrations, colours and user experience combined make for a truly stunning parallax scrolling experience.
It was developed by the team at London based agency YCN Studio. Green Man approached them last Autumn, with an intention of giving their branding a good old revamp – everything from the website to the wristbands.
This wonderfully whimsical site from French interactive studio Soleil Noir was designed as a New Year’s card. It uses a simple set of coloured circles as the website navigation, along with some excellent parallax scrolling effects. Sometimes, it pays to be simple.
Eyewear retailer Oakley has triumphed with this website, crafted for the new Airbrake MX goggle,which combines a cool scrolling effect with striking photography that portrays the product beautifully.
10. Jason Kenny OBE
Earlier this year, Bristol-based agency Fiasco Design developed this beautiful website for Olympic English track cylist Jason Kenny. Co-founder of Fiasco Design Ben Steers says: “In response to the brief, we decided to create a single page, vertical scrolling site utilising a parallax scrolling technique.”
11. Every last drop
Animation studio Nice & Serious has created this parallax scrolling site to promote the problems of water conversion. Every last drop features a quirky little character, going about his daily tasks, through which the viewer is able to learn more about how water is wasted in our lives, often without us realising it.
Golden State of Mind was built by JUXT Interactive to showcase, “art, fashion and happenings live from California”. Creative director Jeff Whitney comments: “A custom scrollbar plug-in was found and rather heavily modified to allow for the infinite scrolling, and a lot of sweat and tears went into getting the reversed scrolling to work correctly.”
13. Living Word
When translation agency Living Word requested a re-energising digital relaunch, Tribe took to creating a site to stand apart from the rest. The solution was to develop a parallax effect capable of delivering a large amount of information while maintaining user interest. The idea was a brave one, but it works well, delivering a stunning, interactive and intuitive customer journey.
Streaming music app Spotify explains its features and benefits on a landing page that adds a subtle touch of parallax scrolling to its background images.
Design and development agency Madwell, based in New York, show off their portfolio with a range of parallax scrolling effects to create a noticeable 3D style that adds a huge amount of depth.
When it overhauled its design and logo, ecommerce giant eBay explained the new version of its site with a page that uses a subtle touch of parallax scrolling. The large background images remain in place while the content scrolls above it. While the effect isn’t tastefully overdone, it is definitely noticeable.
17. Von Dutch
The fashion label Von Dutch tells the story of its original founder by using parallax scrolling to add an element of movement. Icons and images move into and out of place as you scroll down the page, which makes the whole page seem more fluid.
Fannabee is a site designed for fans of music artists to help show off what they’ve collected. The concept is introduced using a page that keeps the visual focus front and centre, while the story is explained as you scroll down. Parallax scrolling is also used subtly with the icons in the background, as the icons in the foreground move faster than those in the background to add a level of depth.
19. Peugeot Hybrid4
Peugeot has gone all out with using parallax scrolling to create an auto-playing comic in the browser. The comic plays as you scroll down the page (or use their autoplay feature which automatically scrolls) and helps to advertise the car manufacturer’s new HYbrid4 technology.
Arts consultancy Cultural Solutions employs a subtle parallax scrolling effect to introduce depth to its homepage. Their main brand image is the use of colourful circles – the circles in the background move slower than those in the foreground, creating a subtle 3D effect.
The website for the 2012 jQuery conference made use of a touch of parallax scrolling in order to add some animation to the design. It’s the smaller, subtle effects that make the page seem more fluid, such as the logo and date becoming smaller after you scroll down. The scrolling also triggers animations – like the bicycle that starts to drift off to the right, and the flock of seagulls frantically chasing a shark – which add some personality to the page.
Creative agency Shape uses parallax scrolling to help explain their design process. The animation describes the flow of how they work perfectly, and adds a nice visual touch.
To help show off the launch of Mario Kart on the Wii, videogames maker Nintendo launched a page that used parallax scrolling heavily to take the visitor on a journey through the history of the game. The style of the site follows the style of the game itself, by taking you along a road lined with characters from the game.
24. Activate Drinks
Activate Drinks is a company that provides drinks with added vitamins. To help tell its story and explain its their approach is different, it’s added an element of 3D by placing bubbles in the background, middle ground and foreground. As these layers move at different speeds, the 3D effect is formed as you scroll down the page.
To display the timeline of the war in Iraq, the White House used parallax scrolling to tastefully add something unique. While the content scrolls as normal, the emotional background images remain static – which help them to stand out further.
Flat design – the design community just can’t stop talking about it.
And feelings are strong. Most designers either can’t get enough of this trend, or absolutely hate it.
I am somewhere in the middle. Good design is about creating something useful that works. If the answer is designed in the fashion of flatness, so be it. But the trend may not work for all projects, so it should not be forced.
So let’s examine what makes something flat. There are five pretty distinct characteristics. Here’s a look at each, plus an introduction to “almost” flat design.
No Added Effects
Flat design gets its name from the shapes used. Flat design employs a distinct two-dimensional style that is simply flat.
The concept works without embellishment – drop shadows, bevels, embossing, gradients or other tools that add depth. Every element or box, from image frames to buttons to navigational tools, is crisp and lacks feathered edges or shadows.
Nothing is added to make elements look more realistic, such as tricks designed to make items appear 3D in skeuomorphic design projects. Layers used in flat design mirror those in other projects, but the planes do not intersect leaving a distinct background image, foreground images or buttons, text and navigation.
So what makes it work? Flat design has a distinct look and feel without all the extras. It relies on a clear sense of hierarchy in the design and placement of elements to make successful projects easy for users to understand and interact with. While more and more websites are using flat design principles, it is maybe even more popular for app and mobile design. With small screens, there are fewer buttons and options, making a flat interface fairly easy to use.
Flat design uses many simple user interface elements, such as buttons and icons. Designers often stick to simple shapes, such as rectangles, circles or squares and allow each shape to stand alone. Shape edges can be perfectly angular and square or include curvature.
Each UI element should be simple and easy to click or tap. Interaction should be intuitive for users without a lot of in-design explanation.
In addition to simple styling, go bold with color on clickable buttons to encourage use. But don’t confuse simple elements with simple design, flat design concepts can be just as complex as any other type of design scheme.
Need help getting started? Designmodo offers a variety of UI kits using flat styles – from the Square UI Free and Flat UI Free, a simple PSD/HTML UI kit with basic components, to Square UI and Flat UI Pro, a complete PSD/HTML UI pack for website and app design projects.
Focus on Typography
Because of the simple nature of element in flat design, typography is extremely important.
The tone of typefaces should match the overall design scheme – a highly embellished font might look odd against a super-simple design. Type should also be bold and worded simply and efficiently, in an effort for the final product to have a consistent tone visually and textually.
Consider a simple sans serif type family with plenty of variations and weights for the primary typography on a site using flat design. Add a touch of the unexpected with one novelty font as an art element, but be careful not to go overboard with use of the specialty typeface.
Type should also tell users how to use the design. Label buttons and other elements for increased ease of use and interactivity.
Focus on Color
Color is a large part of flat design. Flat design color palettes are often much brighter and more colorful than those for other sites.
Color palettes for flat design projects often contain many more hues as well. While most color palettes focus on two or three colors at most, flat design palettes may use six to eight colors equally.
The hues tend to be vibrant – think about the purest colors from the color wheel – without tints or tones. Primary and secondary colors are popular. In addition certain types of colors are also used frequently; in this iteration of the flat design trend, retro colors – including salmon, purple, green and blue – are especially popular.
Flat design is simple by nature and works well with an overall minimalist design approach.
Avoid too many bells and whistles in the overall site design. Simple color and text may be enough. If you want to add visuals, opt for simple photography.
Some retail sites, such as Svpply (above), using flat design have done a good job placing items on a simple background to do this. (It should be noted that the photos do have some natural depth but still fit into the overall flatness of the design.)
“Almost” Flat Design
A style more designers tend to agree on is “almost” flat design.
In almost flat design, the basic theme of the flat style is used but some effects are added to the design scheme. Buttons, for example, may contain slight gradients or drop shadows. Designers typically pick one effect and use it exclusively in an almost flat project.
This style allows for a little more flexibility than some of the rigidness of the no effects thought behind flat design.
Designers like it because of the added depth and texture. Users like it because the style is a little less sharp and can help guide proper interaction. On the flip side, designers don’t like it because it marries two styles in a way that can lack definition of a true style.