ArtofData Web Design

Vectorization

Pete Lister — Mon, 30 Mar 2026 14:56:51 +0000

Human Logo Conversion to Vector Graphic

By all means, use AI to create your new Logo

But be aware that:

Text – Fonts will not be fonts
Layers and paths will not be organised
Shadows and patterns may combined (Not separate) and are be difficult to replicate
Your logo will not work on different background
You may just get a PNG version that is not scalable

We help with

Vectorizing images
Font identification
Asset layering and naming
File formats
- EPS (industry standard for print)
- SVG (web‑friendly vector)
- PDF (universal vector)
- PNG (transparent background)
- JPG (for general use)
- WebP (Optimised for websites)

Why it’s best for a Human to create your logo as vector graphic

Here’s the simple truth: if you want a logo that actually works in the real world — on vans, uniforms, websites, signage, social media, print, embroidery, you name it — a human‑designed vector logo is the only sensible choice. And there are very real reasons why.

Why a Human Should Create Your Logo as a Vector Graphic

Humans design with intention, not just shapes

A logo isn’t just a picture. It’s:

A business identity
A strategic communication tool
A visual shorthand for trust

A human designer understands context, audience, industry norms, and emotional cues. AI can generate shapes, but it doesn’t think about brand positioning or long‑term usability.

Vector graphics are infinitely scalable

A proper logo must work at:

16px favicon size
3‑metre signage size

Vector formats (SVG, EPS, AI) use mathematical paths, so they scale with zero loss of quality. Raster images (PNG, JPG) blur, pixelate, and fall apart.

A human designer knows how to build clean vector paths, balanced geometry, and consistent proportions.

Professional printing requires vector

Printers, sign makers, embroiderers, and merch suppliers all expect vector files. Without them, you get:

Fuzzy edges
Colour mismatches
Extra fees for “logo redrawing”
Delays and production errors

A human designer ensures the file is production‑ready from day one.

Humans understand brand consistency

A designer builds:

A coherent colour system
- We will provide a pallet of your chosen colours with there colour codes
Typography rules
- Fonts used are documented
Spacing logic
- Space around the elements and fonts are provided
Variants for dark/light backgrounds
A version that works in one colour

Humans create clean, editable source files

AI‑generated “vector logos” often contain:

Broken paths
Messy anchor points
Hidden raster elements
Impossible‑to-edit shapes

We produce a clean, modular file that any future designer can work with.

Humans avoid copyright traps

AI models can accidentally generate:

Derivative designs
Near‑copies of existing logos
Shapes too generic to trademark

A human designers ensure:

Originality
Trademark‑safe concepts
Competitive differentiation

This is critical if you ever want to protect your brand legally.

Humans collaborate — AI doesn’t

A designer can:

Ask questions
Understand your business
Iterate based on feedback
Capture your personality and values

AI can’t have a strategic conversation about your brand’s future.

The bottom line

A logo is a long‑term business asset. A human‑designed vector logo is:

Scalable
Professional
Legally safe
Brand‑aligned
Production‑ready

AI can help with inspiration, but the final logo should be crafted by a human who understands design, branding, and real‑world usage.

Help I’ve lost the original version of my logo!

The post Vectorization appeared first on ArtofData Web Design.

Free Website Design

Pete Lister — Mon, 19 May 2025 15:33:33 +0000

Free Website Design

Free Website Design tools and companies exist. Yes, they do, and they are free, BUT they are not free. These are marketing companies that want your data to cross-sell you and upsell you other products. Free plans are severely limited, and an upgrade will be required. This will involve moving to an expensive contracted subscription plan.

Hidden Costs

These marketing companies are very good at hiding:

Paid upgrade paths
Paid Plugins
Slow hosting
Slow performance
Advertisement removal
Self-promotion hyperlink removal
Ransom tactics (Ensure you own your domain name)
No or little support (e.g. Pay for premium support here)
Sub-domaining

Hosting and maintenance of the website

All websites need hosting and maintenance of which costs money. Free website providers offset these costs with clever schemes.

Many of these platforms, especially social media, show adverts or collect data to generate revenue. You would not want a website that advertises your competitors to your potential customers. Do you really want your customers’ data to be analysed and retargeted by marketing machines?

These companies need to make money with their paid services. One way is a link to the services they charge for in the footer of your free website. Because they are on the footer of your free website, they are on every single page. These links are valuable. Google counts them as votes. The more votes they get, the higher their paid services go in the search engines.

Free domain names

They are not free. The cost of the domain is hidden in the hosting. Be very aware that your domain name needs to be registered in your name or your company name. You don’t want to be held to ransom on a domain name you thought you owned. You may find you have the right to use the domain but don’t own it, and you can’t transfer it.

The disadvantages of one-page websites

Often, free websites are one-page websites. All your keywords are diluted on the one page. Each of your products and services needs individually optimised pages and keywords.

Poor search engine optimisation and lead generation

Free websites are not optimised for search engines, and often images are renamed incorrectly. Lead generation is always a paid add-on. Are you interested in AI lead generation? See this DesignRush article. If you are not a website designer or search engine optimiser, you should concentrate on selling your services and just learn the essentials of populating your website.

Unique Design

The free website companies offer templates. Free websites tend to look the same as each other

Sub domains

In the example below, look where the dot is

yourwebsite.otherwebsite.com This offers no credibility to your company. It also adds to the size of the otherwebsite.com, which is great for them.

Schoolboy errors and shortcuts

I have never seen a free website that has no schoolboy errors or shortcuts.

Philanthropist websites

People with considerable expertise have dedicated hours of free time to these websites. Most often, these belong to charities, educational academies, or encyclopaedias.

The post Free Website Design appeared first on ArtofData Web Design.

Websites for Tradesmen

Pete Lister — Fri, 25 Oct 2024 14:52:09 +0000

Tradesmen Websites

Website design for tradesmen requires a blend of practicality, accessibility, and great looks. Our goal is to create a website that not only showcases your expertise but also attracts and engages potential customers. Here’s a deep dive into what makes our tradesman’s website stand out.

First Impressions Matter

The homepage is the digital storefront; it needs to capture attention instantly. A clean, professional layout with high-quality images of completed projects can create a strong first impression. Ensuring that your website is easy to navigate, with a clear menu and intuitive layout. Visitors should be able to find information without confusion or frustration. We will add animation to your home page to make it more eye catching.

Mobile-Friendly Design

Tradesmen’s websites must be mobile-responsive. Many potential customers will search for services on their smartphones, and a site that doesn’t display properly on a mobile device can lose business. Responsive design ensures that the website adjusts seamlessly to different screen sizes, providing an optimal user experience whether accessed via desktop, tablet, or phone.

Showcase Your Expertise

Highlighting skills and experience is crucial. Include sections for services offered, with detailed descriptions and, if possible, case studies or examples of past work. High-quality photos and even short videos can demonstrate the tradesman’s craftsmanship. A portfolio section can be invaluable, providing tangible proof of skills and previous projects.

We can prove our website for tradesmen work!

Our clients will vouch for us, all our websites are in the top ten on the search engines most are number 1. We have some clients that are national not just local.

Customer Reviews and Testimonials

Word of mouth is powerful. Including customer testimonials and reviews can build trust and credibility. Potential clients are more likely to engage a tradesman who has positive feedback from previous customers. Testimonials / Reviews will be prominently displayed and updated regularly to keep the content fresh and relevant.

Contact Information

Contact details must be easily accessible. Include a clickable phone number, a contact form (not your email address as it may be harvested). Some tradesmen might also benefit from a live chat feature, allowing potential customers to ask questions in real-time. Ensure the address is clear and consider integrating a Google Map for easy directions. Google my business will also help customers find your website.

SEO and Local Search Optimisation

Search Engine Optimisation (SEO) is vital for visibility. Incorporate relevant keywords throughout the site to improve search engine rankings. For tradesmen, local SEO is especially important since most of their business will come from nearby areas. Include location-specific keywords and claim the business on Google My Business to enhance local search presence. We will get you on to the first page of the search engine results page (SERPs).

Clear Calls to Action

Encourage visitors to take action (Click). Whether it’s requesting a quote, scheduling a consultation, or signing up for a newsletter, make sure these calls to action (CTAs) are clear and strategically placed throughout the site. Buttons should stand out visually, using contrasting colours to draw the eye.

Blog and Content Marketing

A blog can help establish you as an authority in your field. Regularly updated content on topics relevant to the services offered can drive traffic to the site and improve SEO. Articles, how-to guides, and industry news can engage visitors and encourage repeat visits. Make your articles geographically specific to the area you serve.

Fast Loading Times

Website speed is crucial. A slow website can deter potential clients. Ensure that your site is optimised for fast loading times. We compress images, using efficient coding practices, and leveraging a good hosting service. We will teach you how to do this or do we will do it for you.

Security and Professionalism

Finally, the website must convey professionalism and trustworthiness. Use a secure connection (HTTPS) to protect visitors’ data. Professional branding, consistent colour schemes, and a clean design can project a reliable image. Avoid clutter and ensure that all links and features work correctly.

Building a website for tradesmen is about balancing functionality with a polished, professional appearance. By focusing on user experience, showcasing expertise, and optimising for local search. We can create you a digital presence that effectively attracts and converts potential clients.

The post Websites for Tradesmen appeared first on ArtofData Web Design.

Website Internal Link Building Explained

Pete Lister — Wed, 17 Jul 2024 09:37:16 +0000

SEO Internal link building explained

Website Internal Link Building Explained – Search engines work by following links to quality pages! Each link is a vote for your website. The more votes you have, the higher you go up the SERPs (Search Engine Results Pages)

So, for example, you have 5 services you sell. Service 1, 2, 3, 4 and 5.

Brilliant 5 well-written pages.

On each page, you link to the 4 other pages, 5 x 4 links, 20 links

Even better, 20 internal links.

But you can do better!

Each service can be added to related categories and sub-categories (Link the categories to each other)

Geographical Locations
People / Teams
Qualifications / Expertise
Sectors (Education / Property / Leisure, etc.)

All your services are carried out in a city, town or village for a customer in a location.

Do you want new customers in these locations?

All your services are provided by People or Teams within your organisation. These people have faces. All your people should be treated as products and have an individual landing page. Don’t dilute them all into one page.

New customers are looking for people and teams with your company’s skills

All your services are completed by people with different skills and qualifications.

New customers are looking for qualified people and teams with these skills

All your services are provided for people who work within certain industry sectors. Medical, education, law, leisure, etc.

Do you want new customers in these sectors?

Five posts, each in four categories

Create the 4 categories and sub-categories and describe them in more than 400 words.
Create the 5 services (Apples and Pears) as posts.
Put the 5 services into the relevant categories.

Each of the five posts can have up to 20 links. Only use the appropriate categories

100 internal links!!

But you can do even more…

Remember the people and teams.

Each member of staff has a position within your organisation. So…
Add a new category called positions / organisational structure. Take care with the permalinks. People get promoted, move on or retire. The ones that leave will remove a link but their position is still there. Also, some people have more than one role within a company.

125 internal links from just 5 posts!!

In conclusion, if your website has 1000 posts, this is 125,000 potential internal links; maybe you have less than 3,000 from your posts at the moment. So is the above worth considering?

Well-organised categories that are linked to each other have the added bonus of making a website far easier to navigate.

Warning! Don’t use “Click Here” or “Read More”

The anchor text of your hyperlink should not say “Click Here”. Search engines read this text, “Click Here” means nothing. Your internal links should be contextual. “Person A has done project B in Location C” is a much better link text it contains important information. Google explains internal linking best practices.

I hope this article on Website Internal Link Building Explained helped you.

The post Website Internal Link Building Explained appeared first on ArtofData Web Design.

The Darkside of Eco Website Design

Katie Parker-Green — Wed, 17 Jan 2024 13:31:37 +0000

Do dark screens use less energy?

Most of the time, yes. Dark mode uses less energy than a traditional white background and the impact can be significant. A Purdue study found that when using auto-brightness the energy saving for dark mode is between 3% and 9%.

Changing from light to dark mode reduces the phone’s power consumption by 42% at 100% screen brightness.

When the brightness level is 50%, switching from light mode to dark mode saves 9% of the battery, and when the brightness level is 30%, the saving is only 3%.

OLED OR LCD?

However, dark mode is not a green choice for every sort of display. It’s important to note that these savings only apply to OLED screens. LCD screens work differently; they are always backlit, even if the screen is black.

This means dark mode has a limited impact when building apps or experiences for devices like Apple TV, Chromecast, or Roku. Opportunities for energy savings in dark mode will increase as older TVs and screens are phased out.

Accessibility?

Dark mode can be a valuable accessibility feature for many users. Some visual impairments can make it difficult to look at or process bright colours. While others with dyslexia or visual processing disorders find it tough to interpret black text on a white background.

The post The Darkside of Eco Website Design appeared first on ArtofData Web Design.

Website Design Woodley Reading

Pete Lister — Fri, 28 Jul 2023 10:16:35 +0000

Website design Woodley Reading

Website design Woodley Reading. New website for Andy @ Bowood. Gardens By Andy (Woodley Reading Gardener)

We were approached by Andy to create a brochure-style website for his new business venture.

He has 40 years of experience in gardening and has built up a successful company. In his retirement, he wanted to work but on smaller projects.

We have created a website highlighting his specialities. A FAQ page has been added to avoid him getting unwanted enquiries.

A contact form with a ReCaptcha to avoid spam. The telephone number is click to dial.

The website is responsive to PC monitors, tablets and smartphones.

Website Delivery

The turnaround for this project was 2 weeks. Andy was great in providing content and images that sped up the process.

Website Platform

The website was created in WordPress with the Elementor Pro page builder.

Elementor Training

Andy does not want to pay for expensive maintenance to make changes to his website. Pete will train Andy how to add end edit content. The difference between a post and and page. We will also show Andy how to add images.

When adding content, we also teach how to add content to attract search engines.

Website Hosting

The website is hosted on our fast WordPress hosting servers in the UK

Website design Woodley Reading

We have several clients in the North East of Reading – Woodley, Hurst and Twyford

The post Website Design Woodley Reading appeared first on ArtofData Web Design.

WooCommerce Elementor order by stock quantity

Pete Lister — Mon, 05 Dec 2022 12:14:55 +0000

Woocommerce Elementor sort order by stock quantity

Using WooCommerce Elementor order products by stock quantity. Also, help with general sorting problems. We also need to sort order stock. Our clients, clients often need large quantities of products for their projects.

If a client can’t afford a bespoke shopping website, we recommend WooCommerce for WordPress. This is compatible with Elementor Pro and Rank Math.

There is no sort-by widget in Elementor Pro.

We need to sort our products! Our customers need to be able to see the most expensive or cheapest products. Here is what we did to solve the problem.

In your child theme’s functions.php, add.

If you don’t have a child theme, read this https://elementor.com/blog/wordpress-child-theme/

// Creating Shortcode for Product Sorting
add_shortcode('wc_sorting','woocommerce_catalog_ordering');

Drag the Shortcode widget onto the Elementor Pro page builder and type [wc_sorting]
The sort by drop-down will appear to your customers.

Remove the Reviews from the dropdown

We have not enabled reviews on our products, so there are no reviews to be sorted by.
WooCommerce Elementor sort order by stock quantity

// Edit WooCommerce dropdown menu item of shop page//
// Options: menu_order, popularity, rating, date, price, price-desc
 
function my_woocommerce_catalog_orderby( $orderby ) {
    unset($orderby["rating"]);
    return $orderby;
}
add_filter( "woocommerce_catalog_orderby", "my_woocommerce_catalog_orderby", 20 );

Woocommerce Sort Order by Stock Values

Some clients need large volumes of our products. Endless scrolling is not helping the customer experience.

Alphabetically sort numerical values Why? 100 before 2

We did install some of the popular sorting plugins but for some reason, they sorted stock alphabetically. 1,100,2,300 This doesn’t help our customers at all.

https://stackoverflow.com/questions/62353002/add-sorting-by-stock-quantity-in-woocommerce-products-sort-by

// Ordering products based on the stock quantity values
function filter_woocommerce_get_catalog_ordering_args( $args, $orderby, $order ) {    
    switch( $orderby ) {
        case 'availability':
            $args['orderby']  = 'meta_value_num';
            $args['order']    = 'DESC';
            $args['meta_key'] = '_stock';
            break;
    }

    return $args;
}
add_filter( 'woocommerce_get_catalog_ordering_args', 'filter_woocommerce_get_catalog_ordering_args', 10, 3 );

// Orderby setting
function filter_orderby( $orderby ) {
    $orderby['availability'] = __( 'Availability', 'woocommerce' );
    return $orderby;
}
add_filter( 'woocommerce_default_catalog_orderby_options', 'filter_orderby', 10, 1 );
add_filter( 'woocommerce_catalog_orderby', 'filter_orderby', 10, 1 );

WooCommerce Order By Price Not Working Correctly

WooCommerce – Sorting problem sorted

When we first added the changes above, we were so happy! Then we realised the results were not in the correct order “What a pain!”. Don’t worry, there is a solution…

WooCommerce > Status > Tools > Product lookup tables – Click Regenerate

https://stackoverflow.com/questions/47056744/woocommerce-order-by-price-not-working-correctly

More help with WooCommerce sorting options

Woocommerce sorting options are pretty well hidden.
Appearance > Customize > WooCommerce > Product Catalogue

I hope this post saves you a lot of time. Please share it. Please also comment and suggest improvements.

Here is a working example of woocommerce elementor sort order by stock quantity on the Used Herman Miller Chairs of product qty sort by on the category page of officechairman.co.uk

The post WooCommerce Elementor order by stock quantity appeared first on ArtofData Web Design.

Saving the environment with used office chairs (Oct 22)

Pete Lister — Wed, 26 Oct 2022 11:00:00 +0000

We bought used Herman Miller Aeron office chairs!

Used Herman Miller Aeron Chairs – Have you seen the price of decent new orthopaedic office chairs?! We needed four genuine, quality chairs, as we have bought budget chairs in the past to our mistake. We’ve recently found out that buying cheap is a false economy, with broken arms, split seams, and dodgy mechanisms. We really needed decent chairs as we sit at our desks 80% of the day. The last thing you need when you leave work is an aching back. We are also aware that sitting in an average chair all day can contribute to future back trouble. Not wanting to be bitten by the same dog twice we investigated. We trawled the internet and asked around. We made a short list of three office chairs: Herman Miller Aeron, the RH400 and the Steelcase Leap. We went with the Herman Miller Aeron as this chair has won many awards and is recommended by most comparison and review websites. We test-drove it at the local department store and found it to be very comfortable. We did not buy immediately, spending over £4,000 on four chairs is a lot.

Used Herman Miller Aeron Chairs

The Herman Miller Aeron Chairs were found at John Lewis and we were just about to place an order when coincidentally our client Ken at the officechairman.co.uk pointed out he had just bought 100 of them and they were in excellent condition. He also stated that as we claim to be an environmentally friendly company, we would be reducing our carbon footprint as these chairs would not have to be manufactured for us. We would be saving on landfill if the chairs were to be disposed of. So, we are now the owners of four Herman Miller Aeron chairs. These are the office chairs that feature in most TV program sets in offices e.g., Mad Men. Believe it or not, they are even featured in the Simpsons. They look cool and are super comfortable. In conclusion, if you are looking for a super comfortable office chair and want to save the environment, buy a second-hand Herman Miller Aeron Office Cha

The post Saving the environment with used office chairs (Oct 22) appeared first on ArtofData Web Design.

Revalyu Website Launch

Pete Lister — Tue, 10 May 2022 11:07:42 +0000

Revalyu Launch 10/05/2022

revalyu has successfully marketed a ground-breaking chemical recycling technology.

This is a ground-breaking and cutting-edge PET recycling method.

Single-use plastic is no longer considered waste, but rather a precious resource that can be efficiently and effectively recycled.

See our brochure website design page

https://www.revalyu.com/

The post Revalyu Website Launch appeared first on ArtofData Web Design.

Woocommerce get variation meta data PHP

Pete Lister — Tue, 13 Jul 2021 11:43:54 +0000

Woocommerce get variation metadata PHP

This code goes in your WordPress child theme’s functions.php or your plugin script.

Assuming you or a plugin has added a custom field to your product variations in WooCommerce; you will probably want this information later e.g., to tell the customer what they bought exactly or to work out the profit on your product so the commission can be paid to your sales force. In our case, we added a “product cost price” as a variation custom field.

Our variation prices vary a gold widget costs more than a plastic widget.

In order to calculate the total cost price of the sale, we have had to multiply the value by the quantity bought. Once we have the value we can add a new meta record to the post order item meta.

PHP to get variation meta and add it to the order item meta

To summarise, when an item is added to the cart, we loop through cart items find the variation id and look up its associated meta data. This data is then stored for later using $item->update_meta_data

MYSQL Query for retrieving custom meta added to the WooCommerce order

add_action( 'woocommerce_checkout_create_order_line_item', 'custom_checkout_create_order_line_item', 20, 4 );

function custom_checkout_create_order_line_item( $item, $cart_item_key, $values, $order ) {

	foreach( WC()->cart->get_cart() as $cart_item ){
    // Get the WC_Product object (instance) 
	$cartqty 		= $cart_item['quantity'];
	$variation_id 		= $cart_item['variation_id'];
	$custom_field_value 	= get_post_meta( $variation_id, 'YOUR CUSTOM FIELD NAME', true );
	$cost_line_total	= $cartqty * $custom_field_value;
}

    if ( ! empty( $custom_field_value ) ){
		$item->update_meta_data( 'cost_line_total', $cost_line_total );
    }
}

SQL For Reporting

We have then queried the post in the myphp database to create a Sales Commission Table in wp-admin. This is just a section of our code.

select DISTINCT
i.order_item_id,
im.meta_key as YOUR CUSTOM FIELD NAME,
im.meta_value as amount

inner join
wp_woocommerce_order_itemmeta as im 
on i.order_item_id = im.order_item_id

where 
p.post_type = 'shop_order'

I hope this post saves developers alot of time

Here are some related articles

https://wordpress.stackexchange.com/questions/354370/woocommerce-display-variation-custom-field-value

https://stackoverflow.com/questions/45256561/woocommerce-3-1-product-variation-meta-data

https://docs.woocommerce.com/document/variable-product/

The post Woocommerce get variation meta data PHP appeared first on ArtofData Web Design.