Consulting Website Design Patterns2021-01-27
Here's a small overview of my current repertoire of design patterns for product or consulting websites. They are a bit more abstract than concrete implementations, and are goal-focused. Not just a bar with links, or a box with a button, but elements which are there to do their intended job.
Serving The Audience
This is not a pattern, but an important point of guidance for me. I want the products I create, and the sites I build to serve the people who visit them and help them be awesome.
I also want the sites to be respectful of the visitor's attention and original intent. This does not mean that education is off the table, but that I don't want to impose what I think might be "a better idea" on people who gift me their time and attention. At least not without agreeing on it first. Consent is essential for a respectful interaction.
Bottom CTA Box
At the end of the article, after the reader has gotten what they came for, is the classical box with a text which describes benefits for the visitor if they subscribe to a newsletter. Usually, the form is built-in.
Instead of adding a heavy-weight box with a form, you instead include an easily digestible buton, which triggers a modal to be createad. Can make the site feel lighter, and easier to read. Good for people who don't have much attention to spare, or prefer lightweight designs.
At the end of a site, there's a list of possibly interesting articles for the visitor, to continue reading. This works if they are in a reading-more context. (not looking to fix something and get on to their original goal)
Next article, previous article
Usually at the bottom of an article, similar to a related articles list, but limited to articles which are next in a series, or were written before/after the one the visitor is reading.
Idea: Read next: hand-picked recommendation
Like the previous entry, but not limited to arbitrary temporary ordering.
In-Line CTA Box
Usually slim and lightweight. A CTA which is barely one line, and does not distract from the reading experience. It appears before the reader forms an intent to leave the site, and might fit the context.
see more resources: CTA button/link
Instead of a subscription form, you offer more resources to the visitor, related to their general intent. This can be a link or a buton - "read the complete guide to X". Basically, this is related articles, but the list is longer and "hidden" on another site.
Can help visitors navigate to content which interests them. Instead of needing to organize knowledge in form of article lists (TODO: information design? information architecture?) you make it accessible interactively and on demand.
The only problem is, that it takes initiative and thinking to formulate a search query.
Requires interaction, and can be a source for content ideas from visitors, if the search queries are aggregated anonymously.
Visibly the next action to take for folks, which they can see when they first visit the site, and scroll up to after reading.
Also good for returning visitors.
A way to show visitors an overview of all available topics, if the link footer is large. Can invite to browse.
Can contain product promotions, CTA boxes or links. Often ignored in my ecperience.
Table of content
Useful for longer articles. Can make it easier to navigate to relevant parts of a big piece of content.
Useful to help people connect to the person behind the site, and establish a less anonymous connection. Usually features the person behind the business.
An overview of the site for returning or interested visitors. Can be navigated to over a brand link or link footer/header.
Suggests useful reosurces, links or relevant things. Like info boxes in books, which are not part of the main text.
A link collection for interested readers. Can be a valuable entry in the header. Can invite to browse around, explore and turn up interest for the rest of the site. Curiosity for the topic in general and time is required.
A series of articles, not published on a page, guiding the initial visitor towards a learning goal. Good funnel towards the mailing list. A type of friend catcher, like cheatsheets, content upgrades
No navigational elements. Only one action to take. Useful to funnel towards newsletter subscriptions, email course signups or product sales.
Long-form is popular right now. Can be short and sweet as well.
Make sure to check out article X, or consider joining course Y. Less out-of-place compared to CTA boxes which stand out from the intent of reading an article.
Those CTAs should be absolutely in-sync with the intent of the person reading it.
Quotes from former clients, or engaged audience members. Can be good to spark interest and confidence around CTAs.
Can be presented as gallery, cards, carousel...
Tags / Categories
As words, icons or images related to the categories. Can invite the visitor to dig deeper into content about a relevant topic.
Topic Aggregation Sites
Articles related ot a certain category. See above.
Those damn things need to die die die. They appear when your mouse starts moving out of the window, and try to interrupt your intention.
Maybe efficient. Really annoying.
Constructed from site metadata, to make an article more shareable - a good description and well-formatted image can help.
Often seen in the header and can be used for social sharing. Provide a little "wow" experience when opening the article.
Can convey information about the person behind the writing. Can strengthen trust, provide credibility or establish a personal brand.
People love seeing faces! This can include the name at the top of the article, a short bio box at the bottom, author portraits.
A publishing date or "last reviewed" timestamp. Some people need to have them, some people leave them out by choice.
Has this article helped you? Can be a yes or no, or a related question which can engage.
This is more often seen in FAQ help sections, or on news sites. Where people engage out of gratitude or for entertainment.
Can entail an automation, and a query for more detailed feedback. Or to start a conversation.
Can be used for support, or to engage qualified visitors in 1:1 conversation. Has been widely used, I find it plain distracting personally.
Chat bots come in play here, if you want to extra-annoy your visitors.
Another way for people to get updates, but this can not turn into a 1:1 communication channel as mailing lists/email can.
A recent-first feed of new articles, can be a good place for people to check out new stuff on a whim.
Social share icons
Can make the effort to share your site lower. A valid CTA.
Form or simple email link. If you want to give people an easy way to reach out. An intent has had to be formed.
A selection of past projects, achievements and customers. Kinda like social proof.
A mix of educational content and social proof.
Can help to break up the page and make it more readable. Or rather, scannable.
Illustartions can help here too.
Products / Courses
A list of paid or commitment-requiring services and offers.
I hardly see these anymore. Sometimes it's a link to another community where a discussion is happening, or ready to happen.
Kinda legalese. People expect to see it, probably there's a US law reason for this.
More Information for CTA
can be relevant for a signup. Long-form letter from the person behind the project/site, adressing a not-yet convinced reader. Great thing
Of a presentation or event you did. Maybe of a personal address. Can be very engaging, and an unusual way to present information
Effective if you expect people to listen to your content instead of reading it. Fancy stuff.
Site Title / Brand
Can be relevant to site icon. Usually in upper left corner, for people to click to get to the homepage and identify what size they are on.
Not to be confused with the title of the browser window?
Attributions and Acknowledgement
A nice way to say thanks to people who helped shape a piece of content.
"Bye" fron author
Can put a personal note on a site's content.
Can be part of a multi-channel marketing strategy. Maybe YouTube or other content on an established platform. Not strictly part of your site, but related to it.
Can warrant a podcast page.