Current Design Trends

Current Design Trends By: Natalie Curtiss, Russ Renshaw, Mike Villars, Michelle Vaira

1. Mobile First & Responsiveness 2. Above vs. Below the Fold 3. Content Layout Best Practices 4. Web Design Moving Forward

Current Design Trends Discussion Topics

Click to add title

MOBILE FIRST

Click to add title

Mobile website usage has been escalating in popularity surpassing desktop computers as the main internet usage device. With the popularity of smart phones, it’s more important now than ever to have a modern, sleek mobile website.

MOBILE FIRST

What is Mobile First? •  Mobile First is the idea that websites should

be designed with mobile in mind first. •  It's designing for mobile first, then designing

for PC/Desktop. •  In other words, your website should look as

great on your iPhone as it does on your laptop.

MOBILE FIRST

MOBILE FIRST

It’s important that you have a mobile-friendly, responsive, intuitive website.

MOBILITY IS GROWING IN POPULARITY

DESKTOP USAGE IS

DECREASING

Click to add title

MOBILE FIRST

Modern websites should be designed to scale down to fit each device’s screen size accordingly.

Professional Design Tip! The ability for websites to scale to a specific device and screen size is called “Responsive Design”.

Click to add title

MOBILE FIRST

Each device has a different screen resolution, the content of the website needs to be able to scale down to accommodate each device’s specific resolution.

Click to add title

MOBILE FIRST

The elements of the website need to be designed to rearrange in the proper order when being scaled by different devices. You do not want to have to scroll through pages of content to find key information.

MOBILE FIRST

Important elements that could be included on the homepage of your website:

1.  Logo or Headline 2.  Search and Omni Navigation 3.  Main Navigation Menu 4.  A Large Banner or Welcome

Photo 5.  Sub Header 6.  Content Blurbs - An area to

provide key points of important information (ex. News or Events)

7.  Social Media Icons 8.  Quick Links 9.  Address 10. SiteMap

ABOVE VS. BELOW “THE FOLD”

ABOVE VS. BELOW THE FOLD

•  The idea of “The

Fold” started at the dawn of the browser age. ~1993

•  Before the idea of

scrolling was common, or even known about.

The Origin Story of a Web Design Supervillain

Click to add title

ABOVE VS. BELOW THE FOLD

Where is “The Fold” •  The standard fold is

around 600 pixels in height

•  The fold then became your screen height minus 170-200 pixels

•  Today the fold location cannot be standardized to the varying sizes of all screens (desktops, tablets, and mobile).

Click to add title

ABOVE VS. BELOW THE FOLD

The Numbers •  91% of pages view

are long enough to contain scroll bars

•  76% of pages are scrolled to some extent

•  22% of pages are scrolled to the very bottom

Click to add title

Professional Design Tip! How to handle “The Fold” today? There is NO Fold… so don’t worry about it

Click to add title

ABOVE VS. BELOW THE FOLD

Recommendations for A Foldless World •  Minimize written text and maximize images •  Encourage scrolling by using a cut-off layout •  Divide your homepage into sections for easier

scanning

Click to add title

ABOVE VS. BELOW THE FOLD

CONTENT LAYOUT BEST PRACTICES

Website Pages Look Best: – When content is balanced – When there is not too much or too little content – When the overall look is not too busy

CONTENT LAYOUT BEST PRACTICES

CONTENT LAYOUT BEST PRACTICES

Problem TOO LITTLE CONTENT

Solution Try larger photos.

CONTENT LAYOUT BEST PRACTICES

Solution Try multiple photos.

CONTENT LAYOUT BEST PRACTICES

Solution Consider Using Quote or Call-Out Text.

CONTENT LAYOUT BEST PRACTICES

Solution Combine content from other pages, onto one page.

CONTENT LAYOUT BEST PRACTICES

CONTENT LAYOUT BEST PRACTICES

Problem TOO MUCH CONTENT

Solution Consider using the area below the left-hand navigation.

CONTENT LAYOUT BEST PRACTICES

Solution Try moving some of the content to other pages.

CONTENT LAYOUT BEST PRACTICES

Professional Design Tip! Think about ways to condense the amount of content per page. The average page visit lasts a little less than a minute, so make sure your writing is clear and focused.

CONTENT LAYOUT BEST PRACTICES

Problem PAGE LOOKS TOO BUSY

Solution Try a combination of bolder and simpler content channel designs.

CONTENT LAYOUT BEST PRACTICES

Solution Only place some of the content inside content channels And keep some of it out.

CONTENT LAYOUT BEST PRACTICES

Professional Design Tip! OnMessage will allow you to create your own content channels. If all of your content channels are bright, bold colors, try creating a few new ones with lighter or neutral colors for contrast.

CONTENT LAYOUT BEST PRACTICES

Problem UNBALANCED PAGES

Solution Use larger photos to fill the space.

CONTENT LAYOUT BEST PRACTICES

Solution Use multiple photos to fill the space.

CONTENT LAYOUT BEST PRACTICES

Solution Change the width of your columns and try moving content to different areas of the page.

CONTENT LAYOUT BEST PRACTICES

Professional Design Tip! Whenever possible, try to make your wider column slightly longer than the narrower one. This will help the content reformat better on smaller devices.

Using Photos to Your Advantage: – Photos can add interest to your page – Photos can help balance the layout of content

CONTENT LAYOUT BEST PRACTICES

Use the best quality photos you can

Don’t use photos that are too blurry, dark or grainy

Basic Rules: Choosing Good Photos

CONTENT LAYOUT BEST PRACTICES

Use photography of all different subjects throughout

your site. (Students at work, students at play, athletics, buildings, etc.)

CONTENT LAYOUT BEST PRACTICES

Try a combination of close-up, far away, group and single-person shots for variety.

CONTENT LAYOUT BEST PRACTICES

Student artwork can be a good way of decorating your pages

CONTENT LAYOUT BEST PRACTICES

Having a photo shoot? Talk to your photographer about taking shots on a white background or extreme close-ups for something a little different.

CONTENT LAYOUT BEST PRACTICES

CONTENT LAYOUT BEST PRACTICES

Crop your photos creatively Consider extreme proportions

Try Black & White photography

Ways To Make Your Photography Choices More Interesting

WEB DESIGN MOVING FORWARD

Website Design Ideas for the Future: – Minimalist landing pages – Simple grid systems – Social media a MUST

WEB DESIGN MOVING FORWARD

Click to add title

A minimal Landing Page The purpose is to organize content and display multiple content categories' for visitors to find information easily and direct them to specific places in the website.

WEB DESIGN MOVING FORWARD

Think about your landing page as a visual table of contents

WEB DESIGN MOVING FORWARD

Click to add title

Professional Design Tip! Try to make your website pages as minimal as possible: omit needless content, subtract until it breaks, and remember white space is vital.

Click to add title

OnMessage grid systems •  Our grid system is based off of a 24 column

grid with a 15 pixel wide gutter. – Within this system we have the opportunity to

rearrange and adjust the page layouts in various configurations to accommodate for different kinds of content

– The grid helps to reflow the content for different browser sizes

WEB DESIGN MOVING FORWARD

Click to add title

A grid system •  Grids aren’t necessarily minimalist by nature,

but simple ones can bring order to a website design. – The grid makes sense for organizing equally

sized images without adding complexity. – A traditional grid design has plenty of white space

to keep things looking minimal. – A simple-looking grid needs careful thought

WEB DESIGN MOVING FORWARD

Grid based Design Examples

WEB DESIGN MOVING FORWARD

Click to add title

Social Media and YOUR School Site – that can make you nervous!!!

WEB DESIGN MOVING FORWARD

BUT… We live in the digital world. And when students and parents enter your schools, they DO NOT check their lives at the door.

Click to add title

Why is social media important to include •  Provide content-rich exchange though Twitter

chat and Facebook groups between faculty, parents and students.

•  Encouraging whole schools to celebrate successes, grieve our losses, and sometimes even challenge us to do better

WEB DESIGN MOVING FORWARD

Click to add title

Professional Design Tip! Include only social media you maintain and keep updated and active.

Click to add title

Display your Social Media Badges Marketing is one of the ultimate determining factors in school website’s success or failure. Add social media badges in plain site

WEB DESIGN MOVING FORWARD