So after a few years the team at Superfly decided it was time for a website revamp! As the lead web designer this was an incredibly exciting project as it allowed me to completely express my creativity. Website trends evolve quickly, so it was important to make sure the design was future proof.
Initial Design
The list below shows how I prepared to ensure the design was as good as it can possibly be ✌🏼:
- Colour palette – For this I use Adobe Colour CC or Palleton.com.
- Dribbble & Awwwards – These are websites which I used to gain inspiration.
- A notepad – Yes I know it’s 2019, but writing down ideas on a piece of paper is great to visualise ideas.
- Google fonts – This is a good resource to explore different font variations.
- Pexels, Pixabay, Unsplash etc – This wasn’t necessary for this project however I often use this if a client doesn’t have any imagery provided.
Presenting my ideas to the team we then chose the best design which we thought would make the most impact on our clients.
We wanted to go for something that was both unique and innovative. The use of white space and abstract shapes with gradients has really come into trend over the last year, so it was important we implemented that into our design. The use of larger typography, drop shadows to create depth, and illustrated images were also used.
These other websites are a great example of the points mentioned above…
https://www.baunfire.com/
https://www.miragefestival.com/
https://designerpart.com/
Development Stage
Now I have the wireframe and styling resources I began the process of developing the website using WordPress.
Integrating a live chat widget from Tidio allowed us to customise and make it simple for site visitors to talk to us directly through an online messaging platform. Contact forms allow our clients to get in touch with us via email. Downloadable e-books on the site provide a free resource for visitors, including a range of marketing tips.
People are constantly using their mobile phones these days, therefore it was essential to spend a large amount of time developing and designing our site for smaller screens. When developing for mobile I had to consider various points to ensure the experience was just as strong as the desktop version:
- Reducing the size of headings and body text.
- Having an easy to access drop down navigation.
- Changing the sizes of images so it doesn’t take up whole sections.
- Using numbered, bullet or arrow based pagination to stop users from scrolling down too much.
We also spent a lot of time considering the user experience. We made various components animate with cool little hover effects to make things stand out! All these things make browsing a website a whole lot more fun and engaging for the user.
Take a peak below to see how I developed this!
Final Stage
Once the building of the website was complete we made sure everything was working correctly, from being fully responsive on multiple devices to ensuring everything was completely SEO friendly.
In the end the entire team was really pleased with the outcome of the new site design, preparing us for 2019!
See below for our finished product or simply have a browse! 👇🏼😄
