DEV Community

Cover image for ๐Ÿ˜ or ๐Ÿคฎ What do you think of our design? [and a little bit on accessible colour schemes]
InHuOfficial
InHuOfficial

Posted on • Updated on

๐Ÿ˜ or ๐Ÿคฎ What do you think of our design? [and a little bit on accessible colour schemes]

Super short and positive (for once...I seem to have been on a bit of a naughty streak!) post.

Finally at the stage of building the front end for Inclusivity Hub (shorted to InHu - our company). After much deliberation and fiddling we have settled on the colour scheme and have a rough idea of the branding!

So I thought I would share the design for feedback (negative feedback and constructive feedback is more than welcomed!).

At the same time, I thought I would show how little adjustments / certain thought processes mean that you can create an accessible colour palette that is (hopefully) appealing and share that with you too!

Let's start with the final design!

Start at the end and work backwards!

I won't bore you with the thought process too much as to why we chose the "stripes", I will just share the inspiration behind the design, which bits we liked and then the final product.

Inspiration

I liked the following two images:-
geometric background with diagonal rounded rectangles, circles with lines through them, dots and dashes in a pink, purple and dark blue colour scheme with yellow highlights
https://www.vecteezy.com/vector-art/2070759-creative-abstract-dynamic-geometric-elements-pattern-design

and
vector background with uniform rectangles at 45 degree angle, fully rounded ends, evenly spaced in a
https://www.vecteezy.com/vector-art/1936591-abstract-pink-and-blue-gradient-color-rounded-line-diagonal-pattern-on-black-background

The first one was too busy though and the second one was too uniform. We wanted something in between and I, in particular wanted to see a more friendly colour scheme with a bit more variance in colours!

The anchor design

After a bit of fiddling I finalised an idea and got to work designing.

And here is the "anchor design" around which our branding will be built:
Dark purple background with 45 degree rounded rectangles, hollow circles with thick outlines and filled circles with multiple colours that are bright and vibrant.

Bright, colourful and I could tell you a whole story about why we chose certain things but, in the end, this is what we ended up with.

Needs some minor spacing tweaks but it is 95% of the way there.

I always like to do the business cards next

To see if a design "works in the real world" I think business cards are a great place to start.

They are easy to make (so if you hate the design you can scrap it without wasting too much time) and they have two sides so you can try a light theme and a dark theme on one product.

Yet again, without all the design fluff, here are the rough designs for the cards:-

Front

The InHu logo sat on top of the background with a drop shadow to make it look like it is floating. The InHu logo is a white circle with a thick pink outline with a slight gap at the bottom containing the text InHu split dark purple for "In" and pink for "Hu" with a little curve at the bottom within the white circle in dark purple also. Due to weighting on the "I" and the "U" being stronger and the small curved line at the bottom it looks like a smiling face. The background is dark purple with 45 degree rounded rectangles, hollow circles with thick outlines and filled circles with multiple colours that are bright and vibrant.

Not much different, just the company logo on top (with slightly adjusted colours to match new colour scheme)! "Floating" the logo with a drop shadow was the best way to make it stand out and remove some of the flatness from the design.

Back

White background with the same colourful circles, rounded rectangles and outlined shapes. The shapes are located at the top and bottom of the card to allow space in the middle for text. There is placeholder text for person name and position to the left and to the right there are 3 rounded rectangles stacked vertically, each with an icon to the left of them to represent their contents. The 3 rounded rectangles contain placeholder text for a phone number, email address and the web address

Carrying the lines over to the top and bottom while leaving a decent amount of white space in the middle gives the basis for printed things such as invoices, letters etc.

I am still not quite happy with it but it is close to the end product!

So, yet again, what do you think?

Accessibility considerations

Now that you have seen the design, let's talk a little bit about accessibility.

The design is not just a background / visual interest. It is the basis of the colour palette for the company for all other printed and digital media.

So we had to make sure that contrast was good.

If you want to know the exact details of colour contrast requirements then the colour contrast checker from WebAim is a great tool to play with that has explanations below.

I will just give the cliff notes:
For text we want a minimum of 3:1 for cases where we can use large text or for controls (to be used sparingly though!). For most text we want at least 4.5:1 contrast so we can use normal sized text.

For the main body text we want at least 7:1 contrast so that it is easy to read.

That is basically it!

But that does get quite complicated when designing a colour palette.

For example, orange is a low contrast colour with white. So to make an orange that meets the minimum standards of 3:1 you have to make it quite dark.

Yellow is out of the question with white, so that is for use on / with dark colours and as decoration.

Why am I picking out those colours in particular? Because we as developers use them for warnings, statuses etc. as they are the expected colours. We need to have at least one colour between "red" and "green" so we decided to make a dark orange as part of the colour scheme.

Is there a method you can use to get it right?

There are a lot of tools you can use (by @5t3ph ) that will help you generate an accessible colour scheme and check contrast (by @alvaromontoro ). They are really handy for steering you towards an accessible palette and checking contrast!

The problem is that if you start that way you will end up avoiding colours that you may want to use.

The trick is to get a colour scheme you like without thinking about accessibility.

Then you adjust the darkness / lightness / hue on colours with low contrast and see if the scheme still works.

If there are colours that you want to use but you cannot get the contrast high enough, mark them as decorative colours.

I find the best way to do it is to lay the colour palette out in blocks and then add the contrast ratios on top of them. Then you can easily see which ones you can use in which situations.

An example of this is as follows:
Described immediately below due to too much information

Description of colours:

Colour Hex Colour Background Hex Colour Text Contrast Ratio
Primary background #522876 white 10.9
Primary logo #7E4998 white 6.4
Secondary logo #A55A9F white 4.6
Pink (danger) #E02367 white 4.6
Orange (warning) #EA5A1F white 3.5
Amber (decorative) #F49955 white 2.2 (too low)
Purp 2 (Primary) #694F9C white 6.6
Dark Blue (info) #304D9C white 7.9
Light Blue (widgets) #304D9C white 5.1
Primary Text white #444444 9.7
Deselect text #E1E1E4 #444444 7.5
Disabled text #B1B1B1 #444444 4.5
Dark theme 1 #757575 white 4.6
Dark theme 2 #444444 white 9.7
Purple ancillary #F5F0F8 #423262 5.84
Blue ancillary #DDEDFB #304D9C 6.61
Green ancillary #E3F1E5 #26602E 6.4
Red ancillary #FDF2F6 #B21F59 5.9
Orange ancillary #FEF2EA #BD421C 4.8
Grey 1 ancillary #E1E1E4 #444444 7.5
Grey 2 ancillary #B1B1B1 #333333 5.9

By doing it this way it makes it easy to pick out which colours can be used for what!

Oh and if you like the colour scheme feel free to use it.

Shouldn't you be going for WCAG AAA colour contrast as an accessibility advocate?

Good point, you obviously know accessibility, can we be friends? ๐Ÿ˜‹

The answer is no, we are geared up to produce high contrast versions of our printed media.

Our digital products (that we control) will all have options to turn on a high contrast mode (and turn on automatically with media queries) under a prominent custom build accessibility settings section.

The people who say your site should be WCAG AAA compliant from the beginning are just a little too militant. (there are 3 levels, A, AA and AAA, with AAA being "superstar" or "above and beyond" status).

WCAG AA is a standard that about 1% of companies manage to achieve (about 97.4% of websites have automatically detectable errors on their home pages! and we can only capture about 40% of accessibility errors automatically!).

So I am more than happy to say that is our yard stick for "when digital products load" if we can then provide controls to make things AAA rated...we will join a handful of companies in the world that have ever achieved that, so I think that is a fair compromise!

So what is next?

So now we have the base design (and after feedback from you!) we will finalise the base design and design outwards from there.

The next thing I would normally design is a "style tile". If you haven't heard of it, it is essentially a single page branding guidelines with core principles demonstrated. There is a great site about style tiles if you want to learn more.

Discussion (41)

Collapse
siddharthshyniben profile image
Siddharth

I'm not sure if I'm missing something obvious here, but what is Inclusivity Hub?

Collapse
inhuofficial profile image
InHuOfficial Author

Oh, that is the company name (InHu is short for Inclusivity Hub).

However in the context and as I have never said it before completely understandable and I will add a note to clarify!

Collapse
siddharthshyniben profile image
Siddharth

I get that, I mean what's the company about?

Thread Thread
inhuofficial profile image
InHuOfficial Author • Edited

Oh, I misunderstood ๐Ÿคฆโ€โ™‚๏ธ

You are the first person I am telling on a public platform as we weren't (and still aren't technically ready, just "position of company" ready now) to talk about it! Exciting!

We are building a resource around disability.

It is a database of:

  • 326 medical conditions / disabilities (info on treatment, related condition info, support, communities etc.)
  • 126 impairments caused by those disabilities (related to a condition)
  • 842 (at the moment) products and services (that help with an impairment)

So for example someone with Cerebral Palsy (Condition) may have poor grip strength (Impairment) and so need a specialised tool for gripping a pen so they can write (Solution).

We have linked all the conditions to related impairments and all the impairments to solutions so they feed through to each other (close to 400,000 relations and we aren't done!).

The site will contain loads of healthy living tips, support information, information about what to expect if you are newly diagnosed with a disability / condition, information for employees (rights, funding, tools available etc.) and information for businesses on employing people with disabilities (law, solutions) and for businesses who want to make their service accessible (in the physical world as well as the digital world, so things like ramps, staff training, remote sign language interpretation via video etc.)!

The idea is to provide a load of information and then provide a platform for businesses to sell products.

Initially they will be disability related products but ultimately we just want an accessible shopping platform where people can sell any product or promote any service.

I hope that makes sense, it seems like a lot!

However we have worked a lot on how to structure data so you can literally say "show me information on Parkinson's disease related to being an employee" and it will tailor the information to your needs!

Or you can say "I am a business looking to employ someone who is Blind" and it will give you legal info as well as products and services that will let that person do their job.

Still at least 6 months from launch but we will soon be making some noise about it...might as well start with you! โค

Thread Thread
siddharthshyniben profile image
Siddharth • Edited

You are the first person I am telling on a public platform

Yay!

That's a lot of stuff on a single site, that means once this launches, this could be the one and only major Hub of information on accesibility.

Also the idea of selling stuff makes it better for the company and others, that's what I call a win-win. I'm just wondering, will the delivery of these software/hardware also be handled by InHu?

Your structuring of data also sounds intresting. Once you can handle data properly, the possibilities are limitless.

Quick question, are you focusing on web accesibility, or general accesibility of digital devices?

Can't wait to see this happen! Wishing you luck ๐Ÿ‘

Thread Thread
inhuofficial profile image
InHuOfficial Author

this could be the one and only major Hub of information on accessibility.

Hehe at least now the name makes sense ๐Ÿ˜‰. Hopefully one day we will expand into other areas on inclusion (hence why we went for that name) but that is at least 5 years away and if it all works!

I'm just wondering, will the delivery of these software/hardware also be handled by InHu?

No we will just be a sales platform initially, getting into logistics and warehousing takes millions. So people order through us, order goes to business, they do their thing.

The only other time we are "in the middle" is if they need alternative communication methods such as an accessible chat system that they do not currently own. But we have been very careful to make sure we aren't included in dispute resolution etc.

Can't wait to see this happen! Wishing you luck ๐Ÿ‘

Thanks a lot! โค

Thread Thread
siddharthshyniben profile image
Siddharth

On the design side of things, your design nicely fits in with the brand values.

You may want to fix the card like others said, or maybe even ditch it like @afif said.

As for the font, I'm suggesting going for a geometric/monospace font, and maybe a custom font for logos and stuff

Collapse
madsstoumann profile image
Mads Stoumann

Business Card? Haven't seen one of those for years ๐Ÿ˜‚
Joke aside, it looks good!
The pattern reminded me of my own deconstructing art post a while ago!

Collapse
inhuofficial profile image
InHuOfficial Author

It was one of those things that I thought about when I was half way through the design as I realised it could be a generative background one day (thanks to your posts!) so that is on the cards!

Business cards may be old hat but they are always handy to have now that we can meet up in person again, you never know who you will bump into and there is something so nice about a physical piece of card!

Plus we will be getting RFID / NFC cards so they are techy!

Collapse
madsstoumann profile image
Mads Stoumann

Cool! ;-)

Collapse
posandu profile image
Posandu

I would like to tell you change the font

Collapse
inhuofficial profile image
InHuOfficial Author

Good point, haven't picked a font yet (in fact, spoilers...going to make our own, don't tell anyone!).

At the moment it is just Century Gothic so that is probably why it doesn't jump out at you (but it is a similar style to the font we will create!)

Great feedback โค

Collapse
posandu profile image
Posandu

I like this font fonts.google.com/specimen/Spartan do you ?

Thread Thread
posandu profile image
Posandu

Or, here's a list for you
fontshop.com/families/century-goth...

Thread Thread
inhuofficial profile image
InHuOfficial Author

A very attractive font, for us it wouldn't work due to the inconsistent height of letters ("t" for example) as that might make things harder to read for people with dyslexia.

We will be designing something similar to fonts.google.com/specimen/Poppins?... and fonts.google.com/specimen/Comforta... but with a wider range of variance and the ability to adjust the axis for italics.

Should be interesting as I have never designed a variable font before!

Thread Thread
sidcraftscode profile image
Siddharth Chaudhary

why don't you try inter
fonts.google.com/specimen/Inter

Thread Thread
inhuofficial profile image
InHuOfficial Author • Edited

I will see if that fits with what we are looking for as a good stop gap option!

You will notice the text in the InHu logo is a custom design, so I think a custom font that incorporates those elements in capital letters is the way we are going to go (the "N" is unique I think!).

Plus, how much fun it will be to learn how to create a variable font (if it is anything like the last time I made a font it will take about 2 days! ๐Ÿคฃ)

Collapse
afif profile image
Temani Afif

You can probably try some overalp. Two layers: one with the empty element (having only the borders) and the other with the filled elements. The first layer without too much elements at the background.
It will either give a cool result or ๐Ÿคฎ

Collapse
inhuofficial profile image
InHuOfficial Author

Worth a go, I will see if I can give that a try later this week as that may be nice and would also work with what I was saying with Mads about generative images.

If it doesn't work for the static content, for a video background having two layers that move at different speeds could be really interesting.

Thanks bud, great suggestion!

Collapse
gginidesign profile image
Gianluca Gini

Hi I created a tool to create and maintain colour palettes.
You can specify how to handle each colour variants and test them for contrast accessibility or simulate visual impairments.

Let me know what you think about it if you can:
geenes.app

Collapse
inhuofficial profile image
InHuOfficial Author

Took a bit of getting used to but it is really clever!

I will play some more but I like the accessibility bit as a quick reference point!

Bookmarked and when I need a palette next I will test drive it to destruction!

Collapse
egilhuber profile image
erica (she/her)

That first design is giving me retro movie theater/roller rink carpet vibes - love it! But you're right, it is pretty busy for the use case!

I really like the energy from that business card example. For a lot of people, accessibility has some boring/tedious/[negative adjective] connotations. However, between the shapes, 'motion', and color scheme, this design is exciting and draws you in!

Collapse
inhuofficial profile image
InHuOfficial Author

Thanks Erica, yeah that first image is defo "saved by the bell, top of the pops in the 80s" vibe!

Hopefully our design is a modern twist on that ๐Ÿคž as I don't want to have to start designing neon tshirts, wearing leg warmers (or is that 70s?) and carrying a boom box! ๐Ÿคฃ

You hit the nail on the head, the idea is to show accessibility doesn't mean boring, hopefully we manage it!

Glad you like it and thanks for all the ego stroking!

Collapse
auroratide profile image
Timothy Foster

It's a cool design! I appreciate the balance between order and chaos (mostly random pattern of shapes, but keeping them in distinct lines).

Tiniest of nitpicks here, wanted to make sure it was intentional: the rectangular shapes on the front and back of the card have different levels of roundedness. More specifically, all the shapes on the front are more rectangular, and all the shapes on the back are more oval.

On the left is a rounded rectangle. On the right is an oval.

Collapse
inhuofficial profile image
InHuOfficial Author

No not a nitpick, actually a really valid point and a mistake on my part!

I resized the items from the front to the back. Illustrator doesn't change the rounding to account for this so that is why they are different.

No shortcuts for me this time it looks like, I will have to recreate the slightly smaller versions (or convert the shapes to static objects so they can resize).

The desired style is the more rectangular style front the front as the buttons, containers etc. on the site will be similar (big rounded corners).

I suppose my other option is to mix and match them so I can use either style. Maybe I will do that!

Loads to think about!

Great spot, it is annoying me now..."thanks" ๐Ÿ˜‰๐Ÿคฃ

Collapse
link2twenty profile image
Andrew Bone

I presume the business card will be animated?

Collapse
inhuofficial profile image
InHuOfficial Author

I wasnโ€™t sure whether to respond in a silly way or not as I wasnโ€™t sure if you thought this was a digital card. ๐Ÿ˜œ

It will be physical cardboard with NFC.

If this was sarcastic then damn, missed the chance to have some fun!

Collapse
link2twenty profile image
Andrew Bone

It was 100% sarcasm, sorry man ๐Ÿ˜…

Thread Thread
inhuofficial profile image
InHuOfficial Author • Edited

Damn...in that case, here is the response I would have given (just won't be as funny now ๐Ÿ˜ฃ)

Of course they will be animated. I have allocated ยฃ150 budget per card so I have bought several small LCD screens and had custom PCBs printed.

We are going to strap two screens back to back so it is animated on each side.

Additionally there will be a light strip around the outside so you can say "hey InHu" and it will light up, connect to the nearest Wi-Fi network, contact out servers, then return a suitable insult that is in-keeping with the "angry accessibility guy" theme.

Of course we have also designed them to work as a cluster, so our whole website will be powered purely by the business cards, true distributed computing.

It means I have to travel the world to ensure I have a CDN in every Country though but overall I think it is a cost effective and wonderful idea.

๐Ÿ˜‰๐Ÿคฃ๐Ÿคฃ

Collapse
moopet profile image
Ben Sinclair

A problem I see with the cards (and I know this is a mockup), is that people's names and emails vary a great deal in length. You'll have to give people short aliases or make the lozenges that contain these details as long as the longest current employee, and hope you don't get anyone else in with a long name, or make the cards inconsistent.

A friend of mine had a name which got truncated on credit cards, for example.

Collapse
inhuofficial profile image
InHuOfficial Author

Great points, I did realise I would have to stack the names (First name, new line, surname) and reduce the font size a bit in certain circumstances.

Saying that I reckon there will only be a couple of people have cards anyway...as Mads said in another comment, they are out-dated!

Who knows, maybe the design needs a rethink...great observations and definitely food for thought!

Collapse
stegriff profile image
Stephen Griffiths

Just a tangential question... how do you pronounce 'InHu'?
Is it 'in-hoo', 'in-huh', or... 'aye-noo'... ? :)

Collapse
inhuofficial profile image
InHuOfficial Author

"In Hue"

But technically it should be "In Huh" as it is short for Inclusivity Hub.

I think it will be come running joke of "In Who?" though (oh no, what have I done saying that out loud!) ๐Ÿคฃ.

Collapse
stegriff profile image
Stephen Griffiths

Don't worry, that would be "in whom" and I'm sure nobody will think of it ๐Ÿ™ƒ๐Ÿ˜‰

Collapse
inhuofficial profile image
InHuOfficial Author

Thanks for reading, I look forward to your feedback, good or bad ๐Ÿ˜ฑ

Collapse
posandu profile image
Posandu

Good

Collapse
bvince77 profile image
bvince77

The first inspiration image reminds me of 90's Saved By The Bell for some reason, but I do like it. The logo and card look great though. I really like the color choices!

Collapse
paulcoder22 profile image
paul-coder-22

Honestly..I like the designs ๐Ÿ”ฅ .Don't know wheather it would worked for business or not...๐Ÿ˜…

Collapse
inhuofficial profile image
InHuOfficial Author

The target client base is half B2C and half B2B.

I think business has moved on a bit from the old โ€œblue, square and boringโ€ corporate designs, most companies want to show they have a bit of personality nowadays so hopefully it isnโ€™t too friendly! ๐Ÿ˜ฌ๐Ÿคž

Who knows, maybe in 6 months I will be introducing our single colour boring design as you are right ๐Ÿคฃ

Collapse
katvoira profile image
Katvoira

I like the design, I like the application of principles... I can't actually spot the logo on the front of the business card without looking for it!

Collapse
inhuofficial profile image
InHuOfficial Author

Ah interesting, hmmm not sure how to make it stand out more...one to have a head scratch on!

Thanks for the feedback, useful!