usd college of arts and sciences - information architecture and style tile
Post on 14-Jan-2017
125 Views
Preview:
TRANSCRIPT
Presentation Overview
• Recap
• Information Architecture
• Design Elements and Style Tile
• Next Steps
Target Audience
UNDECLARED & PROSPECTIVE
STUDENTS
STAFF & ADMIN
FACULTY
CURRENT STUDENTS
INDUSTRY PARTNERS
HIRING CORPS.
PROSPECT. FACULTY
ALUMNIDONORS
COMMUNITY
Target Audience
Content Focus
Prospective and Undeclared Students
Current Students, Faculty and Staff
Target Audience
Content Focus
Donors, Alumni and Community
Prospective and Undeclared Students
Current Students, Faculty and Staff
Target Audience
Content Focus
Donors, Alumni and Community
Prospective and Undeclared Students
Current Students, Faculty and Staff
Industry Partners and Hiring Corporations
Project Goals
• Audience-Focused
• Well-Balanced Education
• Research & Scholarships
• Strong Relationships
• Student Outcomes
SEP OCT NOV DEC JAN FEB MAR APR MAY JUN JUL AUG SEP OCT NOV DEC JAN2014 2015 2016
Timeline
RESEARCH& DISCOVERY
Redesign Kick-off
CONTENT &STRUCTURE
Structure Review
SEP OCT NOV DEC JAN FEB MAR APR MAY JUN JUL AUG SEP OCT NOV DEC JAN2014 2015 2016
Timeline
RESEARCH& DISCOVERY
Redesign Kick-off
CONTENT &STRUCTURE
Structure Review
DESIGN
Design Review
SEP OCT NOV DEC JAN FEB MAR APR MAY JUN JUL AUG SEP OCT NOV DEC JAN2014 2015 2016
Timeline
RESEARCH& DISCOVERY
Redesign Kick-off
CONTENT &STRUCTURE
Structure Review
DESIGN
Design Review
DEVELOPMENT
Final Review
SEP OCT NOV DEC JAN FEB MAR APR MAY JUN JUL AUG SEP OCT NOV DEC JAN2014 2015 2016
Timeline
LAUNCH
RESEARCH& DISCOVERY
Redesign Kick-off
CONTENT &STRUCTURE
Structure Review
DESIGN
Design Review
DEVELOPMENT
Final Review
Terminology
Information Architecture:
Identity:
Style Tile:
Landing Page:
structure of a site; navigation flow and how content is organized
different visual components and features that help define the College and its various departments
a set of design elements that create a cohesive digital presence such as fonts, colors, icons and buttons
refers to any page that a user arrives at after clicking a hyperlink to enter a section of a site
Audience: How do they consume information?
• Various devices / screen sizes / locations
• Multiple entry points, search and links
• Different places in the decision-making process
How do we deliver information?
Current
• Unbalanced
• Static / Rigid
• Buried Info
• Duplicate Content
• Placeholder Pages
Improved
• Balanced
• Dynamic / Flexible
• Move to Top
• Modules, Links and Shortcuts
• Meaningful Content
How do we navigate?
Majors and Minors Graduate Programs Advising Faculty About
First-Year Students
Transfer Students
Pre-Law
Pre-Health
Prepare for Registration
Prepare for Graduation
Career Services
How do we make it easier?
Persistent Links (calls to action)
• Apply Now
• Give
• Visit
• Contact
Shortcuts (identified by audience needs)
• Prospective Students
• Current Students
• Faculty and Staff
• Parents
• Alumni
• Transfer Students
• Visitors
• Veterans
How do we make it easier?
Persistent Links (calls to action)
• Apply Now
• Give
• Visit
• Contact
Shortcuts (identified by audience needs)
• Prospective Students
• Current Students
• Faculty and Staff
• Parents
• Alumni
• Transfer Students
• Visitors
• Veterans
Utilities (tools people use)
MySanDiego Blackboard Mail Maps Directory Calendar Bookstore Libraries
Department Site Structure
• What is it?
• How does it work?
• Where does it happen?
• What tools do we offer?
• Why are we awesome?
Department Site Structure
• What is it?
• How does it work?
• Where does it happen?
• What tools do we offer?
• Why are we awesome?
Programs
Department Site Structure
• What is it?
• How does it work?
• Where does it happen?
• What tools do we offer?
• Why are we awesome?
Programs
Research, Fieldwork, Exhibits
Department Site Structure
• What is it?
• How does it work?
• Where does it happen?
• What tools do we offer?
• Why are we awesome?
Programs
Research, Fieldwork, Exhibits
Labs, Galleries, Performance Venues
Department Site Structure
• What is it?
• How does it work?
• Where does it happen?
• What tools do we offer?
• Why are we awesome?
Programs
Research, Fieldwork, Exhibits
Labs, Galleries, Performance Venues
Resources, Clubs, Organizations
Department Site Structure
• What is it?
• How does it work?
• Where does it happen?
• What tools do we offer?
• Why are we awesome?
Programs
Research, Fieldwork, Exhibits
Labs, Galleries, Performance Venues
Resources, Clubs, Organizations
Why Choose (Program)?
Style and Elements
Round Edges: softer, lighter, more inviting
Slanted Line: modern, cool, engagingAPPLY TODAY
This is an Example of a HeaderSubtitle / Lead Paragraph
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra vulpue felis eu porta. Ut eleifend est sed velit malesuada suscipit. Cras ac urna fringilla, aliquet justo porttitor, vulputate lorem. Etiam placerat eros nec neque vehicula dictum et sed mauris. Suspendisse blanmagna quis.
MENU
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra vulputate felis eu porta. Ut leifend est sed velit malesuada suscipit. Cras ac urna fringilla, aliquet justo port, vulputate lorem. Etiam placerat eros nec neque vehicula dictum et sed mau. Suspendisse bland magna quis. Donec arcu turpid, tempus nec eros sit amet, efficitur tempor mauris. – Anonymous
TITLE Classic Font (confident, professional) Darker color (bold, power) Decreased font size to increase real estate
CONTENT Increased font size for readability Quicker and easier to scan text
TYPOGRAPHY
This is an Example of a HeaderSubtitle / Lead Paragraph
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra vulpue felis eu porta. Ut eleifend est sed velit malesuada suscipit. Cras ac urna fringilla, aliquet justo porttitor, vulputate lorem. Etiam placerat eros nec neque vehicula dictum et sed mauris. Suspendisse blanmagna quis.
MENU
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra vulputate felis eu porta. Ut leifend est sed velit malesuada suscipit. Cras ac urna fringilla, aliquet justo port, vulputate lorem. Etiam placerat eros nec neque vehicula dictum et sed mau. Suspendisse bland magna quis. Donec arcu turpid, tempus nec eros sit amet, efficitur tempor mauris. – Anonymous
TITLE Classic Font (confident, professional) Darker color (bold, power) Decreased font size to increase real estate
CONTENT Increased font size for readability Quicker and easier to scan text
TYPOGRAPHY
This is an Example of a HeaderSubtitle / Lead Paragraph
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra vulpue felis eu porta. Ut eleifend est sed velit malesuada suscipit. Cras ac urna fringilla, aliquet justo porttitor, vulputate lorem. Etiam placerat eros nec neque vehicula dictum et sed mauris. Suspendisse blanmagna quis.
MENU
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra vulputate felis eu porta. Ut leifend est sed velit malesuada suscipit. Cras ac urna fringilla, aliquet justo port, vulputate lorem. Etiam placerat eros nec neque vehicula dictum et sed mau. Suspendisse bland magna quis. Donec arcu turpid, tempus nec eros sit amet, efficitur tempor mauris. – Anonymous
TITLE Classic Font (confident, professional) Darker color (bold, power) Decreased font size to increase real estate
CONTENT Increased font size for readability Quicker and easier to scan text
TYPOGRAPHY
This is an Example of a HeaderSub Title / Lead Paragraph
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra vulputate felis eu porta. Ut eleifend est sed velit malesuada suscipit. Cras ac urna fringilla, aliquet justo porttitor, vulputate lorem. Etiam placerat eros nec neque vehicula dictum et sed mauris. Suspendisse blandit, magna quis.
ON DESKTOP Increased title font size Decreased content font size More white space
DESIGN ELEMENTS
QUOTE MODULES
APPLY TODAYALUMNI Spotlight SEE MORE INFO
Lorem ipsum dolor sit amet, adipiscing elit. Phasellus pharetra felis eu porta. Ut eleifend est sed velit suscipit. Cras ac urna fringilla, aliquet,vulputate lorem. Etiam placerat erosvehicula dictum et sed mauris. Suspanmagna quis. Donec arcu turpis, tempussit amet, efficitur tempor mauris. – Anonymous
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra vulputate felis eu porta. Ut eleifend est sed velit malesuada suscipit. Cras ac urna fringilla, aliquet justo port, vulputate lorem. Etiam placerat eros nec neque vehicula dictum et sed mauris. Suspendisse bland magna quis. Donec arcu turpis, tempus nec eros sit amet, efficitur tempor mauris. – Anonymous
Familiar, Youthful and Inviting
DESIGN ELEMENTS
QUOTE MODULES
APPLY TODAYALUMNI Spotlight SEE MORE INFO
Lorem ipsum dolor sit amet, adipiscing elit. Phasellus pharetra felis eu porta. Ut eleifend est sed velit suscipit. Cras ac urna fringilla, aliquet,vulputate lorem. Etiam placerat erosvehicula dictum et sed mauris. Suspanmagna quis. Donec arcu turpis, tempussit amet, efficitur tempor mauris. – Anonymous
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra vulputate felis eu porta. Ut eleifend est sed velit malesuada suscipit. Cras ac urna fringilla, aliquet justo port, vulputate lorem. Etiam placerat eros nec neque vehicula dictum et sed mauris. Suspendisse bland magna quis. Donec arcu turpis, tempus nec eros sit amet, efficitur tempor mauris. – Anonymous
Familiar, Youthful and Inviting
Prominent Calls to Action
DESIGN ELEMENTS
QUOTE MODULES
APPLY TODAYALUMNI Spotlight SEE MORE INFO
Lorem ipsum dolor sit amet, adipiscing elit. Phasellus pharetra felis eu porta. Ut eleifend est sed velit suscipit. Cras ac urna fringilla, aliquet,vulputate lorem. Etiam placerat erosvehicula dictum et sed mauris. Suspanmagna quis. Donec arcu turpis, tempussit amet, efficitur tempor mauris. – Anonymous
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra vulputate felis eu porta. Ut eleifend est sed velit malesuada suscipit. Cras ac urna fringilla, aliquet justo port, vulputate lorem. Etiam placerat eros nec neque vehicula dictum et sed mauris. Suspendisse bland magna quis. Donec arcu turpis, tempus nec eros sit amet, efficitur tempor mauris. – Anonymous
Familiar, Youthful and Inviting
Bold, Visual Cues
Prominent Calls to Action
DESIGN ELEMENTS
QUOTE MODULES
APPLY TODAYALUMNI Spotlight SEE MORE INFO
Lorem ipsum dolor sit amet, adipiscing elit. Phasellus pharetra felis eu porta. Ut eleifend est sed velit suscipit. Cras ac urna fringilla, aliquet,vulputate lorem. Etiam placerat erosvehicula dictum et sed mauris. Suspanmagna quis. Donec arcu turpis, tempussit amet, efficitur tempor mauris. – Anonymous
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra vulputate felis eu porta. Ut eleifend est sed velit malesuada suscipit. Cras ac urna fringilla, aliquet justo port, vulputate lorem. Etiam placerat eros nec neque vehicula dictum et sed mauris. Suspendisse bland magna quis. Donec arcu turpis, tempus nec eros sit amet, efficitur tempor mauris. – Anonymous
MEET OUR FACULTY MODULE
WHY CHOOSE MODULE
John DoeAnthropology
SEE MORE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra vulputate felis eu porta. Ut eleifend est sed velit malesuada suscipit. Cras ac urna fringilla.
Why ChoosePsychology?
MYPOSTINGS NEWS AND EVENTS
In the News
MONDAY, FEBRUARY 2, 2015
USD Chemistry & Biochemistry Students Selected for National Honor SocietyAliquam sagittis turpis luctus, placerat augue vitaelaoreet, risus rutrum gravida commodo, urna urna.
Upcoming Events
MAR Event Title12:30 a.m. - 12:30 p.m. | Building Room 127
MAR Event Title12:30 a.m. - 12:30 p.m. | Building Room 130
APR Event Title12:30 a.m. - 12:30 p.m. | Building Room 111
MAY Event Title12:30 a.m. - 12:30 p.m. | Building Room 119
MAY Event Title12:30 a.m. - 12:30 p.m. | Building Room 128
Summary
• Dynamic content
• Clearly defined benefits for students
• Highlight department personality
• Consistent, but flexible
Next Steps
Design and Development Review August 2015
Redesign Website Presentation Slides and Style Tile www.sandiego.edu/redesign
top related