Revamping UI Design for personal finance blog/information site
Budget: £100 – £250 GBP
I need an old website design redesigned, modernised and updated with new branding. The website is a personal finance blog, and personal finance related tools will be added to it later - either built into the blog posts as sections, or separately.
Audience - The audience will be working age people who are earning money, but realise that they don't know quite enough overall, or about a certain part of their finances to manage them themselves.
Goal - The goal of the website is to educate people on aspects of personal finance they are interested in, keep them engaged to read and navigate the website for more than a single article. Monetise through affiliate links and some ads in the future
I will provide:
1. figma file of the old design
2. Brand guidelines Adobe Illustrator file with fonts/colour palette
For the most part, I quite like the old design, but some things need changing:
1. Updated branding, fonts and colour scheme
2. Updated menu/navigation
3. Modernise design - layout, footer, sections, images, icons, etc, etc.
The website will have quite a lot of information in categories and sub-categories, so please use your own knowledge to suggest the best way to create navigation for this. The website needs to be easy to navigate to find any information you might need, but not seem overly cluttered with information/distractions.
I have included a screenshot from a website which I think has suitable navigation (telegraph.co.uk) and a screen recording of how that nav bar looks on mobile. I am open to suggestions if you have better ideas, happy to have a discussion about this before you start. Some of the navigation inspiration is also taken from https://www.nerdwallet.com/h/category/credit-cards
If you use any shades/tint then please make a note of them and where they are used.
The branding colour palette inspiration came from https://bb.agency/project/nuxtjs/ and https://focuslab.agency/work/kion - I like the colour combinations as shown, and would like the website on the brighter side - not starting off with a dark background (this may be a darkmode option in the future)
The designs should be
- Clean, simple, easy to navigate and understand
- Bright/white professional and trustworthy looking - not crazy like a crypto website, but also not boring like a government website
- Consistent styling
- Reflect the branding
- Modern
- Flexible - to write many blog posts which will look consistent with similar components
- Broken down by individual components you would expect in a personal finance blog
- Formalise font sizes/colours, spacing etc. ready for a developer
- Responsive, with thought for mobile and different devices
For the 5 pages, please do the following:
1. Homepage/landing page - the usual - hero section and call to action, email, explanation sections about the website, components allowing the reader to start with a topic they are interested in. More about the aesthetics on this page.
2. Blog post - this page has all the components required for blog post, navigation, etc
3. Categories - an overview of the website - allows the reader to see all of the categories and navigate to them - hopefully giving them a wholistic overview of what the website has
4. Archive/Articles/search page - I imagine this as a page to show search results, or all articles with a certain tag, or archived posts, etc.
5. Contact us page
6. Tools "coming soon" page
Mobile designs for these pages too.
Output will Figma files, images/icons used, IP transfer and any notes/comments/guides regarding the designs
PLEASE CONTACT ME WITH ANY QUESTIONS AND I WOULD LIKE TO SEE A REAL PORTFOLIO OF WEB DESIGNS
Audience - The audience will be working age people who are earning money, but realise that they don't know quite enough overall, or about a certain part of their finances to manage them themselves.
Goal - The goal of the website is to educate people on aspects of personal finance they are interested in, keep them engaged to read and navigate the website for more than a single article. Monetise through affiliate links and some ads in the future
I will provide:
1. figma file of the old design
2. Brand guidelines Adobe Illustrator file with fonts/colour palette
For the most part, I quite like the old design, but some things need changing:
1. Updated branding, fonts and colour scheme
2. Updated menu/navigation
3. Modernise design - layout, footer, sections, images, icons, etc, etc.
The website will have quite a lot of information in categories and sub-categories, so please use your own knowledge to suggest the best way to create navigation for this. The website needs to be easy to navigate to find any information you might need, but not seem overly cluttered with information/distractions.
I have included a screenshot from a website which I think has suitable navigation (telegraph.co.uk) and a screen recording of how that nav bar looks on mobile. I am open to suggestions if you have better ideas, happy to have a discussion about this before you start. Some of the navigation inspiration is also taken from https://www.nerdwallet.com/h/category/credit-cards
If you use any shades/tint then please make a note of them and where they are used.
The branding colour palette inspiration came from https://bb.agency/project/nuxtjs/ and https://focuslab.agency/work/kion - I like the colour combinations as shown, and would like the website on the brighter side - not starting off with a dark background (this may be a darkmode option in the future)
The designs should be
- Clean, simple, easy to navigate and understand
- Bright/white professional and trustworthy looking - not crazy like a crypto website, but also not boring like a government website
- Consistent styling
- Reflect the branding
- Modern
- Flexible - to write many blog posts which will look consistent with similar components
- Broken down by individual components you would expect in a personal finance blog
- Formalise font sizes/colours, spacing etc. ready for a developer
- Responsive, with thought for mobile and different devices
For the 5 pages, please do the following:
1. Homepage/landing page - the usual - hero section and call to action, email, explanation sections about the website, components allowing the reader to start with a topic they are interested in. More about the aesthetics on this page.
2. Blog post - this page has all the components required for blog post, navigation, etc
3. Categories - an overview of the website - allows the reader to see all of the categories and navigate to them - hopefully giving them a wholistic overview of what the website has
4. Archive/Articles/search page - I imagine this as a page to show search results, or all articles with a certain tag, or archived posts, etc.
5. Contact us page
6. Tools "coming soon" page
Mobile designs for these pages too.
Output will Figma files, images/icons used, IP transfer and any notes/comments/guides regarding the designs
PLEASE CONTACT ME WITH ANY QUESTIONS AND I WOULD LIKE TO SEE A REAL PORTFOLIO OF WEB DESIGNS