Simplifying the Website Experience
Over the last few months we quietly ushered in a brand revision for Hidden Depth. As designers we strive for simplicity and this was something we wanted to bring into all aspects of our business, which meant going beyond just aesthetics. Any of my work friends will tell you that word for the last few years has been ‘inoculate’. For me if we spot an issue and tackle it head on, so it never happens again, then we can grow our business smartly. Our brand revision followed the simple process of listing problems from our side, the clients and then inoculating them for the future. This month we launched our redesigned website. I want to highlight a few areas of major change we made to the website.
Responsive web design for everyone screen size
Most responsive websites utilise media queries by exact device width. This means when a new device launches which has a slightly different width than the previous one your media queries don’t play nice. A constant cat and mouse can develop as there are new devices with varying different widths every day. We wanted our website to be stunning no matter what device it is viewed on. Luckily CSS has some amazing features that helped us achieve this goal.
Most of the font sizing, margins, padding and box sizes on the site utilise VW, VH, VMIN and VMAX. These CSS rules allow us to specify sizes based on the width of the users screen. This makes for a much better experience for users.
For example – one user may visit the site on a mobile device and the title font size could be 10vmin (10% of the shortest side of the phone’s browser screen). Now if the same user visits on a smart TV, the font size could still be 10vmin but this time it will measure the shortest width of the TV screen. Meaning a much larger, and suitable, font size for TV. This means should Apple. Samsung, Microsoft, etc. decide to launch a slightly bigger, or smaller, device tomorrow our website will be able to adapt based on the screen size of the new phone, tablet, laptop, desktop, TV, etc.
Designers create more than visuals
Way too often designers showcase cool imagery, animations, graphics, etc. on their websites and then get annoyed when the clients don’t want the designer’s input into something strategic like user experience, marketing, sales, branding, etc. Within Hidden Depth we look at our design work as a way to solve business problems. We don’t just design shiny graphics. We design strategies, plans, experiences, a road to walk for both the user and client.
I knew we needed to imprint our thoughts and mindset on the new website. We spent a lot of time creating layouts that work beautifully without imagery, yet still provide impact and personality. Images are used but very selectively. Content is very much king on this site.
We’re already saving time
Having an image dependent website also creates a lot of work even for a simple thing like publishing a quick blog post. Not every single blog requires an image. Some may be quick announcements, other may be complimented by a great image. The new design gives us the flexibility of doing what is relevant to every single page. We can now publish faster and still have a great looking blog. If we find a suitable image later and want to add it to that blog post, we have that option.
Art is the elimination of the unnecessary.
By becoming much more considerate about the imagery we put into the site, we had to think deeply about what work represents us best and what kind of new work or new clients we want to encourage. Having less imagery makes the images that are used really jump off the page for visitors.
Without images being a must this left little hiding place for poor content. This is a nice challenge for us as on most websites if you throw in a graphic or inspirational image people will associate the feeling of the image to the page they are on. Without the images, we need to provide content that holds people’s attention. This means people who buy into who Hidden Depth is, rather than simply taking us on face value. Our name is after all above what is below the surface.