College and university websites have a lot of roles to fill. They need to provide information for prospective students (both new and transfer), parents of students and prospective students, current students, and alumni. In many cases, they’re also the gateway to the school’s intranet and the public face for both academics and athletics. They often need to include reams of information in a way that makes everything easy to find. It’s a huge challenge.
And the truth is: most college and university websites are horribly designed. Either they look like they were designed fifteen years ago and then forgotten about, or they’re so overloaded with information that it’s almost impossible to find what you’re looking for.
You may also want to check out the following Smashing Magazine articles:
But not every college or university website is horrible. There are some excellent sites out there, and below are some of them. If you know others, please share them in the comments to this post!
General Colleges & Universities Link
Appalachian State University4
Appalachian State University has a simple color scheme and makes great use of icons in their header.
Ball State University6
Ball State University uses a sophisticated color scheme and typography combined with plenty of negative space.
The bold header and grid-based layout work well on the Bates College site.
Bennington College uses a unique layout and design.
Berea College uses a clean layout, and the cutout in the navigation bar for the logo really sets it apart.
Case Western Reserve University14
Case Western Reserve University uses a unique layout and color options.
Champlain College uses a sophisticated, muted color scheme and excellent typography.
Colby-Sawyer College has a simple layout with plenty of negative space.
William & Mary20
The bold header image and excellent typography set the William & Mary site apart.
The College of Wooster22
The College of Wooster uses an interactive, animated header.
Denison’s website makes great use of negative space and a simple layout.
Dickinson College’s site has a great color scheme and a subtle background image.
Elon University’s site includes a lot of details that make the site look really polished.
Hamilton uses a simple color scheme and straight-forward navigation.
Hampshire College uses a unique, sophisticated color scheme and typography.
Lenoir-Rhyne University has a clean layout and bold header slideshow.
Marlboro College makes good use of a simple layout and color scheme.
Middlebury College has a completely unique layout with excellent typography.
Minot State University40
Minot State University uses plenty of negative space and clean typography.
Nebraska Wesleyan University42
Nebraska Wesleyan has one of the best-looking college sites out there, with a fantastic background image and excellent typography.
Northland College uses unique typography and grunge elements to stand out.
Oglethorpe University uses a modern color scheme and typography.
Ohio Wesleyan University48
Ohio Wesleyan uses a bold color scheme and graphics.
Simmons College uses a clean, grid-based layout and sophisticated color scheme.
Sweet Briar College52
Sweet Briar College steps outside of the norm for a college website and uses a more relaxed, feminine design (appropriate for a women’s college).
Syracuse University has a fantastic grid layout and modern color scheme.
Thomas Edison State College56
Thomas Edison State College has a great illustration in their header and a sophisticated color scheme.
Tufts has a unique layout and excellent typography.
The University of Alabama60
The University of Alabama uses a grid layout and plenty of negative space.
University of Connecticut62
The University of Connecticut’s site has a simple layout and navigation.
University of Maine Farmington64
The University of Maine Farmington’s website uses a basic grid layout and great typography.
University of Miami66
The University of Miami uses a muted color scheme and simple, horizontal navigation.
University of Minnesota Morris68
The University of Minnesota Morris’s site incorporates a number of small details that give the site its polished look.
University of Nebraska-Lincoln70
A simple color scheme and clean, grid-based layout give the University of Nebraska-Lincoln’s website a polished and sophisticated look.
University of Portland72
The University of Portland uses a simple layout and color scheme with plenty of negative space.
University of Rochester74
The large background image and non-standard navigation set the University of Rochester’s website apart.
University of the Sciences in Philadelphia76
The University of Sciences in Philadelphia uses a fantastic bright color scheme and clean typography.
Ursuline College has a simple layout, good typography, and lots of negative space.
Vancouver Island University80
Vancouver Island University uses a grid layout and fantastic, monochromatic color scheme.
Wake Forest University82
Wake Forest University’s site has clean typography and a simple layout.
Wesleyan University uses a grid layout and sophisticated color scheme.
Westmont utilizes a slideshow header and great color scheme.
University of Aberdeen88
The University of Aberdeen has a fantastic grid layout.
Bournemouth University uses bright accent colors and tabbed navigation.
University of Bradford92
The University of Bradford uses bright accent colors and a grid layout to stand out.
University of Chester94
The University of Chester uses an obvious grid layout, an animated header, and simple navigation.
Edge Hill University96
Edge Hill University has a header slideshow, minimalist color palette, and lots of negative space.
University of Hull98
The University of Hull has a unique layout, simple navigation, and great accessibility features.
Kingston University London100
The Kingston University London’s website uses bright accent colors and simple navigation.
University of Leeds102
The University of Leeds has a simple layout, minimalist aesthetic, and good typography. They also make excellent use of icons to simplify navigation.
University of Oxford104
Oxford uses a simple color scheme and clean layout and makes good use of negative space.
University of Southampton106
The University of Southampton has a bold header and simple color scheme.
Salt Lake Community College108
Salt Lake Community College uses photorealistic and grunge elements, combined with a unique layout.
Passaic County Community College110
Passaic County Community college uses an obvious grid layout and a great color scheme.
Anoka-Ramsey Community College112
Anoka-Ramsey Community College has a unique color scheme and a good use of negative space.
Columbia State Community College114
Columbia State Community College has a simple layout and color scheme with clean typography.
Fashion Institute of Design & Merchandising116
FIDM uses an excellent bright color scheme and a prominent slideshow.
Jamestown Community College118
Jamestown Community College’s site has a simple layout and navigation.
Joliet Junior College120
Joliet Junior College has a simple layout with a good use of icons.
Hagerstown Community College122
Hagerstown Community College has a good color scheme, clean typography, and simple navigation.
Lone Star College System124
Lone Star College System makes good use of transparency.
Washtenaw Community College126
Washtenaw Community College has great hand-drawn elements, and a unique layout and color scheme.
Northland Community & Technical College128
Northland Community & Technical College has a sophisticated layout and color scheme.
Northwest Iowa Community College130
The Northest Iowa Community College site uses a mix of collage, photorealistic, and hand-drawn elements.
Art and Design Colleges & Universities Link
The Art Institute of Boston
The Art Institute of Boston combines a simple layout with bold header graphics.
Kansas City Art Institute132
The Kansas City Art Institute uses bright colors, a collage-style background, and loose grid layout.
Memphis College of Art134
The Memphis College of Art site uses bright bright pink accents combined with a simple design and clean typography.
Minneapolis College of Art & Design136
The patterned background, animated header, and clean typography set the site of the Minneapolis College of Art and Design apart.
Moore College of Art & Design138
Bold graphics and a textured background makes the Moore College of Art & Design site stand out.
The Ontario College of Art & Design140
The Ontario College of Art & Design uses a grid layout and modern orange and white color scheme.
Pennsylvania College of Art & Design142
The Pennsylvania College of Art & Design uses a modern color scheme and bold header.
California College of the Arts144
The California College of Arts uses a unique color scheme and animated header.
University College Falmouth146
University College Falmouth’s site has bright accent colors, lots of negative space, and simple layout and navigation.
Maryland Institute College of Art148
MICA uses a grid layout, muted color scheme, and excellent typography.
SCAD’s minimalist light-on-dark design sets it apart.
Corcoran College of Art & Design152
Corcoran’s mix of minimalist grid design and bold colors is fantastic.
Emily Carr University of Art & Design154
Emily Carr University of Art & Design has a wonderful minimalist layout and clean typography mixed with bold accent colors.
Oregon College of Art & Craft156
Bold background, great typography, excellent navigation.
Ringling College of Art & Design158
The grid layout and bold background give the website of Ringling College of Art & Design a unique look.
Other Institutions, Colleges & Universities Link
Asian University for Women160
The Asian University for Women’s site has an excellent gold and maroon color scheme and plenty of negative space.
California Institute of Integral Studies162
The bold typography and great color scheme of the California Institute of Integral Studies sets it apart.
Rochester Institute of Technology164
The orange and cream color scheme, simple navigation and clean typography make the Rochester Institute of Technology’s site unique.
While the vast majority of college and university websites out there are in need of serious overhaul, there are some fine examples of sites if you look hard enough. If designing a site for a college or university, remember that simplicity and negative space are both important, regardless of the amount of information a site needs to contain.
- 1 https://www.smashingmagazine.com/web-design-showcases-round-up/
- 2 https://www.smashingmagazine.com/global-web-design-showcases/
- 3 https://www.smashingmagazine.com/portfolio-web-design-showcases/
- 4 http://www.appstate.edu/
- 5 http://www.appstate.edu/
- 6 http://cms.bsu.edu/
- 7 http://cms.bsu.edu/
- 8 http://www.bates.edu/
- 9 http://www.bates.edu/
- 10 http://www.bennington.edu/
- 11 http://www.bennington.edu/
- 12 http://www.berea.edu/
- 13 http://www.berea.edu/
- 14 http://www.cwru.edu/
- 15 http://www.cwru.edu/
- 16 http://www.champlain.edu/
- 17 http://www.champlain.edu/
- 18 http://www.colby-sawyer.edu/
- 19 http://www.colby-sawyer.edu/
- 20 http://www.wm.edu/
- 21 http://www.wm.edu/
- 22 http://www.wooster.edu/
- 23 http://www.wooster.edu/
- 24 http://www.denison.edu/
- 25 http://www.denison.edu/
- 26 http://www.dickinson.edu/
- 27 http://www.dickinson.edu/
- 28 http://www.elon.edu/home/
- 29 http://www.elon.edu/home/
- 30 http://www.hamilton.edu/
- 31 http://www.hamilton.edu/
- 32 http://www.hampshire.edu/
- 33 http://www.hampshire.edu/
- 34 http://www.lr.edu/
- 35 http://www.lr.edu/
- 36 http://www.marlboro.edu/
- 37 http://www.marlboro.edu/
- 38 http://www.middlebury.edu/#story196211
- 39 http://www.middlebury.edu/#story196211
- 40 http://www.minotstateu.edu/
- 41 http://www.minotstateu.edu/
- 42 http://www.nebrwesleyan.edu/
- 43 http://www.nebrwesleyan.edu/
- 44 http://www.northland.edu/
- 45 http://www.northland.edu/
- 46 http://www.oglethorpe.edu/
- 47 http://www.oglethorpe.edu/
- 48 http://www.owu.edu/
- 49 http://www.owu.edu/
- 50 http://www.simmons.edu/
- 51 http://www.simmons.edu/
- 52 http://www.sbc.edu/
- 53 http://www.sbc.edu/
- 54 http://www.syr.edu/
- 55 http://www.syr.edu/
- 56 http://www.tesc.edu/#
- 57 http://www.tesc.edu/#
- 58 http://www.tufts.edu/
- 59 http://www.tufts.edu/
- 60 http://www.ua.edu/
- 61 http://www.ua.edu/
- 62 http://www.uconn.edu/
- 63 http://www.uconn.edu/
- 64 http://www.umf.maine.edu/
- 65 http://www.umf.maine.edu/
- 66 http://www.miami.edu/
- 67 http://www.miami.edu/
- 68 http://www.morris.umn.edu/
- 69 http://www.morris.umn.edu/
- 70 http://www.unl.edu/
- 71 http://www.unl.edu/
- 72 http://www.up.edu/
- 73 http://www.up.edu/
- 74 http://www.rochester.edu/
- 75 http://www.rochester.edu/
- 76 http://www.usp.edu/
- 77 http://www.usp.edu/
- 78 http://www.ursuline.edu/
- 79 http://www.ursuline.edu/
- 80 http://www.viu.ca/
- 81 http://www.viu.ca/
- 82 http://www.wfu.edu/
- 83 http://www.wfu.edu/
- 84 http://www.wesleyan.edu/
- 85 http://www.wesleyan.edu/
- 86 http://www.westmont.edu/
- 87 http://www.westmont.edu/
- 88 http://www.abdn.ac.uk/
- 89 http://www.abdn.ac.uk/
- 90 http://home.bournemouth.ac.uk/
- 91 http://home.bournemouth.ac.uk/
- 92 http://www.brad.ac.uk/external/
- 93 http://www.brad.ac.uk/external/
- 94 http://www.chester.ac.uk/
- 95 http://www.chester.ac.uk/
- 96 http://www.edgehill.ac.uk/
- 97 http://www.edgehill.ac.uk/
- 98 http://www2.hull.ac.uk/default.aspx
- 99 http://www2.hull.ac.uk/default.aspx
- 100 http://www.kingston.ac.uk/
- 101 http://www.kingston.ac.uk/
- 102 http://www.leeds.ac.uk/
- 103 http://www.leeds.ac.uk/
- 104 http://www.ox.ac.uk/
- 105 http://www.ox.ac.uk/
- 106 http://www.soton.ac.uk/
- 107 http://www.soton.ac.uk/
- 108 http://www.slcc.edu/
- 109 http://www.slcc.edu/
- 110 http://www.pccc.edu/
- 111 http://www.pccc.edu/
- 112 http://www.anokaramsey.edu/
- 113 http://www.anokaramsey.edu/
- 114 http://www.columbiastate.edu/
- 115 http://www.columbiastate.edu/
- 116 http://fidm.edu/
- 117 http://fidm.edu/
- 118 http://www.sunyjcc.edu/
- 119 http://www.sunyjcc.edu/
- 120 http://www.jjc.edu/Pages/default.aspx?c=1
- 121 http://www.jjc.edu/Pages/default.aspx?c=1
- 122 http://www.hagerstowncc.edu/
- 123 http://www.hagerstowncc.edu/
- 124 http://www.lonestar.edu/
- 125 http://www.lonestar.edu/
- 126 http://www.wccnet.edu/
- 127 http://www.wccnet.edu/
- 128 http://www.northlandcollege.edu/
- 129 http://www.northlandcollege.edu/
- 130 http://www.nwicc.edu/
- 131 http://www.nwicc.edu/
- 132 http://www.kcai.edu/
- 133 http://www.kcai.edu/
- 134 http://www.mca.edu/
- 135 http://www.mca.edu/
- 136 http://www.mcad.edu/
- 137 http://www.mcad.edu/
- 138 http://www.moore.edu/
- 139 http://www.moore.edu/
- 140 http://www.ocad.ca/
- 141 http://www.ocad.ca/
- 142 http://www.pcad.edu/
- 143 http://www.pcad.edu/
- 144 http://www.cca.edu/
- 145 http://www.cca.edu/
- 146 http://www.falmouth.ac.uk/
- 147 http://www.falmouth.ac.uk/
- 148 http://www.mica.edu/
- 149 http://www.mica.edu/
- 150 http://www.scad.edu/
- 151 http://www.scad.edu/
- 152 http://www.corcoran.edu/
- 153 http://www.corcoran.edu/
- 154 http://www.ecuad.ca/
- 155 http://www.ecuad.ca/
- 156 http://www.ocac.edu/
- 157 http://www.ocac.edu/
- 158 http://www.ringling.edu/
- 159 http://www.ringling.edu/
- 160 http://www.asian-university.org/
- 161 http://www.asian-university.org/
- 162 http://www.ciis.edu/
- 163 http://www.ciis.edu/
- 164 http://www.rit.edu/
- 165 http://www.rit.edu/
↑ Back to top
Tweet itShare on Facebook