Grayscale & Color Websites

The first image is my grayscale photography/portfolio style website "Snapshot," the second is an interior design blog "Beautiful Decor" as seen by a non-colorblind person. The third and fourth images are the same site as viewed by a red-blind person, and lastly by a blue-blind person.

My website "Beautiful Decor" is a mockup of an interior design blog that features inspiring designs each day, and it is designed with a slight texture and earth-tone color scheme. I tried to achieve some sharp color contrasts in the site so that colorblind and non-colorblind users alike are able to easily navigate the page. The site name and links are clearly set apart in a color shape and the type is larger to show that it is more important.

My grayscale website "Snapshot" is a portfolio/business website that has a bit of a photo showcase on the homepage to interest viewers. The header demonstrates hierarchy, making the title stand out and then the links appear second most important below that. The navigation links are highlighted by the ribbon-like stripes behind them in a contrasting shade.

Both my grayscale and color websites are made in a minimal fashion and look more contemporary. I think that less text on webpages makes for a much cleaner and more visually calm site, and the viewer is not overwhelmed by so much text and information that they get confused. I added some textural elements and subtle hints of color to add some interest, but I kept them as minimal as possible so they didn't create a color "vibration" effect, as some bright colors tend to do when placed next to each other.