Classroom Discussion: What Design Elements Make Great Websites? We Analyze 10 Stunning, Award-Winning Sites

ic_create_black_48dp

Summary

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?

ic_sms_black_24dp

Classroom Discussion

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?

Relevant Topics

  • Web design
  • Digital Arts
  • Design theory and principles
  • Business/marketing

 

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.

Vocabulary Terms

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.

Stupid Studios

“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)

 

Stupid Studios - Web Design Inspiration

 

Stupid Studios - Web Design Inspiration

 

Sassi Holford

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)

Sassi Holford - Website Design Inspiration

 

Sassi Holford - Website Design Inspiration

 

Sassi Holford - Website Design Inspiration

 

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)

 

La Haute Société  - Website Design Inspiration

 

The Marmalade

Website designed by Robinizers. (View Website)

 

The Marmalade - Website Design Inspiration

 

The Marmalade - Website Design Inspiration

 

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)

 

Nixon Watches - Web Design Inspiration

 

Nixon Watches - Web Design Inspiration

 

Hello Monday

“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)

 

Hello Monday - Website Design Inspiration

 

Hello Monday - Website Design Inspiration

 

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)

 

Giant Steps Medias - Website Design Inspiration 2015

 

Giant Steps Medias - Website Design Inspiration 2015

 

Relax, We Are The Good Guys

Website and identity for digital creative agency Relax, We Are The Good Guys. (View Website)

 

Relax We Are The Good Guys - Website Inspiration 2015

 

Relax We Are The Good Guys - Website Inspiration 2015

 

Relax We Are The Good Guys - Website Inspiration 2015

 

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)

 

Reebok Be More Human - Web Design Inspiration

 

Reebok Be More Human - Web Design Inspiration

 

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)

 

Spotify Year in Music 2014 - Web Design Inspiration

 

Spotify Year in Music 2014 - Web Design Inspiration

 

graphic-design-branding-rocketStart 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.

GET-STARTED-BUTTON

FIDM: Creative Careers Begin Here

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.

Related Posts Plugin for WordPress, Blogger...

Author: Mani O'Brien

Mani O’Brien is the Online Editor for the FIDMDigitalArts Blog and the Social Media Marketing Manager for FIDM/Fashion Institute of Design & Merchandising. She earned her bachelor of arts degree in print journalism from the Walter Cronkite School of Journalism & Mass Communications at Arizona State University in 2006, and Associate of Arts degree in Graphic Design (Professional Designation) at FIDM in 2010. When she’s not brainstorming social media marketing ideas or writing about the graphic design and digital media, she enjoys practicing yoga, reading magazines, and hanging out with friends and family in Los Angeles.

Share This Post On

Pin It on Pinterest