Website for a graphic designer

We built this website for a graphic designer friend and colleague, Serena Manda, at Four and Twenty Design.

She is a personal brand designer and visibility consultant. She is brilliant at what she does and has a lot of experience in her field.

Having a close working relationship is beneficial for us both.

Serena prepared the design, layout, fonts, and images for her website and she did a great job of keeping her design requirements simple.

Building a website for a graphic designer

We know designers prefer to have some control of their web design. We demand a design that’s pixel perfect. With websites, there are complications!

Creating a website from a visual that a graphic designer has provided is difficult if the designer doesn’t know how to build a website.

The complications of website design from a graphic design layout

Now, we don't mean to sound negative about the graphic design-web design relationship because we certainly are not. We just need to think about some issues.

Generally, websites are constructed in divs, also known as layers. They are very different from Photoshop's layers, where objects can be moved around by pixel to fit precisely.

The layers that make up a website fit into boxes like pieces of a puzzle. They build a page from the outside in, from top to bottom.

Do you need support designing your website?

Feel confident during your website build - Kelly trains and mentors creatives to build active, ethical, effective websites.

You design the website around your brand and style, whilst Kelly oversees the process to ensure you have the correct structure and excellent user experience.

Together, we build a website that is powerful on search engines. Talk to me.

A div wrapper can encase the layers, creating a boxed or full-width effect. Layers inside the wrapper almost sit on top of one another as your eye moves down the page.

There are many tricks to get these layers to sit in the correct positions, but every trick adds code, which increases the page's download time.

WordPress websites for graphic designers

There is often a requirement for the website to be developed in WordPress, a CMS that enables a graphic designer to update it. Completely reasonable.

You know this will add to the complications, right?

WordPress themes tend to have a set structure and need to be re-coded quite heavily if there are special requirements from the graphic designer.

These 'hacks' add code on top of code, increasing the website load time.

A div wrapper can encase the layers, creating a boxed or full-width effect. Layers inside the wrapper almost sit on top of one another as your eye moves down the page.

There are many tricks to get these layers to sit in the correct positions, but every trick adds code, which increases the page's download time.

WordPress websites for graphic designers

There is a high demand for WordPress websites, a CMS that enables a graphic designer to update it. Completely reasonable.

A Content Management System does add to the complications.

WordPress themes tend to have a set structure and need to be re-coded quite heavily if there are special requirements from the graphic designer.

These 'hacks' add code on top of code, once again increasing the website load time.

Visit website

Responsive website designs

Take into consideration that websites must be responsive, so they look great across all browsers on all devices. The website menu will collapse on mobile, and page sections will stack.

An image will sit next to the text in columns on a desktop. On a mobile, the image will stack above or below the text.

Websites appear very different from desktop to mobile; however, they should keep the design feel and brand look, just like Serena’s.

There are thousands of ways to view a website too. We use multiple browsers - Safari, Chrome, Firefox, Edge (not to mention the legacy versions) - and different devices - TVs, desktops, tablets, and phones - made by competing manufacturers.

They all render a website differently.

Website design is a complicated business!

Responsive website for a graphic designer

Find a balance for large graphics

Whilst we’re talking about download time - let’s talk about keeping graphics to a minimum. It’s preferable to use vector graphics, which are scalable and have fewer colours than a photo.

And if you want to overlay text, do it within the website's programming, not on a photo that will scale down and be illegible.

We advise against hero images, too (an image that fills the screen widthways), but we make allowances. We want to balance the vision of a graphic designer and a functional, search engine friendly website.

Graphic design and website design

With good communication, we can build a fantastic website for a designer precisely to their requirements. Or we can oversee the website design that you create.

We love working with graphic designers. My web consultancy services will help you out when starting the design. We can even help you make an effective website for your clients.

My skills include builds in HTML, so you are not limited to WordPress.