Web Design
This page’s standards, guidelines, and resources 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 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 communities.
- 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 can access 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 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 the 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, and 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 website brand guidelines 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 improves user experience and connects individual sites to the broader Stanford context.
- Accessibility is a requirement. Not only is this a legal imperative, but it’s also 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 treat accessibility as an add-on. Many accessibility concerns affect every step of the design process. Waiting until implementation starts 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.