My Projects

0

Hi there, 

I hope you are well. 

My name is Stephen. I am an aspiring UI/UX designer currently based in London. 

I will use this section to upload my assignments from the top-down. Thank you for viewing my work and I look forward to getting better. Any feedback is welcomed and please feel free to get in touch anytime. 

Best,

Stephen.

 

INTRODUCTION:

My Projects - image 1 - student project

 

 

ALIGNMENT AND GRIDS:

This was a fun wireframe assignment getting to grips with Figma. I have used Figma before so have a little experience with it. I learned that grids are very important and everything must be aligned to something.

 

My Projects - image 2 - student project

 

 

VISUAL HIERARCHY:

I would say that the H1 "Boston Divorce Attorney' should be number 1 on the page. This is the information a user would want to know and feel reassured they are in the right place. If they are looking specifically for Vincent Law then the logo is paramount to letting the user know they are on the right page. 2nd to this is the sub-header, this just reaffirms to the user that what they are seeking is on this website.

Next in importance would be the CTA 'Book A Call' and 'Call Now' buttons, if the user knows they are in the right place they may want to contact someone right away and need to be able to do that easily - these buttons should be more prominent on the page as the goal of the site is to get a user to click these buttons and secure a call and also from a user perspective the goal is to get in touch with someone so they can handle the divorce for them. The 'Book A Call' button should not be outlined and should instead be solid and contrasted to the background to raise the importance level. The 'Call Now' button should equally have an easily distinguished colour to the background. Swapping the colours around sound fix this, a solid purple for Book A Call and a solid cream colour for Call Now. 

Third in terms of importance is the links. If a user wants to know more they should be able to access this information easily.

The image is actually the least important thing on the landing page. It really wouldn't matter if Vincent was in the picture or not unless he is some kind of celebrity divorce attorney. Rarely would someone choose an attorney based on their image alone and I would actually maybe advise against using a personal image of the owner and maybe something more descriptive to the situation that demonstrates the freedom from divorce or the fact that this company handles everything for you rather than stating this firm is all about me - it should be about the user and help ease their decision making process.

Also I am unsure about a 'Blog' being in these links. I think maybe it should be in the footer if it is to exist just because it detracts from the main purpose of the site and also a blog is never really perceived to be of high importance and this is the landing page.

Also for colours I would use maybe slightly less black because yes it is professional but whereas black can signify strength in this matter it is slightly depressing. Maybe a deep grey or even deep blue close to black instead, this maintains professionalism but also injects optimism.

Based on what I have said I have implemented it into my assignment submission.

 

My Projects - image 3 - student project

 

 

TYPE PERSONALITY ASSIGNMENT:

This was a great exercise in type. Searching for the header titles in google fonts really helped to see use case scenarios when matching the copy with a typeface.

 

My Projects - image 4 - student project

 

 

SETTING TYPE:

This was a cool little exercise that can really get quite difficult. I think the one takeaway message is always add line-height no matter what. It is useful to look at the line-height with too much and too little before deciding somewhere in the middle. I also used opacity as another variable to create contrast however it is important not to go too low for accessibility and legibility reasons.

 

My Projects - image 5 - student project

 

 

TYPEFACE PAIRING:

Thank you soo much for this assignment. I have struggled with type for a long time and you made it soo much clearer and easier to understand how to find and apply type than anything I have ever watched before (and believe me I've watched a lot of stuff). I really enjoyed this assignment and I feel much more confident going forward choosing, pairing and justifying my type choices.

 

My Projects - image 6 - student project

 

 

SAMPLING COLOURS:

Really cool assignment for colour selection. Would be great if you could include something about selecting colours for buttons and buttons states because unless this is is for print then reading these articles/advertisements are going be digital and generally promoting something to be clicked.

 

My Projects - image 7 - student project

 

FINE-TUNING COLOURS:

Fine-tuning in this way is a really important step. It really helps to add extra pop to the designs when brightening colours. Just remember to check the colour of your background against the colour of the copy on the foreground for contrast ratios. Installing a plugin called Stark will help you maintain good accessibility ratios making your designs more legible and inclusive for all.

 

My Projects - image 8 - student project

 

 

IMAGE OVERLAYS:

Really nice exercise with the Overlays and Tints. I find it helped me not to use too busy of an image and I tried to be subtle in my image suggestion using overlays and tints on top. With this I was able to let the copy and the feel of the page do the rest of the talking, in this way I was able to make the CTA button really pop off the page using a brighter, complimentary or analogous colour combination. Im looking forward to acing photos!

 

My Projects - image 9 - student project

 PHOTO CROPPING: 

What a great tool to have in your arsenal. Photo Cropping can really help transform a design from nothing into a winner!

 

My Projects - image 10 - student project

 

FINDING PHOTOS:

Finding the right photo is really quite a skill of its own. To find something to convey the right look and feel as well as business objective can take time which I can see can also be quite frustrating. I found it helpful to find a range of photos for one look and them compare them all to see which are meeting the needs of the hero section best. I would like to have spent more time of this to get the perfect photo so I will call this submission a work in progress :)

 

My Projects - image 11 - student project

 

OVERLAPPING:

It feel super cool to combine some of the things we have learned into more complex examples. This is a break down of how I approached things:

Type:

I went for a workhorse typeface like Montserrat because it is easily legible at large and small font sizes and has a variety of weights that can be utilised for contrast in different situations throughout a website. The characters are spacious which gives them a friendly and playful feel, yet the structure is professional and trustworthy which is the vibe you want when thinking about booking a holiday through a website. The header is 20px Bold and the body copy is 16px Regular with generous line-height to make it easy to ready when quickly scanning the page and I created character styles to maintain consistency for each section which would also come in handy when applying to text across other areas of the site.

 

Colour:

I used yellow as the accent to the photo overlap. This is a colour that I feel illustrates a friendly, affordable holiday scenario. I used small playful red underlines to add an element of excitement to the page feeling. 

 

Photos:

I tried to used photos that could help tell a story but also not be too descriptive. I instead wanted them to act as metaphors for a scenario a user might be able to relate themselves and the body copy to. The heavily stamped passport represents multiple destinations around the globe. The lady on a laptop in a comfortable setting represents the ease if booking online and the last photo represents a lively atmosphere similar to what a user could experience on their own holiday.

 

Grid:

I used a 12 column grid system with each text and photo block occupying 4 columns. I used lots of white space to keep the look and feel open, modern and relaxed so that the user doesn't experience any stress when viewing. 

 

My Projects - image 12 - student project

 

TENSION:

I played around with a few iterations before settling on these two variants. On the first option I was going for a soft feminine vibe and on the second a hardcore Kill Bill vibe. I tried to create tension with balance as discount sales are chaotic enough without this advertisement reinforcing it :) Also I changed the button on the yellow advertisement to resemble a clothes tag to illustrate the sale mentality - I took a bit of a risk by rotating it slightly like it is hanging off of clothing but I think it paid off and works quite well - drawing the users eye into clicking it. After this I produced a quick banner out of the same style.

 

My Projects - image 13 - student project

 

FIGMA HOMEPAGE DESIGN:

This was an interesting one, great to see how the pros design and layout their pages.

I started by looking at the assets available to see what I had to create from scratch. Then I assessed the elements on the original page for sizing and spacing patterns. Some patterns such as header sizes and body copy sizes emerged as well as spacing patterns.

They have a very minimalist design system (which I am sure gets more complex throughout the entire site) so I created a small style guide to make sure I was adhering to their system when recreating elements.

The main message I got from this exercise was to be consistent and get a design system in place as early as possible in the design process to add consistency and have more productive workflows and also to design a page in terms of sections so that a large task can become more manageable in smaller pieces. I really had fun with it and I think the first thing I will do every morning is to copy one website page so that I can build my skillset and get faster. 

 

My Projects - image 14 - student project

 

 

MOODBOARD:

Putting together a moodboard is surprisingly hard, there are soo many great designs out there that I just want to borrow inspiration from them all!

I thought about the Ride Share App Website and I tried to empathize with the user asking myself what would they want to see on the homepage? vs what the goals of the business are in hosting a homepage? After forming this list I found that there are similarities and overlaps in 'wants and needs' and 'business objectives' so I came up with a set of adjectives that a homepage should cover: Informing, Trustworthy, Inviting, Friendly and Simple.

A user wants to be informed and the host wants to educate the user. A host wants users to trust the site and a user wants to be able to trust the company they use. The site must appeal to a user and make them feel welcome and a business must be appealing to users and make them feel comfortable and any information should be easy to understand and minimise cognitive load and thus kept simple as not to make a user think too hard. 

I tried to reflect this with the moodboard that I put together with large headlines to inform, a consistent design to add trust and professionalism, colours that excite and appeal to the target demographic and a down to earth tone of voice that is friendly and natural and also using lots of white space and short and snappy headlines and text to keep the site looking open, fresh, modern and simple.

 

 

My Projects - image 15 - student project

 

 

CHAT APP HOMEPAGE: 

This was soo much fun. It came out super clean and super crispy :) I only hope I can design this way myself when I am not following along but I learned some valuable lessons that I will be sure to implement into future designs. 

 

My Projects - image 16 - student project