UX/UI Design Workbook

Welcome to unit 6, the first of many in this online directory. This unit was all about user experience/interface design, for a fictional animal rescue shelter, "The Ark" (hence the creation of this very site).

Workbook

UX/UI Design Workbook

Workbook

UX/UI Design Workbook

Workbook

Task 1

Research and analyse 2 websites and the same 2 sites as phone apps from a variety of genres. Note how to navigate the sites, analyse layouts, colour and typography.

Waze

Waze is an online driver assistance app, very similar to that of Google Maps. In fact, it utilises Google Maps. Waze is different however because it acts like a constantly evolving online forum of traffic updates.

The map updates in real time as drivers and Waze partners report information through the app. Traffic, police, speed cameras, the lot.

These live updates allows Waze to always give you the most accurate journey and arrival time whilst having the ability to reroute you mid-journey to save you time.

After further research, I have found that Waze was acquired by Google for a whopping $1.3 billion in 2013 so it makes sense that it uses Google Maps. This does however cause some issues with Waze's UX/UI consistency.

To begin with, i'll talk about Waze's core pages that don't venture out of the typical usage of the app. This means the actual map itself, the about page, and Waze for partners page. This analysis DOESN'T include the "support", "terms", "notices", and "how suggestions work" pages which i actually 50% of the sites navigation.

Waze

Website

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.

Website

Colour

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.

Website

Layout

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.

Website

Typography

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.

Website

Navigation

When you first hit Waze, you're likely landing on the map because that's what you're looking to use. However, I don't imagine many people whipping out their laptop to check the route home from work. You'd be better off grabbing your phone and setting off.

Or perhaps you know the drive and just need an ETA. Either way… you land on the map and the navigation is almost invisible. This makes sense right? You want to use the map, you've got it. If you don't, you have options. They're just not thrown in your face and distracting you from actually navigating in the map.

For this reason, it makes sense that the map is the only page with this layout. However, this leads to inconsistency which is typically frowned upon. In these circumstances, I don't think this is such a bad thing - in fact it shows a deliberate decision has been made which benefits map users.

Using the other core pages? The navigation suddenly becomes much more conventional. I have noticed though, the Waze logo and "Waze" nav item take you to different pages that seem to be the same thing, just reordered and written a little differently. From a web development side of things, extra pages slows down site loading and can worsen the user experience. Are both pages necessary? I'm not sure. On the flip side, Waze is owned by Google so I'd assume they have good reason for it.

After all, they're the all-seeing internet gods. Take a look below.

Swipe left on the image below to cycle through the content.

Partners

The "Partners" page follows suit with the design guide provided by Pentagram and it looks great. It's very simple too which I think is vital for this page.

3 types of business-to-business clients: Cities, Products, Advertisers.

That's all there is. If you're one of them, you know where to go. Perfect! Diving into each sub-page is styled with the same guidelines creating a sense of harmony and consistency throughout the interface.

"Google" Pages

The "Google" pages is an appropriate name if you ask me. This is simply because they look like your average google page.

As I mentioned, Google owns Waze - so it makes sense that some of the pages look this way but it doesn't help Waze and their visual reputation at all. When you visit the other pages (Community, Support, Terms, Notices, How suggestions work) you're just being redirected to the pages shown below.

Whilst they're perfectly functional but suddenly they adopt Google's visual identity. I don't think this makes much sense considering these pages make up over 70% of the initial navigation. This is a wasted opportunity to further cement Waze's brand into millions of minds. However, Google owns Google (shocker) and Waze, so the added brand recognition would benefit Google either way.

The "Google" pages is an appropriate name if you ask me. This is simply because they look like your average google page.

Swipe left on the image below to cycle through the content.

Waze

App

Now the app. Much simpler, much more cohesive, with a few nuances.

I won't go into much detail regarding the design as it is pretty much identical but doesn't suffer from the Google-ification of it's deeper sections.

The app adopts the same visual language with a few exceptions. For example, the UI is mostly compliant but the top bar where you can stop navigating and go back to previous pages appears in the system font - the font being used by the device the app is currently working on. In my case, this is Apple Carplay through an iPhone. The system typeface is San Fransisco with the main 3 variants being SF Pro, SF Compact, and SF Mono.

Now the app. Much simpler, much more cohesive, with a few nuances.

I won't go into much detail regarding the design as it is pretty much identical but doesn't suffer from the Google-ification of it's deeper sections.

Swipe left on the image below to cycle through the content.

App

Navigation

Navigating the app is an absolute breeze for the most part. Unless you're driving at 70mph and need to report an obstruction in the road. Here's when things get a little dicey.

Whilst the concept of Waze is incredible and very functional in practice, it also begs the question of is this safe?

Navigating the app on your phone and through Apple Carplay or Android Auto is basically the same. It's very effective with minimal steps to just get going to where you need to be. The issue however, and one of the biggest selling points of Waze, is the ability to report live traffic updates.

For context, in the UK, it is illegal to hold or use a mobile phone while driving or riding a motorcycle. This includes when you are stopped at traffic lights or in traffic queues, and also applies if you are supervising a learner driver. The law covers more than just making calls — it also includes texting, taking photos or videos, scrolling social media, or even unlocking the phone.

Hands-free use is permitted, but only if it does not distract you from driving. Devices must be set up before your journey starts and operated through voice control, a dashboard holder, or built-in controls.

Waze does have a voice function, but that is ONLY useful for searching for your desired destination. You even have to use the screen to access the voice function and then again thereafter to choose your destination.

Reporting an update however can be quite distracting. You click the warning symbol in the bottom left, click what you see, then choose from a set of more options to make the report more accurate. Take a look at the process below.

Personally, I think if Siri on my phone can route me somewhere and understand what I'm saying, why can't Waze make it's product safer to use by implementing the same tech? Google has a suite of Google Home voice assistants that function exactly the same. This could be added right into Waze with a reduced cost because they have the technology already - no outsourcing, no R&D costs. Come on Google.

Navigating the app is an absolute breeze for the most part. Unless you're driving at 70mph and need to report an obstruction in the road. Here's when things get a little dicey.

Whilst the concept of Waze is incredible and very functional in practice, it also begs the question of is this safe?

Swipe left on the image below to cycle through the content.

NHS

We all know the NHS. Some may remember the old NHS website which wasn't particularly great. Thankfully this was changed in 2018.

Using the Wayback Machine website, I'm able to embed the old site below for you to see. The biggest issues were hierarchy and readability but also branding.

With so much vital information for such a range of people, it's integral that people know how to find what they need amongst a sea of information. The new website set out to fix this. The accompanying app launched shortly after in January 2019 and proved to be revolutionary for the NHS but more importantly, the user.

Try scrolling through the embedded site below.

Website

Navigation

The navigation is incredibly simple with 6 options, a search bar, and a login/account tab. The login tab is a crucial part of the website. If you're tracking a prescription or need any information relating to yourself, it's there. It's the quickest way to access your own records and it's right there on the homepage.

The health A-Z the next most important thing. Checking your symptoms? Looking for remedies? Medicines and side effects? It's all right there. It puts the users needs right in front of them from the get go. That's what the NHS site should do, and it does it perfectly. Imagine needing advice on why your child is sick, but having to navigate through a complex site of various pages and nonsense before finding the information you need? This avoids that being the case which is a great design feature.

The site is a typical vertical scroll site with minimal fancy HTML and CSS effects. No special hovers or animations. Everything is clear cut, basic almost, from a functional stand-point but this has a fantastic effect on the website. When sites have hundreds of pages with hundreds of words, they get slower. Animations and text effects would ruin the usability of the site as the computer, browser, and network speed would need to be sufficient to navigate the site at a reasonable speed.

For such a gigantic site, it's optimised very well. Pages load quickly and there's hardly any lag - and that's on my laptop connected to my mobile hotspot. That's impressive!

Try scrolling through the embedded site below.

Website

Typography

The typography on this site is nothing special at first, it's almost a little ugly. I find the text a little big but on a national scale it's just right. Design is almost always for a specific audience with its own set of needs and requirements. What do you do when the demographic suddenly becomes every human in the country that has the ability to use a phone or computer? Things get tricky. The bigger text doesn't make it too big to read, that would be absurd. However, it prevents it being too small to read which is perfect.

Since 1999, the NHS has used Frutiger as it's primary typeface - designed by Adrian Frutiger. It's legibility is superior to most making it the ideal choice for a website with such a wide audience. When Frutiger is not available on the current system, Arial jumps in to help. Arial is a web-safe font making it widely accessible and essentially acts like a rip-off Helvetica so it benefits from good legibility too. Below is a quick run through web-safe fonts and examples.

Swipe left on the image below to cycle through the content.

Website

Layout

The NHS have elected a simple, almost primitive layout on every page.

Clear navigation, clear headings, simple text layouts including 1 and 2 column layouts with occasional call-to-actions (CTAs).

The layout is incredibly user friendly from the get go. As I'm writing, I have also noticed that every text link is underlined with it's hover effect being the removal of the underline.

The purpose of this (I would assume) is to make anyone aware that they are clickable links. Sometimes links are just a different colour with no underline. This may be confusing as the universal way of identifying a link on computers and other devices is through a simple underline. A simple yet very effective decision

Everything is put into neat boxes to help organise page information making it more accessible for the user. Clearly separating one item from another helps to reduce confusion when navigating the site so it's a very handy layout design.

Website

Colour

From what I have seen, there are 2 main colours and various others on the site. Blue and white do most of the work with support from a range of greys, red, yellow, and green.

Blue is used for the navbar, headers, and other prominent content that isn't of great length. For example headings, subheadings, and buttons.

White is just a background/card colour. It acts as the canvas for everything else.

Green is used for arrows and bullet points to help direct you to the right place, but not always.

Dark grey is also used for headings and subheadings as a hover colour as well as primary on some pages.

Yellow is used as a "pressed" colour for the navbar items. It's also used for information boxes on some pages to help important info stand out.

Red is also used for information boxes where a greater sense of urgency is needed. For example, when alerting someone of the numbers to call in an emergency. It's accompanied with a dark navy/grey background rather than white to create a strong contrast which really helps the information jump out to the user - just what you want in an emergency. Nicely done.

These colours all work together harmoniously however the consistency of where and when colours such as green are yellow are used is a little off which doesn't appear well from a design point of view. In terms of functionality, it doesn't seem to hinder the use of the site making it a passable complaint rather than a major design flaw.

NHS

App

The NHS app - what felt like a gift sent from God himself upon it's release. It made the lives of many much easier thanks to it's quick access to vital services. Below are the four main pages from the navbar and the account page. The home page is slightly different in the design of its heading. It's the only page to showcase the NHS logo. You're then greeted with a welcome message and your NHS number.

Layout-wise, it's consistent with the style of the website. The layout design is followed religiously throughout the app making the UI very cohesive. The typographic strengths of the website have been carried over to the app making it incredibly easy to consume thanks to its legibility and functional hierarchy.

The colour palette is identical and used similarly, but slightly better. The greens are consistently used for buttons except for the logout button shown on the account page below. Please note, on mobile, you will need click the red arrow to cycle through the pages.

The colour green is psychologically tied to the word go, or the action of going/doing. Think about traffic lights for example. A green log out button would likely lead to a multitude of accidental log outs.

This change in colour is an excellent and well thought out decision. Every page feels like a sibling of the last and each design element is consistent within the app. It's designed incredibly well and provides exceptional usability!

Swipe left to cycle through the content below.

Tasks 2, 3, 4, and 5

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.

The Ark

Q&A

I have chosen the Animal Rescue and Rehoming charity as my client. After choosing my charity, I had a client meeting to discuss the project requirements. This includes client rationale, project requirements, methods of delivery, start date, completion date, and any other relevant information. This is the most important part of the client process.

In my academic work and professional work with real clients, the most important part of every project is the brief. This forms the basis of the rest of the project and acts lighthouse that is to be followed throughout. It keeps you on course and prevents any deviation from the clients desired outcome.

Below are the questions asked throughout the client meeting and the answers which form the brief for the project. At the end you will then see an appropriate timescale for the project.

Swipe left on the image below to cycle through the content.

The Ark

Project brief

After the Q&A session I put this information into a written brief to help guide me through the entire design process. There isn't much guidance on how to design the brand identity as the client had no preferences. This has been left down to me, the designer, to decide what's best for the charity.

Swipe left on the image below to cycle through the content.

Task 6

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 Ark Brief

Analysis

Now that I have my brief, it's time to analyse it. What are the most important pieces of the brief? How can this information be used to produce a desirable outcome? A good way to figure this out is by simply brain storming. Then look at which of your ideas fall within the guidelines of the brief and what doesn't. These ideas can then be extruded into a wireframe for the site and visual identity. In the images below, I have analysed different aspects of the brief.

Swipe left on the image below to cycle through the content.

The Ark Brief

Mind Map

After analysing the brief, I created a mind map to draft concepts, ideas, and anything else that resonates with The Ark's mission and project goals. The mind map also helps to explore ways this can be visually communicated. For example, rounded shapes and wholesome visuals create a sense of friendliness and reinforce a feeling of community. This amplifies the charity's values and communicates their brand identity without needing to say a single word.

The Ark Brief

Wireframing

With my brief, brief analysis, and mind map all finished - it's time to move onto the wireframing. The site is going to consist of four main pages.

About, Adoptions, Support, Contact.

Let's break down the wireframe of each page and the plan for said page one by one.

Wireframing

About (Landing Page)

The about page, also the landing page, will act as the first point of contact for the user. It will begin by explaining who The Ark is, and what they do. As you scroll down the page, there will be brief mentions of the next 3 pages which will have button links into each. For example, there'll be a section that mentions how The Ark helps animals which will provide a button to navigate to the adoptions page and so on.

Below you can scroll through the wireframe for a visual aid.

Wireframing

Adoptions + Fostering

This page goes through the process of both adopting and also explains why fostering may be a suitable alternative. I plan to visually break down this process using bento grids and card style content structures. The hero section will have two anchor links to adoptions and fostering which will scroll the user down to the respective sections.

Have a look below.

Wireframing

Support

This page is about the ways in which the user can support the charity. I'll have another anchor link in the hero section that takes you to a bento grid of four main avenues of support for the charity. This will be 100VH (100% of the viewport height) meaning it's size will adapt to that of the screen its being viewed on. Below there will be more ways to help and a donate now button. This section is followed by a "contact us" CTA section and the footer.

Have a look below.

Wireframing

Events and Education

Similar to the other pages, I have a hero image with the page title. Below is a section with event types. These are laid out in a card style with rounded corners for a sense of friendliness - this is used across the site. Due to the lack of content, I have added the "useful links" section to fil out the page and help aid the sites navigation followed by a contact us CTA section.

Take a look below.

Wireframing

Contact

The final page - Contact. I wanted to follow the theme of hero sections and full bleed images but that lacked the sense of urgency typically associated with a contact page. To get the best of both worlds, I've laid out the page to have a full bleed image covering the right half of the section. This section will be 100VH followed by a useful links section and then the footer.

Have a look below.

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.

Task 8

Produce a research/mood board that reflects your clients requirements - create a logo device and a font for the name. Choose images, typography, colour, etcetera.

The Ark

Visual Identity

The client had clear goals - promoting the well-being and support of animals to a wide target audience. With this, naturally you wish to convey a sense of approachability, trust, and friendliness whilst maintaining high standards of accessibility.

My mood-board consists of images that align with these values. To elaborate, they are primarily clear images with block colour backgrounds accompanied by bold text. This is incredibly accessible as they are legible designs but they also feel friendly thanks to the happy dogs and cats in the pictures. Rounded text also takes away the punch of traditional bold type enhancing the friendly, approachable feel of the designs. These are design elements I wish to include in the design of The Ark's visual identity.

Colour-wise, it's all bright and saturated with a mix of pastels here and there. The vibrant colours are little more in your face, but the pastel colours are a lot more soothing and less "aggressive" in a sense. Calming is a good way to describe them.

The logo devices and iconography shown in the mood board all have a theme of including pet-like imagery either in the negative space to be subtle, or just simple illustrations to be a little more obvious.

I like the illustrative aesthetic for it's friendliness and added personality but I don't want to take it too far as it could blur the line between friendly/ professional and childish.

The "Argo" logo in the centre right is a perfect balance between friendly, playful, and professional.

Visual Identity

Logo Concepts

As always, I began sketching.

A method I'm fond of now thanks to a designer named Allan Peters (you should see his work, it's genius) is looking for overlapping geometry in relative concepts/images.

For example, let's take the letter A and a paw. You could use the body of the A and add little toes around the top half to create a paw whilst still reading as the letter A. Perfect for "The Ark".

This feels a little easy though, so I sketched a few concepts to see which worked best.

Visual Identity

Logo Concepts

I tried to get all the cliches out the way to start. Paw prints, animal faces, etcetera. I came across the idea of a paw that resembled an "A" whilst also having a small person with their arms open in the centre. This was a bit complex and actually just looked a bit like Mike Wazowski's cousin.

I thought this was too far out there. So, back to the drawing board. What unifies most small animals? Any features? Whiskers, fur, noses. Bingo - the nose! I was looking at the many pictures of our dogs I have on my phone, as well as those of my sisters dog and others.

I noticed the shape of each pets nose was almost identical. Take a look at these noses of a guinea pig, cat, and some dogs.

Visual Identity

Logo Concepts

See it? They all have the same (or very similar) shape. When I originally drew this, it looked like an alien again. But I leant into this idea as it was different from anything else I had seen or sketched so far. It just so happens too that when you add a little circle, it looks like a person!

This concept encompasses the variety of animals that The Ark supports and also represents their mission to connect these animals with new owners. It's rounded geometry gives it a friendly feel and it's bold, circular form conveys trust through its powerful presence.

The head is placed at an angle as this has a calming effect for the device. What I mean is that the device looks like a little light a scary monster, but with the head off to a slant, it feels much more empathetic. It's like the person is now looking over towards something in curiosity. It creates a sense of humanity which really enhances the value of approachability within The Ark's visual identity.

Let's bring it to life!

Visual Identity

Logo Concepts

I always start with basic shapes. I don't really like going willy-nilly with the pen tool because it often just feels crooked and unbalanced so I used a variety of circles to form the shape I was looking for.

I found that using the golden ratio to size my circles was a useful guide to begin with as this helped balance the shapes in size, however this only really suited the "hads" and "armpits" of the device.

I stuck with using circles and overlapped them until it was time to use the shape builder tool to cut out the desired shape.

I realised it looked a little bit like a skull which if you ask me doesn't say "We're friendly people who look after animals". It screams pirates if you ask me. To fix this, I lowered the centre point at which the two legs began and rounded the corners on both feet. This now means the device has no sharp corners, just continuous curves and smooth lines - nice and soft!

I then paired the device with some the charity name ("Ark") set in Aktiv Grotesk Black. I chose this font and weight for a variety of reasons.

Firstly, the device itself is bold and heavy so the type had to match that to ensure a visual harmony between the two. The reason for Akitv Grotesk in partcular instead of something like Poppins is because it has a sense of authority. Authority = trust. Authority = "We know what we're doing". Whilst this was good, it felt a little sharp. Solution? Round the corners. Any 90º corners were taken rounded to a 3px radius with tighter corners only being rounded to a 1px radius to ensure the legibility of the type wasn't compromised.

The one exception was the apex of the "A". I made this completely round rather than keeping two rounded corners. This feels much more welcoming and ties nicely with the logo device.

Final step? Balance things out. I used the spacing and dimensions of the wordmark to ensure the logo device was sized proportionally and spaced correctly in relation to the wordmark creating a well balanced and on-brand logo.

Visual Identity

Logo Animation

For no reason other than because I wanted to, I animated the logo. Just click play to see the magic.

It highlights the changes made to the type and the introduction of the logotype.

Nothing crazy, but it was fun. Not entirely useful for the website however. It's important to note that at this point, I haven't chosen my colours, that's the next step.

Visual Identity

Adding Colour

With the key values of the brand in mind, I started with a coral orange as it evokes a feeling of friendliness and welcoming. I then chose colours around the palette that felt cohesive. I tested the palette on a website that allows you to preview colour palettes but it didn't quite feel right, and this was in dark mode. It felt a little too much like a tech start up than an animal rescue and rehoming charity. After flipping to light mode it was just apalling.

Visual Identity

Adding Colour

Sometimes I do struggle with colour as it's not something I do very often - at most I pick one or two colours for a logo design but with clients, they always have their branding sorted out so it's not something I delve into with detail.

I went back to the basics for this project and just took a look at the colour picker in illustrator. I chose an earthy green colour which felt appropriate due to it's psychological link to health, nature, and wildlife. I then chose a lighter green but the contrast felt a little off. I then made the background a little darker and so on. Take a look below.

The palette works well with the light green accent colour and I have used this across the site for the logo and action buttons. I've also utilised a darker shade of the dark green, white, and a creamy white for alternate section backgrounds and headings. There's enough contrast without feeling too sharp - a similar concept to the logo in the sense that it's round with no sharp edges making the entire visual identity very cohesive.

It sounds somewhat chaotic, but it makes sense when you see the final site.

Visual Identity

Adding Colour

Here's a quick visual of the actual colour palette used on the site. Pretty nice eh?

Dark Grey
Dark Green
D'Green Shadow
Highlight Green
Cream
White

Dark Grey
Dark Green
D'Green Shadow
Highlight Green
Cream
White

Visual Identity

Typography

With a total of 665 installed typefaces to choose from across my system and creative cloud, I was bound to find something - It would be a monumental disaster if not.

Now, I love typography (*Reader sighs* - "Here we go again"). Typically, I always have a typeface in mind for the current project without much struggle. We're going for friendly, approachable, trustworthy.

Helvetica is too generic, very corporate - I'd argue not many people trust big businesses and Helvetica doesn't shout friendly.

Inter? My personal favourite - Helvetica's slightly happier cousin with rounded tittles - Yes, the dot of an "i" or "j" is called a tittle (or a "superscript dot" which isn't nearly as entertaining). Still a little too serious though.

Futura? Excellent choice - except for one thing. Why on EARTH is the ascender of an "h" taller than an uppercase letter?!

Such a beautiful font - ruined. To be fair though, even if this wasn't the case, letters such as Z, K, X, N, M, and others have sharp pointy corners - the antithesis of what I'm going for.

Next on the list is Poppins. This typeface can feel a bit childish, but I think its quite malleable. I've never described a typeface like that, but that's the best way I can put it. Poppins, depending on what visuals it's accompanied by, can say "New, hip and cool corporate", "Childish", or "Friendly, happy, but serious". You see my point? It's versatile. In fact, I think Poppins is the best alternative to Futura as it doesn't have the stupid ascenders but still feels geometric and soft.

The table below breaks down the text size and leading values used across the site - these are accurate to the current breakpoint you are viewing my workbook on so what you're seeing now is exactly what you'd see if you loaded up the site on the same device with the same browser window.

Hero Heading

65/0.9

48/0.9

38/0.9

Heading 1

52/1.2

43/1.2

35/1.2

Heading 2

30/1.2

26/1.2

23/1.2

Heading 3

20/1.4

17/1.4

15/1.4

Paragraph 1

20/1.4

17/1.4

15/1.4

Paragraph 2

18/1.4

16/1.4

14/1.4

Nav Link

20/1.4

17/1.4

15/1.4

Footer Link

20/1.4

17/1.4

15/1.4

Task 9

Move on to screen and design the proposed layouts which should be a minimum of 4 DUMMY pages minimum for a website or a Phone App.

The Ark Site

Site Build

I haven't documented the process of building the site as I was informed this wouldn't be necessary. I would have done so anyways had I more time available but just getting it finished was my top priority.

I'm pleased to say it's up and running, and I'm incredibly pleased with the outcome!

It's actually very true to the wireframe, minus a few tweaks made to improve responsiveness across breakpoints.

I stuck with the card-style layouts and the alternating background colours. I've also kept in line with each pages hero section.

The home page is just how I imagined it to be – an about page with short sections that draw you into to each of the other pages followed by a CTA and a footer.

Framer is an incredible tool as it's just another piece of design software, almost the same as Figma in fact, but you have a button that says "Publish" and boom, you have a website. It's essentially a UI that has the perfect mix of options and buttons that allow you to visually write code without evening thinking about code at all.

Put simply, I'd be fuming if I did a degree in coding.

Anyways, let's go over the key moments of designing and building the website.

First, I built the header. I built it once and created a "Component". In Framer, this just now means it's a pre-built asset ready to insert wherever you need it. No wasted time building the same thing twice.

Then, I did the same for the footer. Think of it as buttering the bread of your sandwich before putting in the ham and cheese. The header and footer are your bread with it's links being the butter, and so on.

These components can then be inserted on each page ready to be built out into a full site.

It's worth noting that the links in the footer and header have a distinct design choice, the hover state is a simple underline with the transition being instant, no animation. I was planning on having a fancy hover effect but that would mean a slower site speed and reduced accessibility as it's widely known an underline on hover means it's a link. Accessibility was key throughout the development of the site.

In the header, the current page is highlighted green to show you're on that page in case you forget. This does not apply to the footer however as it's not the primary navigation and isn't worth the added strain on the site speed.

Site speed is important as it ultimately determines if someone will even use your site in the first place.

Moving on. As spoken about in the previous section, I added all of my text styles across three breakpoints to ensure the content was displayed correctly and easy to read across all devices.

Had I more time, I would have also included a dark mode version of each style to make it truly flexible across every instance.

I've maintained a strong level of contrast for all buttons and text to ensure everything is legible and clear to see. For example all CTA buttons are either Highlight Green on Dark Green, or Dark Green on White.

The actual layout is also fully responsive. Everything remains proportional across all screen sizes and adjusts to fit in a efficient layout for the current viewport.

Viewport means the available space that the site is viewed on and is separate from screen size. For example if you shrunk your browser tab, the viewport get smaller.

With these considerations in mind at all times, I powered through and in just three days I had gone from having blank pages to a completed site – well ahead of the predicted schedule which I was very pleased with.

The last thing to do was to edit the site settings. This meant a custom free domain (meaning it has ".framer.website" instead of .co.uk or .com)

I chose "thearkcharity.framer.website" and "theark.framer.website" was taken.

Then, it was time to add meta descriptions, page titles, social preview images, a favicon, IOS app icon, and image alt text. Let's break down these terms.

Descriptions are just descriptions for that page. This is the intro text you see under the page title when you're scrolling through google search results.

The page title is just that - the title of the page. This is the main thing you see when you search for the site or a specific page.

If your page titles and descriptions are packed with the correct keywords and information about your site, such as location or what you offer, this can improve your SEO.

SEO means Search Engine Optimisation. This refers to how well your site ranks in search engines. Better SEO means you rank closer to the top, worse is of course the opposite.

A social preview image (when supported) is the image that loads when someone shares the link to your site or a specific page. For example if I sent you the link to the home page of the site on iMessage, Whatsapp or any other platform that supports it, the charity's logo on a dark green background would be shown as a social preview image.

The favicon, often overlooked. Ever seen that ugly little serif "W" in the browser tab for a website? That means someones published a site using WordPress and not bothered uploading a favicon, so you're stuck with a WordPress "W" instead. It's simply the icon displayed in the browser tab when you're visiting a site.

An IOS app icon is just that. Whenever you download an app, it has an image. If you save a website to the home screen on your Apple Device, it's known as a web-app. Adding an IOS app icon ensures you can add your logo (or anything else you might want) to that app. Some websites are built to be saved as web-apps rather than being downloaded through an app store in which case this step becomes crucial.

Image alt text is probably the most overlooked part of web design. It's crucial for accessibility standards as it provides descriptions of images used in a website. It helps those who struggle with disabilities have a better experience when it comes to using your site.

I have overlooked alt text for this project for the simple reason that with limited time available, there are more important things to finish that will have a greater effect on the use of the final site.

Also, another key part of the site build was image optimisation. Rather than putting in huge RAW files, I've taken every image in to photoshop and reduced it's width to 2000px so they're all the same size. Then, I exported them as WebP files - this is an image format that is optimised for the web. The best part about WebP files is that you can export them at 50, 40, even 30% image quality without actually losing much detail at all making file sizes minimal therefore boosting the website performance.

Future Connor here.

I had some spare time, so I took the site a step further and created a dark version of both my workbook and the charity site so whichever system theme you prefer, light or dark, you have a preferred way to view each site.

On my workbook this was pretty simple as the colour palette is very minimal with not much crossover of colours however The Ark's site involved duplicating colour styles and assigning them dark theme alternatives to be used only where I wanted colours to change.

Nevertheless, it was still fairly straightforward and now makes the site even more accessible.

The Ark Site

Issue 1

Unfortunately, I had to do some troubleshooting as I noticed that Safari wasn't displaying the site favicon. Google Chrome was though, so I knew this was specific to Safari.

The issue lied in the lack of SVG support by safari meaning they wouldn't display.

I re-exported the files as PNGs and uploaded them, simple! Now, at this point I have dark and light site themes with a favicon for each. I use dark mode on my computer, so when I cleared my caches and cookies and reloaded the site, the dark mode favicon loaded. Perfect. What about when I switched themes? Nothing changed. Weird.

Turns out Safari cannot do this natively, you have to have specific JavaScript code to overwrite this function and force the favicons to update based on the system theme which is frustrating. This meant I had to make a favicon design that would be suitable across light and dark themes across all browsers. Chrome allows you to change the colour of your browser tabs to a range of colours too which threw another spanner in the works.

A simple solution was to add the highlight green icon on the green background so there was contrast within the favicon. This means if its displayed on a dark background, the icon still has contrast. If its on a light background, the background still has contrast. Impenetrable.

Problem solved!

The Ark Site

Issue 2

The last issue was my Call-To-Action sections. Originally, they had a PNG image of a line of pets along the bottom of the section which overlapped the footer. This looked great but the issue was that the image would move and resize disproportionally which made it move off the line - not good.

To fix this, I removed the top padding of the footer and added a rectangle of the same height to the image and changed its position to relative meaning it would always be in the right place at the right size.

This looked great and worked well until I added the dark theme. The rectangle was now baked into a PNG which meant it was no longer responsive in colour - so I removed the image. Whilst it feels a little empty, it also puts a whole lot more emphasis on the CTA button which is beneficial.

Task 10

Once finalised present to CLIENT, tutors and peers. Produce a reflective evaluation of the project.

Presentation

Client Feedback

The final task was to present the final site to the client (my tutor) and peers. I created two interactive PDF files to place in the submissions folder - one to head to my workbook and one to head to the charity site.

Annoyingly, I noticed two small errors in the site whilst I was presenting which I have since fixed. Besides this, the presentation went well.

I think I went a little fast, but I did get through all the necessary talking points. One peer immediately identified the logo-mark as a person and a nose which I was pleased with. Overall, I received positive feedback for the site which was great!

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.

Quick Nav

Quick Nav

Website

App

Website

App

Dark Grey

Dark Green

D'Green Shadow

Highlight Green

Cream

White

Dark Grey

Dark Green

D'Green Shadow

Highlight Green

Cream