Skip to main content

Website for graphic designer

I 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, keeping her design requirements simple.

Building a website for a graphic designer

I 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, I don't mean to sound negative about the graphic design-web design relationship because I certainly am 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 outside in, from top to bottom.

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, once again 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 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, once again increasing the website load time.

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 a mobile, and sections of the page 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, phones - made by competing manufacturers.

They all render a website differently.

Website design is a complicated business!

Find a balance for large graphics

Whilst we’re talking about download time - did I mention graphics should also be kept to a minimum? It’s preferable to use vector graphics, which are scalable and have fewer colours than a photograph.

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

I advise against hero images too (an image that fills the screen width-ways), but I make allowances (haha). We want to get a nice balance between the vision of a graphic designer and a functional, search engine friendly website.

Graphic design and website design

I can build a fantastic website for a graphic designer, to their requirements, as long as we have good communication.

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

Once we have a good understanding, we could work really well together. I could even design the website but you could provide graphics for certain sections.

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

View more of my web design portfolio