You might consider this post aside of what I usually publish in here, however, it has been a while since I am in the web design field, so I thought it could be useful to share my way to approach a new project which involves the rebrand of a small business and the design/code of their new website.
As usual, my intent is to help you to clarify how a design process might be (sometimes we can feel overwhelmed by all the methods and tools outside in the web) and also to gather impartial feedback from you in order to improve my skills – pretty much aware of my being still a student.
#1 Choosing a business
Let’s start from the basis: what has been asked you to be done?
For this project, as already said, I am supposed to deliver a new brand identity for a business who needs it, plus create a website as an online showcase.
But, how can I know who actually needs a boost?
Start having a look around; investigate on what type of business is the one in front of you, what is the overall feeling you get from their logo shapes, colors, and fonts and, finally, try to understand if their “nature” is explicitly clear from all the characteristics above mentioned.
Therefore, there is a place close to my house where I usually buy fish&chips on those days when preparing the dinner is too much.
Looking back, I don’t really remember how I got to know them; from outside they are a plain shop not easy to identify (in fact when I asked around almost all of my acquaintances couldn’t remind of it).
DISCLAIMER: From here on “Ranelagh – Take Away” will be shortned in “RTA”
The front of the shop is sending simultaneously 4 different messages:
- They are in Ranelagh – from the logotype | and that’s TRUE
- They offer a takeaway service – from the pay-off | again TRUE
- They sell fish&chips – from the green/red round shape sign on the left (hard to see from the picture) | TRUE
- They cook oriental style meals – from the font used for logotype and pay-off | but that’s FALSE
How can I be so sure about this last affirmation?
It’s enough to have a look at dafont.com, popular fonts’ website, on the Chinese/Japanese section. Aren’t those below very alike to the one used by RTA?
#2 Knowing the company
It was immediately clear I could have used their shop as training field.
Now the time to know a little bit more about the business; so I went there and asked them a few questions with the excuse of buying my usual dinner (can’t upload the record because we spoke Italian the whole time).
What I could discover:
- They have been opened for 30 years now.
- During this long time, they have gathered a nice crowd of loyal customers.
- The shop is usually frequented by workers and family who live close to the store.
- They care about quality a lot, but their menu is composed only of fried meals.
- The small business is family driven, so they don’t plan to build an empire of franchising. They most likely will stay in the same place forever.
- Their best selling products are fish&chips (of course), but also fried chicken, hamburgers and chips.
- The service they can offer is only a takeaway type because there are no tables or chair in the shop.
Essentially, they are a proper takeaway which sells fried fish and meat (both important the same) and they won’t move from their place (so the surrounding must be considered as well).
#3 Analyzing the competitors
Then, who are their most fearsome competitors?
Immediately in front of them, there is WOWBURGER, popular fast-food restaurants you can easily find all around the city. The name of the company is pretty much explicit: they sell burgers.
But when you talk about fast-food/takeaway there are other important names to mention:
#4 Logo studies and sketch
Observing the competitors logos, we can deduct a few keys elements which are repeated for every one of those and help the business to be recognized as one of the fast-food/takeaway activities within this group.
- Round shapes: curves and smooth.
- A predominance of red and yellow colors.
- Most don’t have a real symbol, but only the logotype with specific fonts.
NOTE: Burger logos like those are often associated with cheap products and low quality, but I still wanted to impart “good quality” idea to be coherent with the essence of RTA business.
Typing “good quality food logos” on Google Images:
And on Pinterest:
Again: ROUND SHAPES and RIBBONS.
So I tried to sketch a bit, looking for a solution that could have communicated the key quirks of RTA: TAKEAWAY, FISH, MEAT, HAMBURGER, and QUALITY.
#1 – The TRIANGLE
I took inspirations from the shape of the streets of Ranelagh, which form a triangle, and used a “map pin” (i.e. ketchup sauce) to identify where the shop is.
The lines stand for speed and represent chips.
#2 – RANDOM
Just sketched random shapes connected each other through fork and knife.
#3 – FIRE and WAVES OF SEA
Again, connected by a knife, the two sides of the medal represent meat and fish.
#4 – The HAMBURGER
Just the bread of hamburgers with a line inside which represents both a patty and a ribbon.
#5 – The FINALE
The following one convinced me. It has got the round shape I was looking for (that reminds of a hamburger), the name of the shop is in the logo with a traversal direction (which can represent a ribbon for quality or a patty for coherence).
#5 Color Palette
The colors most used by fast-food business for their brand are red and yellow (the exact same palette of WOWBURGER), therefore I decided to opt for something which could have diversified RTA from his main competitor.
For the psychology, colors send specific messages to our brain:
- Red gives us a sense of urgency. It is widely used for alimentary brands but it can be associated with danger or alert message. In this case, red stands for meat.
- Light-blue (blue) is the color of the sky and sea. When used together with warm color it creates high-impact, vibrant designs. Light-blue stands for fish.
- Yellow is the brightest between primary colors. It is energizing and it is associated with happiness and sunshine.
I will use it as the accent color for important buttons or illustrations.
So, the palettes of chosen colors is the following:
One of the main problems with this project about RTA, is the length of the shop’s name: “RANELAGH – TAKE AWAY“.
To create a “wow!” effect and give meaning to both the name and the pay-off, the smartest solution is to play with fonts, giving identity to the names themselves (solution I came up during the sketching phase).
So, after spending plenty of time online, I found the match I was looking for!
For the website instead, I used “Anton” and “Leckerli One” from Google Fonts, and “Arial” for all the basic texts.
NOTE FOR THE NEXT TIME: Ensure the fonts are available on Google Fonts as well, otherwise you will be forced to look for others similar which look alike but are not quite the same, and eventually your project will feel different.
Yep, written down in uppercase.
#7 The final logo
And then, putting all the elements together, I built the final version with Adobe illustrator, following the scratches to the vectorial version:
- Dark grey on a white background.
- White on a dark background.
#8 Wireframes and Mockups
Maybe old school, but I do like to start with paper and pencil.
The following three pictures are indeed the chosen wireframes in mobile version – because trust me, it will help your life if you decide to design and code mobile first.
- A slider highlights the best selling meals or promotes the special offer.
- “The combos” series show the menu completed of food and drinks.
- “They say of our food” is review type section and helps on engaging customers and on building trust between client and business.
- Map, time, and social to be always reachable.
This section is meant to talk about the story of the company and highlights qualities that matters to both the owners and the customers.
Easy navigation for the page which displays RTA’s menu.
It will help people to understand if the shop sells what they look for and will redirect them on Deliveroo website where they can complete the purchase.
And then, it is already time to transpose all the drawings in something more professional.
Creating a structured mockup – I used Adobe Photoshop for this – will help you to visualize how the element will appear on the screen and to define pixel to pixel where to position those in order to obtain a balanced graphic.
So then, when it is time to code, you already have all the measures for your CSS stylesheet.
- The logo will shrink on scrolling down the page. This will help users to focus on the content of the pages. CSS3 for the transition and jQuery to “toggle” the height property of the logo.
- The slider will be built with JS, taking 3 predefined images from the HTML code and turning these in array’s elements.
- The map will be taken directly from Google Maps so that it will have all the standard functionalities users already expect from it.
- The curved mask will be created with CSS3 – in this way it keeps the vectorial properties and will automatically stretch on screens of different size.
- “The Combos” section highlights the best selling or promoting products (usually meals complete with drink).
- The “Order online” Call-To-Action is repeated to gently suggests the purchase – do that in a way that is not obvious: fill the surrounding of the buttons with different info each time, different color, different position, you get me…This may be the perfect occasion to inform your user about something it is really important without giving it all in one time.
#9 The website
If you don’t feel enough confident about your coding knowledge,
it might be really helpful to write down on paper tags and elements to use for your webpage.
You don’t need to stick at these until the very end: the aim is just to consider the best way to start structuring and implementing the HTML or CSS page. Don’t stop here: try to write down also proper coding languages like JS, PHP, etc.!
My project is still under construction, but I will be glad to have feedback at any time of the design and development process.
So if you’d like, have a look to it clicking on the following link:
This will redirect you on GitHub Pages, where the website is live! Every change made to the code will eventually be reflected in there, with zero effort (that is what really matters)!
WHAT TO BE FIXED OR IMPROVED
- On Internet Explorer, the website is broken. Need to spend time on making it functional on this browser too.
- The CSS3 curved mask has got properties which forced me to create asymmetrical curves (also if it is not so clear to be seen). Need to spend time on understanding how to make it work properly.
- ABOUT and MENU page to be implemented.
As usual, hope this post might help you too on building your personal design process. Any feedback always really appreciated 🙂