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

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

3. 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

4. MOBILE FIRST

5. 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

6. 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

7. MOBILE FIRST
It’s important that you have a
mobile-friendly, responsive, intuitive website.
MOBILITY IS
GROWING IN
POPULARITY
DESKTOP
USAGE IS
DECREASING

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

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

10. 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.

11. 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.

12. 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

13. ABOVE VS. BELOW
“THE FOLD”

14. 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

15. 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).

16. 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

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

18. 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

19. ABOVE VS. BELOW THE FOLD

20. CONTENT LAYOUT
BEST PRACTICES

21. 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

22. CONTENT LAYOUT BEST PRACTICES
Problem
TOO LITTLE
CONTENT

23. Solution
Try larger photos.
CONTENT LAYOUT BEST PRACTICES

24. Solution
Try multiple photos.
CONTENT LAYOUT BEST PRACTICES

25. Solution
Consider Using
Quote or Call-Out
Text.
CONTENT LAYOUT BEST PRACTICES

26. Solution
Combine content
from other pages,
onto one page.
CONTENT LAYOUT BEST PRACTICES

27. CONTENT LAYOUT BEST PRACTICES
Problem
TOO MUCH
CONTENT

28. Solution
Consider using
the area below
the left-hand
navigation.
CONTENT LAYOUT BEST PRACTICES

29. Solution
Try moving some
of the content to
other pages.
CONTENT LAYOUT BEST PRACTICES

30. 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.

31. CONTENT LAYOUT BEST PRACTICES
Problem
PAGE LOOKS
TOO BUSY

32. Solution
Try a combination
of bolder and
simpler content
channel designs.
CONTENT LAYOUT BEST PRACTICES

33. Solution
Only place some of
the content inside
content channels
And keep some
of it out.
CONTENT LAYOUT BEST PRACTICES

34. 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.

35. CONTENT LAYOUT BEST PRACTICES
Problem
UNBALANCED
PAGES

36. Solution
Use larger photos
to fill the space.
CONTENT LAYOUT BEST PRACTICES

37. Solution
Use multiple
photos to fill the
space.
CONTENT LAYOUT BEST PRACTICES

38. Solution
Change the width of
your columns and
try moving content
to different areas of
the page.
CONTENT LAYOUT BEST PRACTICES

39. 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.

40. Using Photos to Your Advantage:
– Photos can add interest to your page
– Photos can help balance the layout of content
CONTENT LAYOUT BEST PRACTICES

41. 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

42. Use photography of all different subjects throughout
your site. (Students at work, students at play,
athletics, buildings, etc.)
CONTENT LAYOUT BEST PRACTICES

43. Try a combination of close-up, far away, group and
single-person shots for variety.
CONTENT LAYOUT BEST PRACTICES

44. Student artwork can be a good way of decorating
your pages
CONTENT LAYOUT BEST PRACTICES

45. 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

46. CONTENT LAYOUT BEST PRACTICES
Crop your photos creatively
Consider extreme proportions
Try Black & White photography
Ways To Make Your Photography Choices
More Interesting

47. WEB DESIGN
MOVING FORWARD

48. Website Design Ideas for the Future:
– Minimalist landing pages
– Simple grid systems
– Social media a MUST
WEB DESIGN MOVING FORWARD

49. 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

50. Think about your landing page as a
visual table of contents
WEB DESIGN MOVING FORWARD

51. 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.

52. 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

53. 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

54. Grid based Design Examples
WEB DESIGN MOVING FORWARD

55. 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.

56. 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

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

58. 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