From one website in 1991 to over 1 billion websites in 2014, the Internet is continuing to evolve at an exponential pace. Now more than ever, a brand’s website needs to be visually compelling while simultaneously remaining functional across a wide variety of devices. However, accomplishing this task is no easy feat. What are the key design principles and elements found in the websites seen below?
After reading the article below, take the time to explore each of the websites and discuss the elements of effective web design. What are some of the common design elements that you can pinpoint in the sites below? What makes a website effective? Why does design matter from a business perspective?
- Web design
- Digital Arts
- Design theory and principles
From one website in 1991 to over 1 billion websites in 2014, the Internet is continuing to evolve at an exponential pace. Now more than ever, a brand’s website needs to be visually compelling while simultaneously remaining functional across a wide variety of devices. However, accomplishing this task is no easy feat.
Today we want to showcase some of our favorite websites that successfully bring together this marriage of form and function, all of which are “Website of the Day” Awwward winners. Awwwards is a site that acknowledges the talent and effort of the best web designers, developers and agencies in the world– a great resource for web design inspiration.
Scroll down to check out some of our recent favorite designs! Some web design trends to keep in mind while browsing these include: responsive design, scrolling parallex effects, pop-up menus/navigation, and the use of large imagery.
Note: The websites below are not listed in anything resembling a ranking order.
Responsive design– Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing and interaction experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).
Scrolling Parallex Effect – 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.
Pop-up Window– A window that suddenly appears (pops up) when you select an option with a mouse or press a special function key when browsing a website.
Navigation Bar– A navigation bar is a user interface element within a webpage that contains links to other sections of the website. In most cases, the navigation bar is part of the main website template, which means it is displayed on most, if not all, pages within the website. This means that no matter what page you are viewing, you can use the navigation bar to visit other sections of the website.
“New fully responsive website for Stupid Studios, showcasing their in-depth case studies, manifesto in a laid back tone of voice. All wrapped in color and playful illustrations.” (View Website)
Website designed by Green Chameleon. “We created a unique portfolio style website that truly echoes the superb quality of the Sassi Holford dresses by implementing stylish page loading and subtle interactions.” (View Website)
La Haute Société
“La Haute Société is a digital strategy consulting agency, which celebrates its 10th anniversary in 2015. The new website mixes html5/webGL technology and powerful storytelling.” (View Website)
Website designed by Robinizers. (View Website)
Nixon eCommerce Platform
Website designed by BASIC, a branding and digital design agency. “The new Nixon.com is a globally adaptive and responsive platform that is commerce-led and culture driven. The site now features multiple paths to purchase, leveraging recommendation engines that enable customized content for each individual user and interactions that bring delight, much like the details found in their watches.” (View Website)
“We create joyful digital experiences and unique visual identities that tickle the brain, please the eyes and connect the hearts of brands to the hearts of their consumers.” (View Website)
Giant Steps Medias
Website design by Akaru (France). “Visual & audio experiment for the portfolio of an original music composer studio based in Lyon, France.” (View Website)
Relax, We Are The Good Guys
Website and identity for digital creative agency Relax, We Are The Good Guys. (View Website)
Reebok: Be More Human
Website by welikesmall and Venables Bell & Partners. “An online destination where fitness enthusiasts can challenge and define what it is to be human. This one-of-a-kind platform features a number of interactive tools and experiences.” (View Website)
Spotify: Year in Music
“The Spotify Year in Music wasn’t written by the critics or dictated by sales – instead it was the first time the world listened to the listeners.” Website by Razorfish. (View Website)
Start college and kickstart your career in graphic design.
FIDM/Fashion Institute of Design & Merchandising isn’t just a recognized leader in the study of design and creative business– we’re a training ground for the exciting career in graphic design you’ve always dreamed of pursuing. No other graphic design program has the same unique focus on the fashion and entertainment industries, teaching creative expression in all aspects of print media, logo development, corporate identity, product branding, packaging, apparel graphics and more.
Creative careers begin here.
With four California campuses located in the heart of the fashion and entertainment industries, FIDM is a leading, accredited college offering specialized Associate of Arts and Bachelor’s of Arts degrees. FIDM has been educating students with creative and leadership skills for the global industries of fashion, visual arts, interior design, and entertainment for more than 45 years. Learn more at www.fidm.edu.
The FIDM Digital Arts Blog is dedicated to professional and aspiring graphic designers and filmmakers, illustrating the range of career opportunities within these fields written by FIDM/Fashion Institute of Design & Merchandising. See more at www.fidmdigitalarts.com.