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...
MOBILE FIRST
Mobile website usage has been escalating in
popularity surpassing desktop computers as
the main internet usage device.
Wit...
What is Mobile First?
•  Mobile First is the idea that websites should
be designed with mobile in mind first.
•  It's desi...
MOBILE FIRST
It’s important that you have a
mobile-friendly, responsive, intuitive website.
MOBILITY IS
GROWING IN
POPULAR...
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 Desi...
MOBILE FIRST
Each device has a
different screen
resolution, the
content of the
website needs to
be able to scale
down to
a...
MOBILE FIRST
The elements of
the website need to
be designed to
rearrange in the
proper order when
being scaled by
differe...
MOBILE FIRST
Important elements that
could be included on the
homepage of your
website:
1.  Logo or Headline
2.  Search an...
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
scr...
ABOVE VS. BELOW THE FOLD
Where is “The Fold”
•  The standard fold is
around 600 pixels in
height
•  The fold then became
y...
ABOVE VS. BELOW THE FOLD
The Numbers
•  91% of pages view
are long enough to
contain scroll bars
•  76% of pages are
scrol...
Professional Design Tip!
How to handle “The Fold” today?
There is NO Fold…
so don’t worry about it
ABOVE VS. BELOW THE FOLD
Recommendations for A Foldless World
•  Minimize written text and maximize images
•  Encourage sc...
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 ...
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
littl...
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...
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 PRACT...
Professional Design Tip!
Whenever possible, try to make your
wider column slightly longer than the
narrower one. This will...
Using Photos to Your Advantage:
– Photos can add interest to your page
– Photos can help balance the layout of content
CON...
Use the best quality
photos you can
Don’t use photos that are
too blurry, dark or grainy
Basic Rules: Choosing Good Photos...
Use photography of all different subjects throughout
your site. (Students at work, students at play,
athletics, buildings,...
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 somethin...
CONTENT LAYOUT BEST PRACTICES
Crop your photos creatively
Consider extreme proportions
Try Black & White photography
Ways ...
WEB DESIGN
MOVING FORWARD
Website Design Ideas for the Future:
– Minimalist landing pages
– Simple grid systems
– Social media a MUST
WEB DESIGN MOV...
A minimal
Landing Page
The purpose is to
organize content
and display multiple
content categories'
for visitors to find
in...
Think about your landing page as a
visual table of contents
WEB DESIGN MOVING FORWARD
Professional Design Tip!
Try to make your website pages as
minimal as possible: omit needless
content, subtract until it b...
OnMessage grid systems
•  Our grid system is based off of a 24 column
grid with a 15 pixel wide gutter.
–  Within this sys...
A grid system
•  Grids aren’t necessarily minimalist by nature,
but simple ones can bring order to a website
design.
–  Th...
Grid based Design Examples
WEB DESIGN MOVING FORWARD
Social Media
and YOUR
School Site
– that can make
you nervous!!!
WEB DESIGN MOVING FORWARD
BUT… We live in the digital wor...
Why is social media important to include
•  Provide content-rich exchange though Twitter
chat and Facebook groups between ...
Professional Design Tip!
Include only social media you maintain
and keep updated and active.
Display your
Social Media
Badges
Marketing is one of
the ultimate
determining factors in
school website’s
success or failu...
Current Design Trends
Upcoming SlideShare
Loading in …5
×

Current Design Trends

384 views

Published on

Presenters: Natalie Curtiss, Russ Renshaw, Mike Villars, and Michelle Vaira

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
384
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Current Design Trends

  1. 1. Current Design Trends By: Natalie Curtiss, Russ Renshaw, Mike Villars, Michelle Vaira
  2. 2. 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
  3. 3. MOBILE FIRST
  4. 4. 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
  5. 5. 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
  6. 6. MOBILE FIRST It’s important that you have a mobile-friendly, responsive, intuitive website. MOBILITY IS GROWING IN POPULARITY DESKTOP USAGE IS DECREASING
  7. 7. MOBILE FIRST Modern websites should be designed to scale down to fit each device’s screen size accordingly.
  8. 8. Professional Design Tip! The ability for websites to scale to a specific device and screen size is called “Responsive Design”.
  9. 9. 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.
  10. 10. 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.
  11. 11. 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
  12. 12. ABOVE VS. BELOW “THE FOLD”
  13. 13. 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
  14. 14. 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).
  15. 15. 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
  16. 16. Professional Design Tip! How to handle “The Fold” today? There is NO Fold… so don’t worry about it
  17. 17. 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
  18. 18. ABOVE VS. BELOW THE FOLD
  19. 19. CONTENT LAYOUT BEST PRACTICES
  20. 20. 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
  21. 21. CONTENT LAYOUT BEST PRACTICES Problem TOO LITTLE CONTENT
  22. 22. Solution Try larger photos. CONTENT LAYOUT BEST PRACTICES
  23. 23. Solution Try multiple photos. CONTENT LAYOUT BEST PRACTICES
  24. 24. Solution Consider Using Quote or Call-Out Text. CONTENT LAYOUT BEST PRACTICES
  25. 25. Solution Combine content from other pages, onto one page. CONTENT LAYOUT BEST PRACTICES
  26. 26. CONTENT LAYOUT BEST PRACTICES Problem TOO MUCH CONTENT
  27. 27. Solution Consider using the area below the left-hand navigation. CONTENT LAYOUT BEST PRACTICES
  28. 28. Solution Try moving some of the content to other pages. CONTENT LAYOUT BEST PRACTICES
  29. 29. 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.
  30. 30. CONTENT LAYOUT BEST PRACTICES Problem PAGE LOOKS TOO BUSY
  31. 31. Solution Try a combination of bolder and simpler content channel designs. CONTENT LAYOUT BEST PRACTICES
  32. 32. Solution Only place some of the content inside content channels And keep some of it out. CONTENT LAYOUT BEST PRACTICES
  33. 33. 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.
  34. 34. CONTENT LAYOUT BEST PRACTICES Problem UNBALANCED PAGES
  35. 35. Solution Use larger photos to fill the space. CONTENT LAYOUT BEST PRACTICES
  36. 36. Solution Use multiple photos to fill the space. CONTENT LAYOUT BEST PRACTICES
  37. 37. Solution Change the width of your columns and try moving content to different areas of the page. CONTENT LAYOUT BEST PRACTICES
  38. 38. 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.
  39. 39. Using Photos to Your Advantage: – Photos can add interest to your page – Photos can help balance the layout of content CONTENT LAYOUT BEST PRACTICES
  40. 40. 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
  41. 41. Use photography of all different subjects throughout your site. (Students at work, students at play, athletics, buildings, etc.) CONTENT LAYOUT BEST PRACTICES
  42. 42. Try a combination of close-up, far away, group and single-person shots for variety. CONTENT LAYOUT BEST PRACTICES
  43. 43. Student artwork can be a good way of decorating your pages CONTENT LAYOUT BEST PRACTICES
  44. 44. 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
  45. 45. CONTENT LAYOUT BEST PRACTICES Crop your photos creatively Consider extreme proportions Try Black & White photography Ways To Make Your Photography Choices More Interesting
  46. 46. WEB DESIGN MOVING FORWARD
  47. 47. Website Design Ideas for the Future: – Minimalist landing pages – Simple grid systems – Social media a MUST WEB DESIGN MOVING FORWARD
  48. 48. 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
  49. 49. Think about your landing page as a visual table of contents WEB DESIGN MOVING FORWARD
  50. 50. 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.
  51. 51. 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
  52. 52. 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
  53. 53. Grid based Design Examples WEB DESIGN MOVING FORWARD
  54. 54. 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.
  55. 55. 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
  56. 56. Professional Design Tip! Include only social media you maintain and keep updated and active.
  57. 57. 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

×