Deliverables
Carefully research and select ONE IMAGE that offers insights into one or more of these areas (clashes of culture or time, or both) and add it to your journal along with some brief commentary (50 words – 100 words max.) analysing/explaining/highlighting/de-constructing/interpreting the image content.
Topic Journal
Carefully research and select ONE IMAGE that offers insights into one or more of these areas (clashes of culture or time, or both) and add it to your journal along with some brief commentary (50 words – 100 words max.) analysing/explaining/highlighting/de-constructing/interpreting the image content.
Weekly Tasks
Week 1
The website is initially quite simple, just like the app. The nav bar is almost invisible due it being kept quietly at the bottom right of the page.
At first, I found this a little strange but it makes perfect sense. Keeping the nav out the way keeps the main purpose of the site the focal point of the page. You're most likely using Waze to get directions - not to learn about their annual sustainability reports. Click the image to take a look.
Weekly Tasks
Week 2
You’re greeted with a friendly interface made up of white, blue, and grey tones. This base palette is extended further through the map itself, which includes greens, creams, and other soft colours. It feels standard for a navigation tool - but importantly, it’s also warm and welcoming.
The colour palette of both the user interface and the map work in harmony to create a cohesive visual experience. That same consistency carries through as you navigate, giving a strong sense of continuity across a variety of Waze's touch-points but not all of them. For the most part, nothing feels out of place.
Weekly Tasks
Week 3
The overall layout of Waze is simple and approachable. There’s a clear hierarchy in how information is presented, which avoids clutter and helps with usability - especially important in a navigation app. The minimal design leaves room to breathe, and while the layout feels playful, it’s never childish or chaotic. It walks the line between being helpful and being friendly, and it does this really well.
Weekly Tasks
Week 4
The typeface used by Waze, as mentioned in Pentagram's project page, is Boing - Medium and Regular in particular. The type specimen below is sourced from Pentagram's site.
According to Pentagram, Waze has roots in crowdsourcing and has a history of being "vibrant and dynamic". The purpose of the new identity is to leverage this heritage in such a way that gives Waze a visual language that creates aesthetic unison whilst cementing its "joyful sense of individual expression".
Boing was developed by the A2 Type foundry who also made tweaks for Waze's new logotype. This typeface "combines personality with utility and has rounded corners for a friendly look" according to Pentagram.
I would say that's the perfect way to put it. Imagine the corners weren't rounded for a moment. You'd have a very robust, militant font that feels indestructible. Round them corners and suddenly you've softened things up. It's like meeting your partners dad for the first time. You expect him to be hard as nails, but actually he's a pretty chill bloke - true story.
At first, I thought this typeface was Poppins which is famous for it's friendliness and that was my first impression but I think it's incredibly overused, so it's safe to say Boing is an excellent choice and works very well in this application.
Weekly Tasks
Week 5
Essay Plan
Select your charity - I have chosen the animal rescue and rehoming charity, "The Ark". Then, question your client (the tutor) to become familiar with the client requirements and form your own brief. With this in mind, create a sensible timescale for the project.
Essay Plan
200 Word Plan
Structure
Abstract
The Essay
Analyse your brief, and make sure that you understand your client’s requirements. Create a mind map and with this information in mind start “wireframing” on paper. There will be a separate tutorial on this subject. At this point you will be creating block layouts without using logo,type, colour or images.
The Essay
Essay
The Essay
Bibliography
Task 7
Present your hand drawn “wireframing” to your CLIENT. Discuss the outcome and include comments and revisions. This is called TESTING and there will be a session on this subject. Select the preferred layout.
Wireframe
Feedback
Before I begin with the feedback itself, it's worthing noting that due to ongoing client work outside of the course, I'm on a bit of a time crunch. For this reason, I do not have much time to explore iterations of the proposed wireframe. However, I do plan to work through the wireframe throughout the design phase and make changes/improvements where necessary.
The feedback I received on the proposed wireframe was very positive. The landing page was said to have a good layout with an effective flow of content as it helps guide the user to each page of the site in a cohesive order. The design provides a sense friendliness that will create harmony between the site and brand identity and help promote the charity's core values. This layout also benefits from it's flexibility. It can be used across various breakpoints such as desktop, tablet, and mobile.
Project Overview
That was an EXCELLENT brief. Let's get straight into the evaluation shall we? Yes, more reading I'm afraid.
Wrapping Up
Evaluation
Wowzers. What a project eh? Genuinely an absolute cracker. As I've said before my goal with each unit is to properly push myself to do my absolute best.
This project was a huge success in that regard. At the beginning of the project I had only just begun using Framer and was eager to learn the ins and outs. I challenged myself to not just design the website for The Ark, but build it too. I also did the same for my workbook, it's a fully functional and responsive website.
I have been able to complete each task in a timely manner and have successfully produced all required deliverables for the project as well as the added deliverable of a functional site.
Throughout the unit, I have looked at key concepts such as web safe fonts, colour theory, accessibility, and more to produce a very well rounded outcome that included an effective logo device and visual identity as well the charity website.
I explored a number of logo concepts before finding the ideal solution that avoids industry cliches whilst perfectly symbolising the charity's ethos of connecting animals with their forever homes.
Through wire-framing and a developmental process, I have created an effective website that only slightly deviates from the original design to keep it optimised across all platforms.
I'm incredibly pleased with the process and the outcome of this project as I've put in 110% the whole way through. I have gone beyond the project requirements to ensure I challenge my abilities which has been a great success.
I've learnt a boatload about how to actually build a responsive, accessible website which I'm very pleased with. I can't wait to build more sites with Framer in the future.
If I was to do the project again however, I would like to be better organised when it comes to balancing my workload. Due to having ongoing client projects outside of my degree work, I had moments where I was focusing on one thing more than the other which led to a slight time crunch at the end of the project.
This being said, I completed my client work and then completed my work for Unit 6 two days before the deadline which left me time to check things over before submission.
Overall, this project has been hugely successful with a few minor tweaks to be made if I was tasked to do it again.
To bring the project to a close, I would love to give the website to a charity who may be in need of it. As it's a functional site, there's minimal work to do if a charity was to use the site. That's the next task, but you'll here about that next year.
The end!
Apologies for all that reading, I hope it didn't take up too much of your week. That's the entirety of the project from start to finish, I hope you enjoyed it.