House of Light

Few projects hit home like this did. I can’t just believe that it was chance that I was invited to collaborate on this project, because it directly relates to my history from birth. I was invited to collaborate on a redesign of this company website called House of Light. At the time, I had no idea what the company did out in the world, I just knew that my fellow Skillcrush student colleague, Tauri StClaire, was in a volunteer team to redesign the website.

A little bit of background on me: I was born legally blind, and at two years old was diagnosed with underdeveloped optic nerve, and would have ended up with a seeing-eye dog if not for my parents bringing me to a miracle service that resorted my sight, though I will note it’s not perfect, as I’m still nearsighted.

Anyway, on to the project. House of Light is a company that offers teaching to blind and low-vision individuals for both education and corporate needs. Nuff said? I was one designer of two on a team of two designers and two developers, and I have to say I really enjoyed the experience overall, and learned a lot through feedback from the rest of the team as well as pointers from the owner of the company herself. My fellow designer, Matt, designed the header and footer, along with the hero image for the homepage. Thanks to his initial design, I was able to copy the brand theme of the website onto future pages that I designed. I now feel tons more comfortable with Figma, whereas before I preferred to use Affinity Photo for designing pages, although the one downside of Affinity is that the font sizes don’t actually translate straight across. Alas, I still feel like my graphic design skills are sadly lacking, especially regarding logos. Something to work on, right? Anyway, back to designing, or rather redesigning this website.

Brand colours by hex were black: #040707, dark blue: #102e96, dark gold: #a58129, white: #ffffff, and medium grey: #8f9194, or by Coolors name Dark Goldenrod, International Klein Blue, Black, White, and Battleship Grey. Part of designing a website is to check for contrast and accesibility, and I found out that Dark Goldenrod did not mesh with the black. I found a similar gold that did, hex #bc429f, or Satin Sheen Gold according to Coolors, and replaced that gold with the original, and then was able to ask the client during one of our meetings if she was ok with that, after explaining why I changed it. She was, and so we that gold replaced the original gold in the brand colours. Original fonts were Apple SD Gothic Neo for main typeface, Hiragino Kaku Gothic for primary typeface, and Avenir for secondary typeface. I’m not entirely sure what’s meant by primary and secondary, but I’m kinda assuming primary is for headings besides the main header, and secondary for the paragraphs. Those fonts were felt by the client/owner to be too educationally professional, and she wanted a more corporate professional feel, so we were asked to change fonts. Also, this was a volunteer team for the redesign, and the owner wanted to save costs, so the fonts had to be free and readily available. The design team, mainly Matt, decided on Cormorant SD for the main header title, Montserrat for all the other headers, and Quicksand for the paragraphs.

Pages that I designed or had a part in designing were the Partners, Careers, Press, Services, Contact, Products, and Blog pages. It was good practice for the design aspect, and good practice for teamwork required in workplace setting, and I learned a lot more than I would have if I had been doing it solo.