A hobby website does not need an elaborate corporate identity.
It does, however, benefit from a few consistent visual rules.
Without them, every article creates another set of decisions:
- What dimensions should the featured image use?
- Which colours should appear?
- Should the post title be included in the image?
- Should the logo appear?
- Can the same image be used on Pinterest?
- Should screenshots match the other images?
A simple visual system answers those questions in advance. It makes the website more recognisable, reduces repeated design work and allows you to return your attention to creating useful content.
Consistency does not mean making every image identical. It means using appropriate assets for different jobs while keeping them recognisably connected.
The minimum visual system you need
A beginner does not need a detailed brand manual.
A practical starting system contains:
- One primary website logo.
- One simplified square site icon.
- A small colour palette.
- One or two readable typefaces.
- A standard featured-image format.
- Separate social-media formats where needed.
- Rules distinguishing branded illustrations from raw evidence.
- A final desktop, mobile and file-size check.
The exact choices will vary between websites. The important thing is to make a few sensible decisions and then apply them consistently.
Work within the theme you have already chosen
This article assumes you have selected a simple, readable WordPress theme and established a layout that works.
I use GeneratePress Free with some Additional CSS. Once I had created an acceptable layout, I decided it was better to concentrate on content rather than continually changing themes or adding decorative features.
Your visual system should work within the chosen theme rather than trigger another redesign. The wider theme decision is covered in How to Choose a WordPress Theme Without Overthinking It.
Give the logo and site icon separate jobs
My original Action With AI logo was a circular illustrated badge.
It combined several relevant ideas, including AI, research, creativity and progress. However, it also contained numerous small symbols and repeated the site name.
The badge worked better as a large illustration than as a practical website logo. Its detail disappeared when it was reduced to header or favicon size.
The problem was that one graphic was trying to perform too many jobs.
I have now divided the identity into simpler assets.
The primary website logo
The new horizontal wordmark contains:
- Dark forest-green “ACTION.”
- A smaller “WITH.”
- Warm-orange “AI.”
- A forward and upward arrow through the first A.
- A restrained circuit detail.
- A transparent background.
It is intended for the website header, where a horizontal logo uses the available space more effectively than a detailed circular badge.
The site icon
The site icon uses only:
- A stylised capital A.
- The forward and upward arrow.
- One small orange circuit detail.
It contains no full words because they would not remain readable in a browser tab.
A site icon needs a clear silhouette that can still be recognised when displayed at approximately 16 to 48 pixels.
Promotional imagery
Featured images and Pinterest pins can use the Action With AI logo, colours and my portrait without reproducing the complete header arrangement.
The primary logo, site icon and promotional images should look related, but they do not need to be the same graphic squeezed into differently shaped spaces.
Keep colours and typography restrained
The revised logo provides the basis for a limited colour palette:
- Dark forest green.
- Warm orange.
- Cream or warm off-white.
- Dark readable text.
- White where strong contrast is required.
Every image does not need to use these colours in exactly the same proportions.
The shared colours might appear through:
- The logo.
- A headline panel.
- A sign.
- Clothing.
- An arrow.
- A small graphic accent.
This creates recognition without making articles about completely different subjects look artificially identical.
Typography should also remain simple.
A hobby website normally needs:
- A readable body typeface.
- A clear heading style.
- A consistent treatment for Pinterest headlines.
- Sufficient contrast between text and its background.
Typography should support communication rather than become the main attraction.
Why one image could not serve WordPress and Pinterest equally well
I previously used one vertical Pinterest-friendly image for two purposes:
- The Pinterest pin.
- The WordPress featured image.
That was convenient and created an obvious visual connection between the pin and the article.
It also looked acceptable on my mobile phone.
The problem became clear on desktop. The tall image appeared extremely large and pushed the article content further down the screen.
There was also unnecessary duplication. WordPress displayed the post title beside or above the featured image, while the same title appeared inside the image.
I tried reducing the image’s displayed size through CSS, but that did not fully solve the problem.
CSS can change how large an image looks without necessarily changing which file the browser downloads. The more practical solution was to create separate assets for the website and Pinterest.
Use coordinated images with different specifications
My new system gives each format its own dimensions and purpose.
Website featured image
The Action With AI featured-image standard is:
- 1200 × 875 pixels.
- Landscape orientation.
- WebP format.
- Action With AI logo.
- An AI-composited image of me.
- A concept related to the article.
As a default, I no longer need to repeat the complete article title inside the featured image when WordPress displays that title beside it.
Text can still be included when it adds a distinct message or forms an important part of the scene. It should not merely duplicate the adjacent heading.
The 1200 × 875 dimensions are my working standard rather than a universal WordPress requirement. Another theme or content width may suit a different proportion.
Pinterest image
The corresponding Pinterest image uses:
- 1000 × 1500 pixels.
- A 2:3 vertical ratio.
- The same central concept and colours.
- The same portrait reference where appropriate.
- Action With AI branding.
- A clear headline.
The headline is important because the pin must communicate away from the article.
Pinterest recommends a 2:3 ratio and gives 1000 × 1500 pixels as its standard example. It warns that taller proportions may be cut off in the feed. Pinterest’s creative guidance
The two images should look like members of the same family, but the Pinterest image should be recomposed for the vertical space rather than created by cropping the centre from the website image.
Create the coordinated pair with ChatGPT
ChatGPT can be asked to create the featured image and Pinterest pin as a connected pair.
My intended process is:
- Define the visual concept for the article.
- Select the most suitable portrait reference.
- Create the 1200 × 875 website image.
- Create a coordinated 1000 × 1500 Pinterest version.
- Preserve the same subject, colours, portrait and overall idea.
- Recompose the scene for the vertical layout.
- Add a readable headline to the Pinterest version.
- Check the face, wording and background details.
It can be helpful to create the images sequentially within the same conversation. The completed featured image and original portrait can then be used as references for the Pinterest version.
AI-generated text still requires careful checking. It may misspell words, change punctuation or produce inconsistent fonts.
If that happens regularly, the image can be generated without text and the exact Pinterest headline added through a reusable Canva template.
Using your portrait is optional
I use approximately five photographs of myself as references.
This gives Action With AI a recognisable human identity without placing exactly the same portrait in every image.
Different photographs also suit different compositions. I can choose a pose that faces towards the main subject or leaves sufficient room for the Pinterest headline.
For a coordinated image pair, I use the same original portrait as the identity reference. The prompt should ask the image generator to preserve my facial features, apparent age and clothing while adapting the positioning to the two formats.
The original photograph should remain the reference. Repeatedly using an AI-generated version as the source for the next image could gradually change my appearance.
Including the website owner is optional.
It suits Action With AI because many articles contain my experiences and I want the website to have a recognisable human identity.
Another hobby site might create recognition through:
- Original project photography.
- A recurring illustration style.
- A recognisable object or mascot.
- Photographs of the hobby itself.
- A consistent colour and typography system.
The visual identity should suit the subject and the person behind it.
Brand creative images but preserve raw evidence
Not every image inside an article should be forced into the same dimensions or branding treatment.
I divide images into two broad groups.
Branded creative images
These include:
- Featured images.
- Pinterest pins.
- Explanatory illustrations.
- Concept graphics.
- Process diagrams.
- Checklists.
- Images likely to be shared independently.
These can use the Action With AI logo, my portrait and the established colours.
Larger explanatory illustrations inside posts can also use the standard 1200 × 875 format when that shape suits the information.
Raw evidence images
These include:
- WordPress screenshots.
- Search Console results.
- Support replies.
- Test outputs.
- Before-and-after photographs.
- Practical project photographs.
- Recorded measurements.
These should normally retain whichever proportions best communicate the evidence.
A tall mobile screenshot should not be stretched or heavily cropped into a landscape image simply to make it match the featured image.
Evidence may still be:
- Cropped to remove irrelevant areas.
- Annotated to identify an important detail.
- Redacted to protect private information.
- Optimised to reduce file size.
- Captioned to explain what it establishes.
Where possible, I retain an untouched original before creating the edited website copy.
The Action With AI logo does not need to be added to every screenshot or documentary photograph. Branding raw evidence can add clutter and make it appear more promotional.
The rule is simple:
Brand the images created to explain or promote the article. Preserve the authenticity of images that exist to prove what happened.
Check readability and accessibility
Before accepting a visual design, ask:
- Can the headline be read on a phone?
- Is there sufficient contrast between the text and background?
- Is important text too close to the edges?
- Is the logo recognisable at its actual displayed size?
- Does the composition remain understandable on a smaller screen?
- Does the alt text communicate the image’s meaningful content?
- Is a visible caption needed to explain the evidence?
Not every image needs a caption, and alt text should not become a place to repeat search phrases.
The final website copy should also use:
- Dimensions appropriate to its role.
- A descriptive filename.
- WebP where suitable.
- A sensible file size.
- A final desktop and mobile check.
The full image-uploading process forms part of A Simple Publishing Workflow for a Part-Time Hobby Website Owner. The visual-style principle is to use the right asset in the right place.
Optional check: is the featured image slowing the page?
One reason I reconsidered my featured images was a desktop Largest Contentful Paint concern.
Largest Contentful Paint, normally shortened to LCP, measures how long it takes for the largest important element near the top of the page to appear.
That element may be the featured image, but it could also be another image, a block of text or a video.
Google recommends aiming for LCP within 2.5 seconds for at least 75% of page visits. Google’s Core Web Vitals guidance
A large featured image is a possible cause of a poor result, but it should not be blamed without testing. Server response time, caching, file size and image-delivery behaviour can also contribute.
Serving an appropriately sized responsive image can reduce the amount of data downloaded and improve LCP when the image is the largest visible element. Responsive-image performance guidance
A simple before-and-after test can help:
- Record the original image dimensions, file size, appearance and PageSpeed Insights result.
- Note which element PageSpeed identifies as the LCP candidate.
- Replace the image with the new landscape WebP version.
- Clear the relevant website cache.
- Repeat the visual and performance tests.
- Compare the LCP element, timing and desktop presentation.
Performance results can vary, so more than one run may be helpful.
If the improvement is small, another factor may be more important. The cleaner desktop presentation may still justify the image change.
Apply the system gradually
There is no need to replace every old image immediately.
A sensible order is:
- Posts with the most obvious desktop presentation problems.
- Pages where the featured image is identified as the LCP element.
- Important hub and cornerstone content.
- Posts already receiving impressions or visitors.
- Remaining articles during normal maintenance.
Existing Pinterest pins can remain in their vertical format. Only the website featured image needs replacing.
Changing a featured image does not require changing the post URL.
Create your own visual system
A beginner can use the following process:
- Choose one primary website logo.
- Create a simplified site icon.
- Select three or four main colours.
- Choose readable typography.
- Define one website featured-image size.
- Define separate social-media sizes where needed.
- Decide which creative images will carry branding.
- Preserve documentary evidence honestly.
- Optimise images for their intended location.
- Check desktop and mobile presentation.
- Review the system only when a genuine problem appears.
For Action With AI, that translates into a horizontal wordmark, simplified site icon, 1200 × 875 featured images, separate 1000 × 1500 Pinterest pins and a clear distinction between branded illustrations and unbranded evidence.
Another hobby website may choose different dimensions, colours and imagery. The important thing is to establish a system appropriate to that website and apply it consistently.
A hobby website does not need every image to look identical or carry the visual identity of a large corporation.
It needs enough consistency that readers recognise it, each image performs its intended job and every new post does not require a completely new design process.
Once those rules are established, return your attention to creating useful content.