this is a collaborative post: concepts by Christina Chan. words by josh martinez.
I launched the new version of my blog, be the future, earlier this year. My friend Christina is a marketing and design consultant. She also owns her own business, Dyme Designs. About a year ago, I asked her if she would be willing to design a web presence for me. I’m grateful that she accepted! I loved the process that she took me through to get this website where it is today. I knew early on that the journey she was guiding me along was pretty special. She and I created this guide based on our work together.
We hope this helps you imagine a website for your organization or project.
who are you? (focus on the client)
A great website is a reflection of the person or organization it represents. We’ll break this section down into two categories: goals and technical skill.
Goals: Who will this website represent? How do they view and interact with the world? How do they want others to see them?
Technical skill: How tech-savvy is your client? How comfortable are they with the daily management of the site’s technical needs? Does their level of familiarity stop past sending and receiving emails? You’ll need to consider their comfort level for factors like how you design and where you host the site. Besides the client’s skill level, you’ll also need to review their design needs and budget.
Christina first presents a variety of hosting options for the client to review. This depends on the type of site they need. Most businesses will use a platform like Shopify, WordPress, Wix, and others. Shopify is a great choice for businesses because it has an eCommerce platform built in. WordPress is open source and has a huge variety of options for customization. Wix has a word processor-like design interface that is easy to use.
What’s important is to find a setup that the client feels comfortable with. You may need to make minor tweaks based on the next area, your future audience.
for be the future
I’m passionate about my work and the change I want to help bring to the world. I started writing here to turn the frustrations I felt at my job into something more hopeful. I wanted a site that showed I was serious and earnest about these ideas, but I could be a little goofy too. My little nephew said to me earlier this year, “stop being silly!” but I can’t help it!
I coded my own websites back when I was a kid, but my web design self-education ended around the time CSS augmented HTML as the language of the internet. It’s been a long time since I had the know-how or patience to design my own website. Christina created a website that I could drop an essay into with minimal formatting. It took me a few posts to learn the process, but it’s become very easy to maintain.
Who do you want to reach? (focus on the audience)
Now that we know who the client is, we can talk about who they want to reach. What does the client want their visitors to experience? How easy will it be for them to visit the site and get what it is they want out of it?
Christina wants the website to be a virtual experience for the users or visitors of a site. Her goal for any website she creates is to invite users/visitors on a journey to share space together. A community engagement strategy helps create a relationship between the client and audience. What are the user’s or visitor’s touch points? Journey mapping can visualize how a user clicks to the place on your site they want to go. What do they need to do to learn more about an initiative, buy something, or talk to someone?
Some websites cater to audience members with non-overlapping needs. Consider a non-profit website visited by people who need their services as well as donors. Now consider if that website was only designed with donors in mind. People in need of their services might have a hard time finding the page they need.
for be the future
I struggled at first to visualize my audience. I realized that what I wanted to do was write something that I would read. This helps me balance authenticity with subject matter expertise. The blog is the largest part of my site, and I write a new post every week. I knew I wanted my work to be front and center without feeling overwhelming. Christina remembers that I wanted a design that wasn’t too visually heavy. I wanted people to be drawn in by and connect with the words. She found a theme that we could customize to find the right balance between images and the text. By breaking up the text with pictures, we created a more visual and accessible website. Christina says, “as someone with sensitive eyes, reading too much text can be tiring. Having visuals and headlines to break text up for me helps me read.”
Christina divided the site into categories (working; essay; personal; start the future; walkthroughs). The categories help narrow down my archive of posts to what is relevant to the reader. Design-wise, organizing my front page into tiles made my essays visual bites that the reader can choose from.
accessibility is key
This is so important that it’s worth its own section. Guillermo Robles, who is blind, sued Domino’s Pizza because he could not use their site or app to order a pizza. This past June, a federal court ruled that their website violated the americans with disabilities act (ADA). Of the top million websites, a shameful 1 percent are accessible to people who use screen readers.
There are several accessibility checkers available online that can test your website’s accessibility (we used wA11y for my site). WordPress also offers plugins that allows users to change your site design on the fly (we used WP Accessibility Helper). Users can adjust the color contrast, text size, or even swap out fonts to be easier to read for people with dyslexia.
Language accessibility is another important option. Many platforms offer widgets that allow users to change the display language (we used GTranslate). Machine translations from services like google translate are great first steps. For even better accuracy, invest in a version of your website translated by a human.
for be the future
Accessibility was one of the first major areas we agreed on from the start. I wanted everyone to be able to read and understand my ideas. Christina installed in WordPress an accessibility checker and an accessibility helper. It’s the small icon of a person in the upper-right corner of the site. She installed a translation widget that even translates the alt text I write on each image. I also write in plain language with a goal of a 6th grade reading level.
messaging vs. branding
If branding is a reflection of who you are, messaging is the words you use to communicate. Some cultures incorporate oral storytelling as a way of communicating. If that resonates with you, it will also work best for audiences who respond to that style. This is why it’s so important to know yourself and your audience first. Artists use different forms of storytelling to communicate their art.
long term planning
Building a website takes time. You want to create a website that is durable and responsive to the needs of the client. Learn how the client wants to grow so they can expand without redesigning their entire site. For instance, Wix is easy for a beginner to use, but its functionality is limited. Wix offers fewer plugins compared to WordPress, which makes the design less flexible. Their accessibility-supportive plugin alone costs more than $200 per year.
for be the future
Christina and I wanted a site that I could grow into. Words were the only thing that mattered to me when I started my blog. My first design reflected that: long essays of small text cascading in the order that I wrote them. I knew I needed more. My site now contains an about page, a portfolio, and page for my resumé. I’ll soon expand it to include a presence for my consulting business (for now, you can email me 😸).
It took about two months for Christina to complete the basic redesign for my site. This included time to review what I wanted, outline a budget, and present a series of options for me to choose from. I appreciated the collaborative process we used to get be the future where it is today.