Style Guide

[luciewho]

Branding and style guidelines for the website, based on what it currently looks like.

[Shoalsteed]

here is a limited stye guide that Ura created for us https://ura.design/projects/i2p

we can expand from that

[Shoalsteed]

I think that for the install guides: -they should use the I2P blue for a background -use a stylized toopie for a guide -not use emojis

[Shoalsteed]

[luciewho]

Curious about I2P blue. Is that #4661A9 on the Ura site?

While making the wireframes I noticed there were multiple purple colors going on, with different HEX codes. the background for the installation steps above (#0B0468) the background on the installation guide on Medium (#363A68) the lighter purple around the OS box (#546BD2) the dark purple for sig mirror button (#3C468A) the purple used for the OS icon (#4661A9) the purple line underneath the main menu (#4356B7)

I don't see anything about purple in the Ura guide. Do you know which HEX code(s) for purple should be used? It seems like a lot, maybe up to 2 purples would be good. I'm guessing it might be something we'll have to add to the style guide.

[Shoalsteed]

that is strange that the colour turns out differently between the install / Medium since it is the same slide deck.

The Ura purple/blue is the colour we want #4661A9

363A68 would be the other option

[luciewho]

weird, maybe the color appears different on my computer or the color detector I used.

okay good to know. do you think some the other purples that are being used should be changed?

[Shoalsteed]

I think that they should

:root { --i2poffblack: #070425; --i2poffwhite: #f6f6fa; --i2ppurple: #222187; --i2pmidblue: #265ea7; --i2plightblue: #9dabd5; --i2pdarkblue: #2d4470; --i2plightgreen: #709fa6; --i2pmossy: #60ab60; --i2pctablue: #00ffff; --i2pgrey: #333333; --i2pbggrey: #9e9e9e; --i2pcharcoal: #080808; border: 2px solid #4456B7

Above are most of the colours displayed on the site. I would be open to creating a new style guide since the one that was created by Ura is limited.

[Shoalsteed]

weird, maybe the color appears different on my computer or the color detector I used.

okay good to know. do you think some the other purples that are being used should be changed?

The download page for sure has 3 purples!

[luciewho]

Leaving this resource here for inspo:

https://teenyicons.com https://feathericons.com https://remixicon.com

Might need to create some icons in the future for the Resources page and other pages as well

[Shoalsteed]

@luciewho Here is the extended guide that Ura made when we were doing alternative logo explorations. Many more colours to choose from in my Pacific/ Summer/ Desert palette lol ( my inspo was https://claystreetca.com/collections/horizon-series) https://uracreative.github.io/i2p-styleguide/design/

[luciewho]

Starting to put together a style guide. And applying some of the styles from Ura (like the typography and the colors) to the installation wireframe. So far, just one of the download pages (page 2) has the applied colors and fonts.

Style Guide Wireframe.pdf

[luciewho]

I don't want to copy Mullvad too much, but I like how there's two contrasting backgrounds on the Download page, blue on the top and white on the bottom. It breaks up the sections well. Just something to think about.

https://mullvad.net/en/download/macos/

[Shoalsteed]

I like this too - I think we should do it as well.

[Shoalsteed]

different highlighting option

[Shoalsteed]

[Shoalsteed]

highlights or circles?

[Shoalsteed]

** for style guide: when creating screenshots always ensure to use as close to "factory settings" as possible - do not show something that will give away any unique identifiers.

[luciewho]

I would like to see the green line circles less thick, right around the actual button to click rather than the area. The double circles is confusing because you don't know what you're supposed to focus on.

The highlight looks cool. Would like to see the visual-ness of it cleaned up (it highlights the space slightly outside the box/pop-up and sometimes the width around it is not consistent. Having it match the exact size of the box might look better). I also think using it to point out an area is better, whereas using the lined circles to point out a button to click is better. The highlight isn't as impactful when gesturing what button to click on.

Having two styles could be confusing though. I would ultimately go with the line circles because it's familiar, doesn't blend in or look like it's part of the installer. I think the line circles just need to be cleaned up in terms of thickness and where it is placed on the button/area.

[luciewho]

I'm testing out different background colors for the Download page in that Mullvad style. The free speech blue would be nice but it's really hard to read black text on it and I don't like the white text on it that much either.

I think the all white or cream/white work best. Or we find a new secondary color to replace the teal.

[Shoalsteed]

I really am most drawn to the dark purple.

[Shoalsteed]

[Shoalsteed]

I do not normally like this sort of thing, but felt compelled to make one. looking for ways to illustrate something like this

[luciewho]

I really am most drawn to the dark purple.

You don't think the white text is hard to read over the dark background? I am not sure about starting with a cream background and then it changing to dark purple.

I wanna get an opinion from a visual/UI friend who works with more graphic stuff than me and see what they think about the background colors and the green circles as well.

[luciewho]

Separate buttons for mirror/sig.

I think the first or second one looks best when on the page. For the second one, would need to introduce a hover state (like half of it turns to solid colored button) to make it obvious that it is 2 buttons.

[Shoalsteed]

I really am most drawn to the dark purple.

You don't think the white text is hard to read over the dark background? I am not sure about starting with a cream background and then it changing to dark purple.

I wanna get an opinion from a visual/UI friend who works with more graphic stuff than me and see what they think about the background colors and the green circles as well.

the second ura guide shows a score of readability for text on different backgrounds for reference.

[Shoalsteed]

Separate buttons for mirror/sig.

I think the first or second one looks best when on the page. For the second one, would need to introduce a hover state (like half of it turns to solid colored button) to make it obvious that it is 2 buttons.

agree! My choices too

[Shoalsteed]

I really am most drawn to the dark purple.

You don't think the white text is hard to read over the dark background? I am not sure about starting with a cream background and then it changing to dark purple.

I wanna get an opinion from a visual/UI friend who works with more graphic stuff than me and see what they think about the background colors and the green circles as well.

sure - it is a good idea. I think that others have managed well with using colours on backgrounds. The issue I would see is if it makes things look too cartoon-y . I am on board with what choice is best for readability.

[luciewho]

Got some good feedback on the styling by some visual designers:

1 - Liked the dark purple+white because of high contrast. Also thought the green lined circles were more contrasting and easier to read than the highlights. 2 - Preferred the dark purple+white, but not the cream+white. Thought the cream looked dated, a light gray would look better. 3 - Preferred the cream+white. Not the all-white because tabbing feature wasn't as obvious. Did not like the dark purple+white because the text was hard to read, background too dark. Eye was drawn toward white text instead of green download button. Java icon hard to read.

Nobody liked the dark purple+cream. I tried to use the cream because it is already the main bg color. It would be strange to introduce dark purple and white as new background colors when it's cream everywhere else.

I think we essentially need to pick a new background color or stick with the cream. It could be a slightly lighter-colored purple. Also, Mullvad does it well because they have the entire top page including the header as the blue color. Every page has a blue header and white background below for text. They keep the colors consistent.

Hope this made sense. Let's discuss on Monday!

[Shoalsteed]

Good feedback, especially about where the eye is drawn too ( which may not be what we want people to focus on!)

[luciewho]

Trying to find some open sources images we could use for the illustration/graphic on the download page. I am not skilled at making something from scratch, but here are some options we can pull from. Will add more as I come across them:

https://lucid.pixsellz.io/?ref=uistore.design https://thenounproject.com

[Shoalsteed]

Trying to find some open sources images we could use for the illustration/graphic on the download page. I am not skilled at making something from scratch, but here are some options we can pull from. Will add more as I come across them:

https://lucid.pixsellz.io/?ref=uistore.design https://thenounproject.com

graphic assets are pretty hard to find. The best I have come across is Canva. I am working on something there .

[luciewho]

I like how ExpressVPN does the Language tab, 3 columns of languages in a box.

[Shoalsteed]

this is way better

[Shoalsteed]

Logos : https://github.com/uracreative/works/tree/main/I2P toopie https://en.wikipedia.org/wiki/File:Itoopie.svg

[luciewho]

Colors in style guide so far. (I think I will remove the light gray and use what is marked as medium gray -- which is the color of the screenshot backgrounds)

Maybe we need another color for an "alternate" button that is not the secondary button (with the outline)

[Shoalsteed]

old logo old poster ( no idea who made it)

[Shoalsteed]

all logos can be downloaded from here for the new logo https://github.com/uracreative/works/tree/main/I2P

[luciewho]

Inspiration for style guides on websites

http://styleguides.io/examples http://codeforamerica.clearleft.com http://ux.mailchimp.com/patterns/typography https://govuk-elements.herokuapp.com/colour/

[Shoalsteed]

here is one that I like https://foundation.mozilla.org/en/style-guide/

[Shoalsteed]

@luciewho do you have a PDF of the style guide prepared? How close is this to being completed?

[luciewho]

This is pretty close. Let's talk about this on Friday with idk because there is some stuff regarding the CSS.