Build Design Systems With Penpot Components
Penpot's new component system for building scalable design systems, emphasizing designer-developer collaboration.

UX Planet — Medium | Guy Ligertwood
Recently I did a writing for the web course with Open 2 Study. Here are my notes on what to consider before you start writing content for your website.
Everyone wants a conversation. They want inspiration. Inspire people with your website. Don’t just interrupt but interact.
(Kevin Roberts)
There are lots of things to consider before you start creating your website. Here are the main elements that will help you create a useful and accessible website for you users.
Start by identifying who your users are. You can then find out what your users and business want to get out of the website.
The visual design and the content communicate the brand to the user of your website. The brand is first defined so the visual design and the content can follow your brand guidelines.
Here you need to set out the hierarchy of information for your website. You need to structure your content so people can navigate in a usable manner. Information architecture connects people to your content.
User + Context + Content = Information Architecture
This focuses on the behaviour of your device or product. It sets out where all the elements will be on your website. A wireframe works well to flesh this out.
Interaction design is the creation of a dialogue between a person and a designer artifcact- a product, service, or system.
This is a step up from the wireframe. It adds colours, typography, images and style to your website.
Problems with visual design can turn users off so quickly that they never discover all the smart choices you made with navigation or interaction design.
(Jess James Garrett)
The content is crucial to the usability of your website. Content covers a range of things, but is usually anything that can be consumed and shared. It’s not only the words and includes what you see below.
Image from Visionary Marketing
There is nothing to writing, all you do is sit down at a typewriter and bleed.
(Ernest Hemingway)
They scan and they snack. Jakob Nielson’s research study found that people scan in an F-shaped pattern reading down the page.
Users normally start top left of the page, then read along a main heading. They then scan down the left hand side of the page looking for something interesting. Once found they read across from left to right and then scan down the left had side. This then forms the F-shaped pattern of web reading.
Make sure you consider this reading pattern when putting together your content. For a more detailed look at the F-shaped pattern Nick Babich has a great article on it.
You need to put yourself in the shoes of your users, to be able to create content that will be useful for them.
You need to find out about your users: What age are they? Where do they live? How old are they? What are the education levels of your users? What do they want to get out of your website?
You need to think about access issues: Do your users have slow internet or no internet at all? Do your users your have disabilities that you need to consider.
Create personas to bring your users to life: Personas give a face to the people using your site.
Personas are fictional, generalised characters that encompass the various needs, goals, and observed behaviour patterns among your real and potential customers. They help you understand your customers better.
It’s up to you how many details you add to your personas. An image is useful so the persona can be brought to life for the team.
You need to find out lots of information about your users to create content that they’re going to find useful.
From all of this you will find out what people like and dislike about your website. You will also hopefully be able to find out what your website is missing.
The context of use is the conditions under which a product is used in a normal everyday situation.
People often look no further than the above. It’s important you look a bit deeper and dig into the following:
To find out about the context of use, you’ll need to speak to your users to find out when they’re using your site. You can do this while doing usability testing, prototype testing, surveys or workshops.
It’s important you don’t make assumptions when thinking about the context of use. If someone’s on a mobile phone it doesn’t necessarily mean that they’re on the move, they could be sitting on their sofa at home.
You know the users for your website, what they need and their context of use. Now you need to find out who your stakeholders are. This should be pretty clear but people can be left out.
They could be:
Stakeholder mapping is an important step in understanding who your key stakeholders are. You need to get the necessary people onboard with what you’re doing. This is a great way to make sure that no stakeholder is left out of the process.
Stakeholders for a ski resort lift company
Questions you need to ask your stakeholders:
You need to balance the user needs and the business needs. Both groups needs to be catered for to get the best result.
You know the users and what they want from your website. You also know the stakeholders and their goals for the website.
Now before you start writing for your website you to need find out the purpose of the content. To make your website useful every piece of content needs to have a purpose.
Your content needs to:
Use your personas to make sure that you’re writing content that’s right for your users. This’ll make sure that your content has the correct purpose.
Words transform. Speak only with a good purpose.
(Robert G. Allen)
It’s really important that you think about your users that may have accessibility issues.
This includes the following:
Vision impairment is defined as a limitation of one or more functions of the eye (or visual system).
The most common vision impairments affect:
Motor impairment is the partial or total loss of function of a body part, usually a limb or limbs. This may result in muscle weakness, poor stamina, lack of muscle control, or total paralysis. Motor impairment is often evident in neurological conditions such a cerebral palsy, Parkinson’s disease, stroke and multiple sclerosis (Neuromodulation).
Dyslexia (also known as reading disorder) is characterised by trouble with reading despite normal intelligence. Different people are affected to varying degrees. Problems may include difficulties in spelling words, reading quickly, writing words, “sounding out” words in the head, pronouncing words when reading aloud and understanding what one reads (Wikipedia).
Colour blindness occurs when you are unable to see colours in a normal way. Most commonly, colour blindness (also known as colour deficiency) happens when someone cannot distinguish between certain colours, usually between greens and reds, and occasionally blues (American Academy of Opthalmology).
A few types of colour blindness
There are a few ways you can improve your content for people with accessibility issues:
The main purpose of alt text is to describe images to people when they’re not compatible and can’t be seen. It gives a description of what they should see on the page.
A screen reader is for people with visual impairment who want to use your websites. It’s a software application that enables people with severe visual impairments to use a computer (Nomensa).
Screen readers convert digital text into synthesised speech (the artificial production of human speech). They allow users to hear content and navigate with the keyboard. The technology helps people who are blind or who have low vision to use information technology with the same level of independence and privacy as anyone else (Webaim).
Only do this if the image is very dark, otherwise it can be tough to see for certain people.
Having a transcript means people can read the content if they have hearing problems.
When you’re writing draft content in Microsoft Word there’s an accessibility checker which can check your contents accessibility.
Microsoft Word
A search engine is a web-based tool that enables users to locate information on the world wide web. Google, Bing and Yahoo are current popular examples of search engines.
When creating your content you want to optimise it for search engines with good keywords. Your SEO keywords are the words and phrases in your web content that make it possible for people to find your site via search engines. A website that is well optimised for search engines “speaks the same language” as its visitors. Having the correct keywords will make it easier for users to find your website.
SEO is important but don’t spend too much time focused on it. The needs of the user are the most important factors. Focus on making the content useful, accessible, accurate and based on the users needs.
Focus on making the content useful, accessible, accurate and based on the users needs.
Learn SEO basics with this 1 hour tutorial with Udemy
50+ articles on writing for the web by the Nielson Norman Group.
Thanks to John Duncan for the proofread 👍
If you enjoyed this, have a read of my other UX articles:
New to UX Design? Feeling Overwhelmed?
UX Writing: How to do it like Google with this powerful checklist
24 Ways to Look Like an Awesome UX Designer
51 Research Terms You Need to Know as a UX Designer
53 Tech Terms You Need to Know as a UX Designer
How to become a UX Designer at 40 with no digital or design experience
Please click the 💚️ below and leave a comment to help others find it. Thanks for reading.
How To Be ‘Really Well Prepared’ To Write Great Web Content was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.
AI-driven updates, curated by humans and hand-edited for the Prototypr community