Web Design
The standards, guidelines and resources on this page will equip you to create an engaging Stanford web experience.
Where do I start?
There are many resources available at Stanford that can help you with setting up a brand-compliant, accessible and user-friendly website:
Brand compliance
Check this list of required and recommended items to confirm that the Stanford website you’re building meets university standards for brand compliance.
Hosting
Use Stanford Sites, Drupal, or WordPress hosting, each available to Stanford and all in the cloud.
Self service
- Stanford Sites
- A free, self-service tool for building and managing websites for university work. It offers design flexibility, integration with Stanford systems, and substantial functionality through Drupal. Websites are hosted in the cloud on a system designed for fast performance and high availability.
- Drupal and WordPress Themes
- For building your own customized websites, check out these tools our teams have created to make your website building process easier and more efficient to manage
- start a conversation with Stanford Web Services.
Stanford website identity
There are two styles of the Stanford identity for websites. The two identities differ mainly in the Stanford Local Header.
Institutional identity
Institutional web identity projects a core affiliation with Stanford.
- This website design is reserved for schools and central administrative departments and units.
- Audience: External, global and internal Stanford communities.
- Examples of a Stanford websites with institutional identity:
- Stanford School of Engineering: https://engineering.stanford.edu/
- Stanford School of Humanities and Sciences: https://humsci.stanford.edu/
Light identity
Light web identity projects a less foundational Stanford affiliation.
- These websites represent a unit, group, event, etc., whose primary affiliation is with Stanford.
- Audience: internal Stanford communies.
- Examples of Stanford websites with light identity:
- Campus Names: https://campusnames.stanford.edu/
- John L. Hennessy: https://hennessy.stanford.edu/
- Immigration issues and resources: https://immigration.stanford.edu/
- Undocumented at Stanford: https://undocumented.stanford.edu/
Stanford websites can be created for/by (but are not limited to):
- Official schools and departments
- Institutes, Labs, and Centers
- Stanford organizations and businesses
- Official events, conferences, and campaigns
- Official student groups
Professional services offered by Stanford
- If you need professional services for website planning, design, development, and maintenance support, start a conversation with Stanford Web Services.
- Need help with your website? As part of Stanford, you have access to resources and people for guidance, consultation, and hire. Learn about many of these options on this website, and also consult your organization’s communications team if you’re unsure of where to start.
Relevant policies for Stanford websites
Stanford.edu URL name assignments
Stanford University owns the Stanford.EDU Internet domain and assigns URLs to benefit the academic, research and other University activities and interests. For information about rules that apply to Stanford.EDU domain names, please consult the Stanford.EDU URL Assignment Policy.
See the Stanford.EDU URL Assignment Policy
Online accessibility
All Stanford academic and administrative units that create and maintain websites and web‐based applications used in the programs and activities of the university will make them accessible to its students, faculty, staff and participants in the university’s programs and activities who have disabilities. All personnel who are involved in the procurement, preparation and maintenance of university websites and web‐based applications should follow this policy. Dedicated campus resources are available for supporting web accessibility. For details on scope and implementation, please refer to:
See the Stanford University Online Accessibility Policy
Use of Stanford’s name and emblems
Guidelines regarding use of Stanford’s name and emblems in endorsements and non-Stanford promotional materials
Web design do’s and don’ts
Do
- Leverage the Stanford Identity Guidelines and use them appropriately. This covers everything from our name and logos, department branding, color, typography, to medium-specific applications.
- Be recognizably “Stanford”. While we don’t want every site to look the same, all our websites should retain a clear visual connection to Stanford. Our brand guidelines for websites make the Stanford web experience consistent while providing the flexibility needed to communicate unique messages.
- Incorporate the essential elements. Make sure you add the Identity Bar and Global Footer to your websites. This makes for a better user experience and connects individual sites to the broader Stanford context.
- Accessibility is a requirement. Not only is this a legal imperative, it’s the right thing to do. Please refer to the Online Accessibility Policy for details.
- Design for all sized screens. We can no longer assume what device a person will use to visit us on the web, so our websites should be developed for all screen sizes – from mobile to desktop.
- Make websites intuitive and easy to use. We want to make it as easy and intuitive as possible for people to interact with us online. Be clear. Simplify.
- Use semantic markup. We should follow code best practices with semantic HTML and CSS. This also helps with accessibility and usability.
Don’t
- Don’t ignore guidelines on proper use of our name and emblems, color, and typography. Read the documentation and properly use Stanford’s name and logos, department branding, color, typography, and medium-specific applications.
- Don’t eliminate all visual ties to Stanford. While each organization’s style and contributions are unique and valuable, be sure to also retain a clear relationship to Stanford – especially through the use of the Identity Bar, Global Footer and Stanford Identity elements.
- Don’t treat accessibility as an add-on. There are many accessibility concerns that affect every step of the design process. Waiting until implementation to start will be too late.
- Don’t forget to check for enough contrast on color and type. A good rule of thumb is 50% contrast between elements. Pay extra attention to this for text overlaid on images. For more specific guidelines check out the SOAP site.