For today’s post, I created a fictional redesign for the tech comapny Widevine, which I randomnly chose from a pool of business websites. Watch the video below to see the new design:
Compare this to the original, non-edited website:
If you are a bit lazy to find out the differences between the before-and-after of the website, I can point out some:
- The gigantic logo sitting right below the menu was deleted. It served no purpose because there was already a small logo at the left of the logo.
- The typeface was changed to Commissioner (a beautiful open-source font I mentioned in an earlier post on a similar topic). Not vital, but more of a personal preference, because I wanted to explore how hovering over buttons could emphasise the letters (via “flaring” of letters — which makes it more authoritative and stylish).
- Blurring the disgusting client logos by default, unblurring them when the mouse hovers over the image. Do you get the joke? I wanted to blur these somewhat poorly designed logos to make it seem like they were censored.
So what did I learn today?
- CSS image filter rule which allows you to apply cool effects on photos: blur, saturate, brighten, to name a few.
- CSS min-width rule, which lets you define the minimum width of an element — especially useful for mobile pages
- The <hr> tag, a useful tag that separates two pieces of content.
Overall, I had good fun redesigning this website! I know that this isn’t the worst website ever, but as a first attempt, I think it is good enough. I hope to redesign websites which are worse in the future. Who knows? Maybe the owner will chance upon my post!
Featured photo by Ross Findon
Thomas Blogs 