TOOLS USED: WORDPRESS / ILLUSTRATOR / PHOTOSHOP / FIGMA
With a growing client base, and future goals to expand, All Spiced needed a new website that suited the level of professionalism and experience that they provide in their services.
A crucial part of this re-design project was to outline a clear creative brief for the website. We needed to figure who All Spiced Catering is and what sets them apart—and how to portray this in the design and voice of the website.
A great first step is to organize a designer-to-client brainstorming session. We used this time to discuss things like their competition, target market, business goals, and more. Once all ideas are on the table, I like to input everything into a Google Doc, then tweak it into my proposed strategy.
All Spiced’s existing website contained a large amount of content, but it was not clearly laid out for the user, and some key information was missing.
One of the next steps in my re-design process was to look in depth at their existing content and come up with a page structure and user flow that made more sense. This step also helped us to determine where content was missing, allowing the client to have ample to time gather and create this content before the website build began.
My next step was to nail down the main design details of the website based on our conclusions from the brainstorming process. For typography, I created two different style options for the client based on the voice for the website, and inspired by other websites that we liked.
All Spiced already had a logo that uses warm tones pulled from the natural colouring of food. I wanted to work with this and enhance their existing branding, so I selected a palette that incorporated the three colours from the All Spiced logo, as well as 4 additional accent colours using lighter, darker, and desaturated variations of their branding colours.
Before designing anything, I needed to compile a library of photo assets to use in my design. While the client was able to provide some beautiful professional photography, it was limited in quantity and variety. To supplement this, I searched through the amazing library of royalty-free photos on Unsplash.
I aimed to find photos that had warm tones and matched the inviting, warm feel that we had decided upon for the website. Using appealing stock images is a great way to elevate a design, as well as pose as placeholders until the client is able to provide more professional photos.
Part of my website content re-structure strategy was to group some of the content into clear categories. This would provide a more logical separation of information, and ultimately be less confusing for website users. The use of icons can be a clean and user-friendly way to add visualization to some of the new site structure.
Using Adobe Illustrator, I created a custom set of icons by re-styling some icons that I already owned, and drawing new ones where necessary. Consistent iconography can really pull everything together, and make a website look more professional and branded.
With the strategy, site structure, design details and assets figured out, it was time to start seeing the design in action. Using Figma, I created mock-ups of each page to show the client some design and layout options.
With mock-ups approved, it was time to start putting the website together in our chosen platform: WordPress. To allow for maximum flexibility in the design, I chose to use the WordPress plug-in Elementor. This drag & drop style page-builder is a great tool for designers. Foregoing a template and building from scratch also allowed me to be free of any design constraints, so I was able to make the design come to life exactly in the way we had envisioned.
A thorough custom website design can be a complex and lengthy process, but the final product really pays off when a potential client visits the site.