I decided after going back and researching other guidelines like wise, I’d do the same thing, as it’ll allow me to talk about the XP brand more and show more. That being said I need to prepare for this and plan well.

I feel since I’ve done a lot of writing in the brand guidelines about many different things I can reuse that but there will be some things I’ll have to write for like the components.

Here are some of the headings I will use and what they mean

Design for XP - This will be the about section, using our assets section, links to other headings

Foundations - This will be the brand guidelines split into separate pages

Components - This will be all the components used, new ones will be created and it’ll all be explained

Patterns - This will contain some pre-set designs you can edit and screens to use like an error screen

Resources - a link to the brand guidelines and some fake merchandise as well as the stationary

So with that planned out I want to sketch just a general layout of the website, it’ll be similar to wise’s website in layout with maybe more spacing.

Sketches

So I created sketches for the landing page, the page which has each section in it and what a sections layout looks like, again the main inspiration for the website will be wise design, as this sort of design system is starting to emerge I feel it’s good to follow form and showcase how a new brand may do it with some tweaks here and there,

Screens

Home Page

Here is the landing page of the design system website, I decided to create a new motion graphic at the top there which will be discussed in my motion graphics page, I also decided to reuse some assets I wasn’t able to use for the brand guidelines and the app screens, I then made another slogan that says level up your designs which I thought was a good idea.

Design for XP Screen

This screen is a rip of wise’s with a lot of changes to make it more legible and improve hierarchy, I also started adding interaction to the contents section to make the screen more interactive, I also made the nav bar and contents fixed while scrolling down for a better user experience.