In a previous post, I shared the initial design explorations for the new website that included both design elements (purposeful elements that are the foundational building blocks of a design system, e.g., color, iconography, typography, etc.) and design patterns (functional and repeatable configurations of elements that perform specific functions through user interaction (buttons, inputs, dropdowns, etc.).
In this post, you will find designs for the various components that will be seen throughout the new website. Components convey meaning by combining patterns to support specific content types, e.g., carousels, menus, accordions, media types, content featurettes, etc.
Content Types
Before building out website components, we identified and matched up website content types for design and function. Here are some, but not all, of the content types we have accounted for in a variety of components so far.
- Acalog (catalog) Integration
- Accordions
- Aggregate Result Cards
- Differentiator Slider
- Emergency Alert
- Faculty & Staff
- Financial Aid & Admission
- Forms
- Heading/Intro Copy
- Key Points & Location
- Masthead
- Media Component
- My LR Experience
- News & Events
- Page Navigation
- Pagination
- Programs
- Pull Quotes
- Quick Links
- RFI – Request for Information form
- Side-rail Components (appear below page navigation)
- WYSIWYG – What You See is What You Get (HTML content area)
Component Designs
View of many website design components, including primary navigation, masthead image/video, interactive elements for photos, videos and content features, news and events, footer, etc.
View of many website design components, including primary navigation, masthead image/video, interactive elements for photos and videos and content features, news and events, footer, etc.
A view of the new website’s primary navigation. Every page within the site will have the primary navigation visible for visitors at the top of each page.
Purpose: Allow users to consistently navigate through the site. Example: Every page within the site will have the primary navigation visible for users.
Design view of the new website’s footer, which includes important links and admission calls-to-action (Visit, Get Info, Apply)
Purpose: Consistent location for important info, links and CTAs. Example: Visitors can consistently find links to apply, get info and schedule a visit.
View of new website masthead image and headline where a photo or ambient video can be placed behind the transparent overlay.
Purpose: Visual page introduction to establish page messaging and priority. Example: Campus landing pages with large visuals of campus can help students visualize themselves at campus.
Keypoint and location feature showing pinned points on a map.
Purpose: Showcase the location of each campus. Example: Undergraduate admissions page would highlight what makes the Hickory campus and town unique.
My LR Experience feature that shows a photo or video and a quote from a student or alumnus/a with button link for more information.
Purpose: Incorporate storytelling elements throughout the site experience. Example: Admission pages would include experiences from
Alumni to further the ROI piece.
Financial Aid and Admission content featurette showing headline and text copy
Purpose: Provide quick access to financial aid and
admission information from program pages. Example: Graduate program pages will have different financial aid information, this provides quick access to that information.
Design view of accordion feature showing headline, intro text and accordions.
Purpose: Showcase large amounts of copy
in a scannable way that is easy to understand. Example: Program pages can have manual
accordions to showcase detailed program
info or dynamic accordions that pull in course
specific Acalog info.
View of design for differentiator feature that shows a campus headline, intro text and content snippet
Purpose: Help students understand what makes each campus unique. Example: Campus landing
pages will showcase a variety of reasons each campus is unique.
Media component showing video area with play button, video headline and intro text.
Purpose: Imagery and video are compelling
storytelling elements. Example: Student life pages
can utilize the media component to showcase clubs and activities, which can help students visualize themselves as a future LR student.
View of design for Related Programs component that includes a headline and program highlights
Purpose: Encourage program exploration throughout the site. Example: Users on program
detail pages will see related programs they may be interested in they didn’t know LR offered.
View of design for Faculty and Staff component that shows headline, intro text, photo and info on each faculty or staff member.
Purpose: Showcase the faculty and staff that make LR unique. Example: Program detail
pages should include faculty and staff that are
important to each specific program.
View of News and Events component showing headline, photo area, event dates and event names.
Purpose: News and Events keep content fresh and provide snapshot of LR to various audiences. Example: The homepage will pull in news and events to help showcase the latest happenings
at LR.
View of Request for Information form showing form name, intro text and form fields.
Purpose: Allow users to quickly request
information about LR. Example: Users from
anywhere in the site can click Get Info and be taken to a form.
View of an example template showing area at top of page for video masthead, page title, intro text and webpage copy with image gallery
View of an example template showing area at top of page for photo masthead, left navigation area with call to action, page title, intro text and webpage copy with image gallery
