DEV Community

Discussion on: What was your win this week?

View post
Collapse
 
grahamthedev profile image
GrahamTheDev • • Edited

Finally started on the front end of InHu, just done the design for the website to match the base branding I wrote about earlier in the week.

Still needs a lot of polish, but overall we are excited to finally be in a position to start talking about what we have been up to these last few months (well, start sharing some draft ideas at least!)!

Website Design Draft

InHu website, rounded corners on information sections and a purple, pink and white colour scheme. Side navigation with the InHu logo at the top. At the top of the page there are 5 round buttons with icons inside. Those buttons are "accessibility settings","Keyboard shortcut hints(off)", "Dark mode", "your InHu" and "site search". For the main content there is a larger column to the left and a smaller column to the right as an aside. There is a large purple box at the top of the left column with 4 buttons to guide people to relevant information depending on whether they are an individual, employee, employer or business. In the aside there is a quick search box and below that there is a section dedicated to the "digital accessibility hub", a space for digital marketers and software / website developers. Finally as a background to the aside there is a very faint set of lines and circles at 45 degrees that mirrors the company branding

Base Branding Draft

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.

White background with 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