Docs homepage > Visual redesign
Purpose
We want to update the design of the docs homepage to improve usability and visual appeal.
After a series of competitive analysis, the following wireframe was created as a starting point: https://drive.google.com/file/d/115squXW-P3FIASFfuvs9u1Zp9X1zlUTv/view?usp=sharing
Goals include:
- Make it easier to find a specific topic (for example: highlighting the search functionality)
- Simplify design to ensure users can find what they need (Remove sidebar and duplicative links from header)
- Ensure topbar is accessible (search bar is easily visible, label for version dropdown is clear, version dropdown is clearly visually a dropdown)
- Highlight key areas that users often want to get started with (Note: Susan and Craig will provide us with what these areas are to be)
- Add interest through visual design, such as illustrations, for areas that will not change often (Get started section). Stakeholders have an interest in the design of https://github.com/features/codespaces, although this page is more of a landing marketing page, similar visual cues could be used for the docs redesign as applicable
- Simplify areas that change often (Popular topics), so that changing these areas are not reliant on design for creating new icons
- Highlight how to install GitLab
- Remove clutter and unnecessary items (for example, replace current footer with footer from about website)
Note that the wireframe is not meant to be prescriptive, it is meant as a starting point to demonstrate a few of the goals outlined above.
Concept
-
View the prototype →
- Use left/right arrows to navigate.
- Comps can scroll vertically.
- Comp oder: Home page, Home page scrolled with fixed header, home page mobile.
- View the design in Figma → (Also attached in the design section below)
Edited by Jeremy Elder