DEV Community

Adam Crockett
Adam Crockett

Posted on

I see a fresh website and I want it painted black.

My portfolio website is coming on nicely, but one thing that bothers me. I swear I used to be able to design before I learned about good accessibility practices. You see I like colour, and I know of some color pallettes that aren't too bad for getting a AA or even triple AAA rating. Sounds good so far, "I could splash a little yellow here, a little blue there, oh that pink looks nice.. ". I have just broken a rule. Not too many colours!

Okay let's try this again, make the colors more muted, use 3 colors max, keep things consistent. Oh it looks like IV just made a black and white website...

I find that my websites always just end up as black and white generic box stacks. I want to use black, white, brown and copper colours. Then I need to decide how much ratio of each colour, as a big slab of brown could look like 💩.

Okay so perhaps I have a way forward, wait isn't copper the colour of 3rd place medals.. oh choosing a scheme is so hard, even with a decent pallette, making. The rules that's the hardest bit.

I have no idea how to make rules for my colours and if there is a way to look modern but break out of the generic hero image and stacks of boxy content, or if my theme should be dark or light.

Discussion (13)

Collapse
amandaiaria profile image
Amanda Iaria

I wonder.

If the colors are just accents (there's that splash :D) and don't convey important information. Maybe they're just colorful borders.

This is how I feel about boxy content. boxes ... everywhere... I would love some more fluidity to layouts.

Collapse
adam_cyclones profile image
Adam Crockett Author

Perhaps that's why I don't like boxed in content anymore, maybe interesting layout is the way forward? I kind off like stuff that is off grid but somewhat still in a grid. Also movie posters are a good example of this sort of flow.

I am conscious that users read websites in F shapes so there's that too.

Collapse
codelitically_incorrect profile image
codelitically_incorrect

Interesting. I've been exploring this route lately and have not come across any unique inspirations. Got any links?

Thread Thread
adam_cyclones profile image
Adam Crockett Author

Maybe this?

images.app.goo.gl/Q9aCJKCuhtHAQyYK7

Diagnoal or hexigon based grid systems, that sort of thing. Something challenging.

Thread Thread
adam_cyclones profile image
Adam Crockett Author
Thread Thread
adam_cyclones profile image
Adam Crockett Author

All of these

bashooka.com/inspiration/25-unusua...

I think the trick is aspect ratio.

16:9
9:24
1:1

All nice ratios that look pleasing somehow.

Collapse
zcwe profile image
Zachary Weaver

The problem I feel we all face when trying to create a personal website for ourselves.

Collapse
adam_cyclones profile image
Adam Crockett Author

Absolutely, it's nice to put it down in words. 😀

Collapse
andrebclark profile image
Andre • Edited

This article helped me get past this feeling by providing a useful framework for using color in UI:
learnui.design/blog/color-in-ui-de...

hope that helps.

Collapse
adam_cyclones profile image
Adam Crockett Author

I just wanted to say a huge thank you, there are great posts linked to this as well.

Collapse
adam_cyclones profile image
Adam Crockett Author

Thanks Andre I will check it out tonight.

Collapse
integerman profile image
Matt Eland

Well, now you've got paint it black stuck in my head.

Collapse
adam_cyclones profile image
Adam Crockett Author

"I see a red door".. damn I'm thinking about it again now too.