Solutions for Today's Problems
Q. How long does it take a web designer to redesign his own site?
A. 6 months to forever.
Personal creative or design projects are painful by nature. Decisions about what to show and what not show can feel existential without the objective distance of a client’s goals. Add the complications of new technology and it's easy to be paralyzed by indecision.
Why do it? Any design will look dated as trends change. But at some point, you can't ignore that the solution you created to address yesterday's issues isn't the right fit for problems you face today.
1.0 - Responsive
My first iteration of VeryCleverDesign was in 2015. My original motivation was sensing an opportunity moving small businesses out of old Wordpress websites to new responsive ones on website builders that didn't have the maintenance issues associated with Wordpress.
The design goal was to be approachable and straightforward about the costs. I drew on my animation background to design animals as visual anchors for different selling points that I'd identified.
The animals referenced First Nation’s art from the Pacific Northwest and graphic design from Expo 67 and the 76 Olympics that I was exposed to growing up in Montreal.
2.0 - Blogs and Readability
I started a blog in 2017. I felt that I was repeating myself in person and wanted to move some portion of those conversations online. Following queues from the blog page design the layout of other parts of the site was redesigned for better readability.
3.0 Say More With Less
My goal now is to address several selling points and objections with 50% less copy. By 2020, my analytics data showed that nobody was reading most of the website pages.
I also noticed a global trend away from promoting subject matter expertise to answering the question: who are you and what can you do for me?
People are saturated with content. If everyone has similar articles or keyword optimized lists of services how does a potential client differentiate you from the next guy?
No Zoo
I'm attempting to make my points in a more universal way. In my new Hong Kong context, I realized that the associations I had with several animals (like wise owl) were foreign to many people. After trying a ligne claire approach, I settled on simple silhouettes of people and their devices.
Frustration with Old Platform
Squarespace is still a good solution for some client projects but I'm frustrated with its limitations:
- Many client requested features require custom coding that make it impossible for them to self-maintain.
- The CMS doesn’t have great ways to filter content.
- Analytics setup is getting harder with new AJAX templates.
- New features are targeting DIY niches not designers.
- The Developer platform is stagnant.
Overtime you gain experience. The reality of multiple languages, payments types, shipping issues, local taxes, and laws limit solutions designed for a big monolingual market like the US.
A Slow Low Code Approach
Last year, I took the plunge with Webflow on a personal portfolio site. Webflow uses a low code approach that presents a nice interface to Html, CSS scripting, JavaScript animation, and a CMS. It's a nice compromise between coding everything by hand and giving up control to a website builder but it has a steeper learning curve than Squarespace.
I committed to moving the VeryCleverDesign site in January. Between the Hong Kong Protests and Covid 19 keeping family working from home, the project moved in fits and starts.
New Focus on Accessibility
I try to learn something new on each project. I am getting older and my difficulty reading tiny text has sparked interest in accessibility and inclusivity. Microsoft's inclusivity manual made a strong impression on me about how all us may have situational or temporary impairments that are not that different from permanent ones.
On this iteration I focused on these aspects of accessibility:
- Relative Units - A user changing font size won't destroy the layout.
- Semantic HTML - Well-structured content and interactive elements work better for screenreaders.
- Less Color Cues - Showing focus or changes in state without relying on color alone.
- Leaner Layouts - Using Grid and Flexbox to change desktop layouts into linear ones for screenreader and phones.
- Good Color Contrast - Meeting WCAG 2.1 Level AAA standards.
Aiming Higher
One area that's a work in progress is using text in images, an accessibility no no. There's much more that you can implicitly communicate with a rich combination of images and text compared to the short alt text or caption read by screen readers. I am experimenting with layering text elements over images as an alternative to embedded text in banners.
Iterate Again
Unlike other fields I've worked in, websites offer an opportunity to easily get feedback and make improvements. Meeting accessibility standards forces me to balance new considerations and design to a higher standard. It's no different from meeting new code requirements in a building renovation. Understand the rationale behind the requirements, as how you meet them can be open to interpretation. There will be new design and tech issues in the foreseeable future, get in the mindset of anticipating change.
Thanks for reading.