Designing a Website to Be More Than Just Innovative, Cool, and Generally Awesome

Written by Luke

July 23, 2023

Well, it has been an enormous amount of time since we last completely redesigned our website. An unforgivable two and half months. So, in true /counter fashion I've spent this week feverishly drawing up designs and translating my abstract ideas into achievable technical jargon through William. Oh what joy.

Our goals for this update were more tangible beyond the usual "I want this to look cooler" mindset we've run with for the last three website versions. This time, our redesign was motivated by the need for our site to have a functioning sales pipeline that lead interested parties to get in touch with us rather than just have a casual browse around our portfolio.

What this means from a technical perspective is infusing our designs with links to other pages on our site that funnel the user to content they will be interested in as well as opportunities to get in touch with us. Our disparate pages needed to become an interconnected network of content all working to drive use of the site beyond a glance and provide us with contact info of potential clients.

William mocked up this concept of how we would interconnect these pages through in line elements and buttons. I utilized it as a roadmap to breakdown the goals of each page and design the layout to accommodate so many buttons and links to other pages.

The biggest takeaway this time has been how website design is really a balance between conventional iconography and eye-catching uniqueness. And, the biggest hurdle that lead me to that conclusion was figuring out the button to be used across the site. The button we landed on was somewhat unconventional, but minor changes and some testing with outside parties lead us to the current design.

On the landing page, I made sure the learn more button read as a button through a couple key changes. For one, I made the contact button in the navigation bar be the same button. My thinking is that its proximity to a standard, clickable navigation bar informs the user that this odd looking entity is also clickable. Dually, I changed course from text like "Who are we?" or "Who's we?" in favor of CTA phrases we are used to seeing like "Learn More" that naturally entice someone to click.

I utilized this same tactic on our personal profiles as the buttons for these are pushing the envelope a little bit more. They are no longer contrasting the background color and therefore lack a clear recognizable rectangle to click on. Thus, I used recognizable CTA phrases to catch the average user's eye. Additionally, this is where the arrowed end of the button comes in which gives the button direction. A forward momentum which says to the user that it might lead somewhere.

Overall, our largest hurdle is still translating these design concepts to the technical execution. Our goal with this revision was for me to use figma and skip a lot of the tedious fiddling that plagues William with these projects. However, with this tight two week design + implementation crunch we have put on ourselves that never really came to fruition. Ultimately, our next step in designing for web will be me getting comfortable with figma. Until then, William will suffer.

© 2024 Counter LLC. All rights reserved.