Category: project yr 1

PORTFOLIO 2019

This is the identity page where I chose to keep it very simple and clean. There is an image which I created in the editorial project as it was one of my favourite projects this year so I wanted to use it. I placed the image in the centre on black background with white text to create a strong contrast and it stand out to the viewer. I used a simple  geometric font for my name to set out the tone portfolio as it’s the font I used in many pages. The way orange black and white work really well together completing the page and creating a good start to the portfolio. The first page gives an essence of the overall project which is really useful for the company to get an idea of the design style.

The first project was focused on reimagining design as histories where I responded to the brief by creating a poster for Futurism movement. The layout of the first page is focused on the image of the poster which covers most of the space on black background to make the image stand out on the page. I used 4 columns and 4 gutter to create the pages. The header is good size compared to the poster as the font is modern and doesn’t take the attention from the poster. 2 paragraphs of text which is briefly explaining the brief and then the second paragraph explains briefly how I responded to the brief. I like this page is it’s simple and modern the main focus in the image and I believe that’s the most signification part of the portfolio.

The second page is a mock up of the poster hung up on the wall. The mock up allows the viewer to contextualise the work. I chose to place the image to cover most of the space on the page and leave some black to keep the contrast. 

The next project was movement and the layout is similar to the Futurism movement. I placed the mock up image on the right side as that’s the main layout I want to go for which is easier for the viewer to look at the image and guide the ye to the small paragraphs explaining the project. I layered the header on the mock up to break the structured style and create my dynamic on the page. The two paragraphs still first one explains the brief and then how I responded to the brief. I again used black background for contrast. 

The next page I wanted to break the similar layout style and colours for stronger pace so I placed the mock up image in the centre of the page on white background. The yellow is bright and warm so on white it stands out. I used a header textism on black to create more contrast on the page and break some structure as the first page. I like this page because white and yellow work really well together it creates a dynamic fresh page for the viewer. 

The next project was Design as Activism. In this page I used very similar layout style focusing on the mock up image on the right and placing the body copy and header to the left of the image. I usually break the structure on second pages of the projects to finish off the project focused on the work which is probably where I talk the most in the interview so I don’t think it needs a paragraph to explain.

The next page focuses on digital posters placed on the centre of the page. Two posters with  similar colours and black ground makes them stand out on the page. I chose to hav a header on the bottom right to add some context to the page.

The next project was Protest where I played with image placement and layered some image. The body copy and header is still the same font and size to create consistency. The main image is the contextualised image of the placard covering the whole page on the right and a small digital version placed in the centre to give the viewer what it looks digitally and hand made. I like this page because it is simple but clearly shows the work to the viewer. 

The second page focuses the placards both placed full size on the page. The way it covers the page makes the viewer focus on every detail of the image and clearly see the work. Placing full size images breaks the structured first pages which is more about the brief and explaining what I have done.

This is the page for Changing faces brief. I chose to change the layout in this one to fit the tone of the brief for the viewer has some interest in the brief. I chose to use a close up image of my prints which I used in the editorials but it has no edit. I placed the header on the image on top left to not take much focus from the image but also stand out so reader knows what page it is. I placed the article name in the bottom left corner of the image i think as it’s white on orange it looks really nice on the screen. Especially with black background. I chose not to use any mock up images but briefly let the viewer have an idea of what the brief could be about to create interest.

The second page is where the viewer can clearly see each editorial spread in context and close ups. The placement of these 4images to me feel the best because one image stands out the most which is the first page so it’s introducing the viewer to the brief. The 3 images placed on the left are second and third pages focusing on again contextualising with some hand movement to show it’s not a flat image. This allows the reader to see details in the work and have more interest in the work rather than digital designs which is flat. 

The the last brief which was the create a smart phone app. For this page I focused on using two mock ups on the first page placed on the right. They are at a good size to see clearly what each one is about and again contextualising the work as it is not a physical work. I created a mock of the the hand also because the iphone x mock ups are flat and you can see they are digitally made but the hand mock up seems realistic and helps to contextallise the app for the viewer. The two paragraphs on the left again are east to read for the reader.

I finished off my portfolio with a large image of a mock up from my app. It covers the whole screen which has the main focus on the screen and it’s the last page where I would explain the last points of the app and finish off my interview. The orange background finished off the portfolio tying everything on the portfolio together especially the first page so it creates a good identity for the viewer.

I really liked all of the final works in the exhibition, they all produced several different outcomes producing different materials such as books, leaflets, posters, videos etc. However I chose 3 work which I liked the most.

I really like this piece of work because I loved the typography and use of colours. The designers created several different outcomes such as packaging, booklet and tote bags which all looked really good with the colour scheme and the style. The typography works really smoothly with the lay outs and patterns. The poster has a really good hierarchy focusing on key words highlighting the importance words to attract the viewers attention. The colour scheme works really well as they create a good contrast in order to stand out the text. Another thing I really liked was the presentation and layout of the materials, everything world together perfectly and in the same style as as a whole it looks very professional. Each element is thought of very well focusing on the overall aesthetic and the use of language and style. It’s one of my favourite designs inspiring me to create different outcomes and not sticking to one thing.

This is another work I really liked especially the typography. The posters are very unique and communicates the aim of the branding. The layout in posters is very good with strong use of hierarchy with type and patterns which attracts your attention. The use of colour in each poster has really good contrast between them and makes each element stand out. I wouldn’t think it’s about coffee because they stayed away from the cliche use of language and colour schemes and creates  unique way of looking at coffee. The layout of the booklet is really good, everything was placed perfectly allowing reader to focus on each image and read through the booklet. I really liked the typography and it’s very unique.

This is the last work which I really enjoyed looking through was about young women and  street style. They focused on diversity in the magazine and very unique well structured layout which looks really professional. I liked the photographs in the magazine from different styles and the magazine includes variety of different content which fits the purpose of the magazine so the reader can find whatever they are looking for in the magazines. The cover of the magazine is very well structured with a bold font  and playful representing the target audience which is the young adults interested in street style and fashion. Overall, each element in the magazine was well thought and I loved the typography and layout system as I enjoy designing editorials so it’s something I could consider creating in future and this was a huge influence. I also really like the idea focusing on young women and showing the diversity in society which was the magazine is clearly communicating with the chosen topic and photographs.

Pentagram

I did some research about Pentagram before and I’ve always loved there work. The unique thing about Pentagram is that the owners of the business actual work closely with the clients and they are create designers themselves. This breaks the hierarchy of status to me and in most studio or work places the owners only necessarily get involved with  making  the final designs about the designs but in Pentagram it works differently. Their way of thinking is they do their job and they create with passion and personal commitments.

Pentagram creates wide range of designs for different clients from architecture product, designing to interior designs. I really like how broad it is which means there is difference designers from different backgrounds which creates diversity this would mean there would be loads of things to learn from people.

I think one of the reasons I would love to work in Pentagram is Harry Pearce. Listening to his conference at the London trip in February I was mind blown by his talent na dit was  huge influence to look up to. Since then I would love to work with someone like him and I find his work very inspiring and visually beautiful. His publication ‘Eating with the eyes’ was also very interesting listening in the conference and the way he explains about this journeys and his findings on the find was like a way of meditation. His findings around him influence his work and he told us in the conference that what we need is actually around us.

Design Studio

One of the reasons I would love to work in Design Studio is that they are located in London but also I really like there work.  They are branding focused stdio which is something I really love doing in my own work. I enjoyed making branding since A levels and I still enjoy creating them. As they are focused on that segment that means they would have a lot of clients from  different business which would mean different designs. They worked with Air bnb, deliveroo and other big businesses.

They work closely with their clients focusing on the aim of the business and what they are trying to achieve. Which is why thy create a strong bond with the work they produce and you can clearly see it when visiting their website.

I really love there Depop branding because I think it fits with there target audience of young people and has the contemporary feel which attracts young people. They created many posters and branding materials for Depop.

Taxi Studio

Fearless Creativity

Taxi Studio is located in Bristol which is very close to my home town. They are a brand design agency and they believe that courage and collaboration deliver true success. I really like their manifesto and I believe it’s part of why they have really goof work because they work as a team together and they don’t have a limit with there creativity. They create brands from scratch and work with business which are struggling to stay relevant in todays society which sounds really fun to do as they’re not changing few things but they are creating something new from nothing which gives them a lot of freedom and chance to be creative.

I would like to work in Taxi studio is because they are brand focused agency. Branding is something I love doing and it enables the designer to create a new identity for the business to find their aim again. I really like the logo work and posters they create for their client.

 

I really enjoyed the Applying Applitute project as I never created a smartphone app on XD before which was a really good experience  I found it easy working on XD because it was easy layering things on the frames and mainly focused on shapes and text. Before working on XD I did in-depth research on different kinds of apps related to the idea I had in my mind which was about travelers and travelling. This concept is not so developed in the app market as most apps now focus on social media networking such as Instagram and Twitter etc. I found a lot of apps about travelling but mainly they were focused on travel guides for tourists and the designs seemed out of date. I also found few apps which weren’t related to the traveling but I still included them in my research because I liked the contemporary style and use of font and colour in most of them. I had the aesthetics planned in my head but I wasn’t sure on layouts of each sections. After the research and mind maps I started to work on XD and I believed this helped me because actually designing also helps the decision making process as you can see what works and what doesn’t so you can change some layouts and ideas you had originally. Once I created few frames I started to focus on logos and icons so it would stat looks complete. For the logo, I had a long process trying to decide the name. I thought about some names which combined both travelling and finding friends but they seemed too cliche. I decided go with Solo, the word solo represents exactly what my app was about and it was short  and recognisable which is an essential part of branding. I designed some logos focusing on the context of the app and experimented with different symbols to combine typography and imagery. I found logo designers that I really liked and they influenced my logo designs significantly. The logo process did take time however I really enjoyed making all logo because the name gave different ideas and it was very broad. Once I was set on the logo, I carried on working through each section of the app, designed as a go along but also added features which I knew I wanted from the start. I created simple icons for each section of the app such as profile, saved messages, solo cycle etc. I believe the layout suits the context of the app as I think it is simple and clean, there isn’t big imagery or bold fonts that take over the page. However, the clean look and simplistic layout suits the purpose of the app and also helps the users use the app easily. I chose fonts and colour scheme considering both context, the target audience. I’m really happy with the overall layout, I believe I created an app that users would find it easy to use but also interest and enjoy while using it.

 

I was really happy with the feedback I received from David. I understand the areas I need to improve as seen on the feedback sheet. I had a tutorial with David where he clearly stated areas I could improve such as the pace of the editorial design which was something I wasn’t sure myself. He suggested to change the second page design and create something similar I designed in the development stage and decided not to use as I thought it didn’t fit in with the overall design. In addition, I also have to improve on justified text too tight and rivers. To fix this problem I would need to play with the gutter and type size. Also, I need to add bleed and link one of my messages one was missing. All these small areas can be fixed.

To start off I created new designs using the first template of the second page I made in the development stage which was the white background with large print on the top right corner . I developed this idea more by creating 3 different variations experimenting positioning and body copy layouts.

This is the first design created using the screen printed imagery. I chose to use the print on white background to create the strong contrast between the back ground and the imagery. The imagery covers the first page and also layers over to the second page which removes the feeling of two separate pages. I chose to use a large size call out places diagonally next to the right of the print to also help hierarchy on the page but also creates stronger dynamic on the page. The body copy layout is simple with justified text in two blocks. I added a short call out on the middle right of the last paragraph to break the heavy text. I like this layout because the text is more dynamic compared with other versions however I believe the size of the image should be bigger.

The second variation focuses more on the bod copy layout and placing call outs around the body copy.  I liked the layout on text in this design because it is easy to follow for the reader and there is a break through two paragraphs with a short call out. I think I want to use this body copy layout in the last version and try making the print size bigger.

This is the final version and the design that I will be using in the final editorial design. I believe this changes the pace in the design significantly creating more dynamic layout and feel to the article. The imagery size is big enough to cover both pages which stands out the most in all 3 pages. The body copy layout is simple in two blocks focusing on a small call out between paragraphs but not perfectly in centre to break the structure. The big call out placed diagonally to the imagery also fits perfectly to the page more like creating a bridge between a large imagery and small structured texts. Combining other variations together I believe this design would suit the rest of the editorials creating a contemporary editorial design which the article in the best way.

I also worked on the other areas such as text too tight and river I worked on it by decreasing the gutter to 4mm which was 5mm originally. In addition, the point size is now 9 rather than 10 I believe this helped the tight text. In addition, I added 3mm bleed mark on each spread and also increased the margin to 13mm. Also, I added the missing image.

Overall I am really happy with the outcome and I improved the areas on the feedback sheet.

EDITORIAL MOCK UPS

 

 

 

 

 

 

 

 

 

These are the photographs I took in the studio contextualising the editorials spreads for my portfolio. The photographs show clearly the details of the imagery and the complete look of the binded spreads. I trued to take photographs which gave the feelings of a magazine and not so flat so the viewer can see how it could look inside a magazine. There are over the head shots focusing on areas on the page but also close up shots into imagery to draw the attention to them. With the studio lights the pages look bright and vibrant each element on the page stands out and overall looks really good on the portfolio and completes the project.

This slideshow requires JavaScript.

Today we had to present our power point to a small group of peers with Theo. I think my presentation went well I was able to explain the key points on each slide. Theo gave us 3 minutes to present our work which should include the app video so I think it wasn’t enough time to cover everything on the power point but from the feedback Theo was very positive about my presentation. He said that my project looked like a finished and well thought project and I explained ideation and some elements of the app such as the profile very well. Theo also suggested I should create advertising posters to go with my app.

In the first slide we had to cover target audience and the process we went through identifying target audience for our app. The concept of travelling is always thought to be a young generation concept, which this does make sense as most people go travelling either before going into university or after they graduate before going into work. So I thought the target audience for my app should be age group from 18- 25. However, this is only for age. The research shows the number of travelers older than age 30 showed the biggest percentage increase from 2007, rising from 10% of the market to 17%, while younger travelers, aged 23 to 30, have seen a decrease of a similar percentage. It means older people are traveling more which this would mean my target audience should also broaden out as my aim is just travelers.  To balance this in my app I had to create a contemporary app layout which can be easily used by a 23 year old but also a 40 year old. For this, I had to chose a fonts which are sans serif which has the informal style but also can be read easily and gives a relaxed, playful feelings which suits the concept. 

THE USER TESTING

Few weeks ago we had a workshop with Theo where he explained the importance of user testing. User testing involves thinking about different types of users fro all different backgrounds, technological experience, age, work, occupation etc. We were told to create 3 different types of users to test whether they would be able to use the app efficiently. This test would allow me to see whether I need to change any areas in the app such as the size of icons, or size of text for readability, or the navigation system whether it is functional different types of users.

The user profile I had for my app was 3 different types of people. First one was a young person which chose to travel over university and their first time going abroad so my app will enable them to meet people on the way and experience it together with someone. The age was 20 and they were very confident with technology. Therefore, for this user I believe my app os very useful. This is because the colour scheme is bright and energetic, it would keep the users interest in the app. As it’s an app to meet new people younger people are always interested in apps  similar to mine. In addition, the navigation is easy to use, the hamburger menu allows the users to see all different features of the app in one section. There are feature such as solo cycle which is an activity for users to meet more people and the app can be used for more than connecting with new people. The second user I thought was someone mid age 25, after university chose to travel for a year and not so confident with making friends but wants to get out of their comfort zone. They’re not so confident with technology but have used apps such as Instagram, Twitter before. For this user, I believe my app is also easy to use, as they’re not a very confident person and first time travelling alone I think the app is perfect for users like this. As people can message people who they think are similar to them and seem more friendly.Also, in terms of usability of the app there are short steps to each sections it isn’t complicated going from profiles to solo cycle or to friends list.  The third user was 42, been traveling for 5 years always on road and has used many other apps similar to Solo and knows a lot about traveling. I think the user would be satisfied with the features and functionality of the app 

I also created advertising mock ups as Theo suggested to complete the project. I created these mocks up on Photoshop using Iphone X mock ups online.

The first mock up is showing the launch screen on Iphone X mock up and the sign up screen to introduce the users to the app. I used Iphone X mock ups online and created them on Photoshop using images of each layer. The centered phones on the screen is the main focus and I didn’t add text to not draw attention away from the design. The orange background creates a professional outcome. I chose to use back ground to complete the overall essence as an identity of the app. I used the logo in the corner smaller size to again keep the focus on the mock ups in the centre. The logo stands out on the background so it’s a good hierarchy between two elements on the page. This is a simple clean poster which fits well with my overall design aesthetic.

The second poster focuses on more screen of the app using variety of phones isometrically layered on the screen. I really like the layout of each phone the user can clearly see each screen and overall outlook of the app. Also, I used orange background to complete with the other design, I tried black background as well but I feel this version looks much better. These posters will be able to give user some insight of the app before downloading, maybe I could add a small slogan or text so there isn’t too much empty space but I do like the way it looks.

This is the last mock up and I focused on contextualising the app rather than using flat mock ups. The mock up focuses on a hand holding a phone with the main feed of the app. This design I didn’t add a logo or text because I believe there is a lot going on the back ground and I wanted to keep the main focus on the image in the centre. I believe these mock ups will look really good on my portfolio with the recording of my app to complete the whole project.

 

 

 

 

Reference

https://www.freepik.com/free-psd/iphone-mock-up-design_1101782.htm

https://www.behance.net/gallery/54400759/CITY-CONSTRUCTIONS-MOBILE-APP-AND-POSTERS?tracking_source=search%257CApp%2Bposters

https://www.behance.net/gallery/76024721/UIUXInteraction-Design-for-Social-Praying-Mobile-App?tracking_source=search%257Cmobile%2Bapp

 

Once I created the profile frames for the user I started to focus on the messaging sections which is the key part of the app. The way this works is the user can see other active users around the location and can select to view more about the user. When they tap the profile photo it takes them to their profile. In this profile sections, I focused on similar layout as the original profile layouts. The layout is clean and readable as I had a look at few other profile designs from other apps such as Bubble, Instagram, Twitter. They are seem to have focused on the functionality and the minimal design.

Above you can see the final layout for each profile. The design is very simple, I chose to have the gallery on the top with their profile photos which is similar to Tinder, you can scroll through their photos. I added some shadows to the images so it’s not very flat, then placed the name of the user and age above and the location below the name to top left. I didn’t use the round style in those profiles because I think every frame looked very similar so I chose to use sharp corner. I used Proxima Bold for the name/age and Proxima medium for the location. For 1 profile you can see 3 screens that’s the each screen created to make the scrolling possible. I linked all of them to each other so the user can slide left and go through the gallery. I had to edit type detailing as David’s feedback suggested. On the bottom right corner I placed the button ‘send a message’ to convince the user to message the person using Dunbar Low as the font is bold and stands out on the screen. The button has a gradient of dark orange to light orange to add some texture.

When the user clicks on send a message it takes them to messaging section you can see below. This layout I chose to use the profile photo in the top centre with the name under neath the photo. The text boxes and 2 icons are both designed by my on Illustrator. I chose to use them orange to help the consistency. The the icons are inside a small circle and there’s a 3 dots on the top right. That feature slides up to another section of either saving messages. adding to friend list and report. I added the report section to help the security and ethical issues of the app. The slide up section is designed and linked by auto animate tool on Prototype. When you select either one you can see a small icon on the screen to let you know it’s saved and it dissolves from the screen. All these 6 frames are linked together smoothly. Small details such as shadow below the profile to create more 3D effect to also help the layout.

Speaking to David for some feedback he suggested that the messaging screen should be orange to help break the white orange theme as orange background on white text would make the frames stand out and also help the pace. I used Proxima Nova as the font is for text. The user can easily go back to main profile using the back arrow on the top left corner.

I think the adding colour has really improved the overall look of the frames making everything in your face. This also made other features stand out such as the profile photo above and creates a clear line between conversation.

PROTOTYPE

This is the final frames of messaging section.

The next section of the app I worked on was the other parts of the hamburger menu. These consisted of Privacy, Settings, Saved Messages, Friend list. All these sections are important part of the app to work smoothly and also features which make the user to create more personal account. The ‘saved messages’ shows the history of conversation the user had with someone, this builds the connection and acts more like an archive. The friends list is where the user can add a user to their list and message them whenever they like rather then waiting to be in the same location.

I chose to keep the layout minimal and elegant. The friends list you can see profile photos and their name which you tap on the photo it takes you back to their profile screen. I used Dunbar Low in bold top centre of the screen, creating a section with a straight line across the screen. There is also a search bar for the more user uses the app the friends list would grow and search bar enables the user to find the person quickly.

The final feature I added on was the Solocycle, this feature was something I thought about before as it saw few other apps such as city mapper. A feature for users to book an activity, or apps such as Klook show popular events around your area for music, theatre and allows the users to book tickets for those events. I knew my app needed a feature like that to make the user have something else to do other than meeting new people. When the users meet new people they would want to do something together so an event or an activity seemed the best feature. Speaking to David he mentioned about a cycling activity for users to read about in the app. Rather than just giving information about activities I added features to actually book and pay for the activity. I created Solocycle which is an activity focused on travelers, an hour session cycling session in the mornin with a tour guide, the activity takes you to the popular and historical destinations in the location. The layout of the frame is very easy to use, first it gives you information about what the activity is and what you need to do to attend. The second part is the meet up point which users need to be there at the set time and then the available dates and times. These date/times and also meet up point changes according to the location. Once the user selected between dates, a ‘book’ button appear on the screen. Once they click on the button the apple pay frame slides up. Loads of people have apple pay in today’s society especially for travelers it would be easier and quicker than tying card numbers manually.

The layout is very easy to follow focusing on the image first half of the screen. I chose to keep it round edges as I did with other sections. The image is from PhotoSplash from XD plugin. The Solo cycle icon is on the hamburger menu so it’s easily accessible for new users. The icon is created by me which represents the cycling symbol. The I chose to use Proxima Nova regular for text body under the image. The meet up point is under the small information paragraph. Overall, the font is Proxima Nova regular and bold for headers. The user can see the available sessions placed below the meet up point. This section is also simple with white box to highlight the dates. I added shadows to make them stand out from the rest of the parts. All the tex is aligned left to help the user read and follow easier.  When the user selects a date the ‘book’ button appears, the gradient is same as other ones when they click on the ‘book’ the apple pay screen slides up which is an overlay on each frame. When the transaction goes through the user is sent to another page which it says that it’s all booked and includes the date/ time and meet up point. I was also going to do a section on the menu for user to check all their bookings but I thought there’s only one activity so I decided to have the ‘check email for confirmation’ so they can show that when they’re at the meet up point.

By adding a feature like Solo cycle this makes the users have more interaction with the app more than just talking to other people. I think features like this really make the app stand out compared to other competitors with similar context.

THE FULL APP

 

I started the design the first few frames on the XD focusing on placing of each element so I used shapes as outlines of where I want to place the logo etc.  The first few pages consist of the launch screen which has a large logo of the app and which dissolves into the screen which shows the log in and sign up buttons. These frames were designed few weeks before I decided on the name of my app so they’re like the draft and I wanted to decide on whether to use orange as the background or white. The two frames I used white as text and orange #FF8A17 on the background because it’s a warm toned  orange which isn’t bold and bright it creates a good contrast with white text. However. I used orange in a lighter tone with shadows to create the buttons but this made the buttons harder to see on the screen and blended in with the background. The launch screen starts off with the logo in the top which at the start I thought I could have a small illustration with the logo to compliment the screen but then I decided to stick with just the logo. The sign up and log in frames I think are simple and centered on the screen filling up which makes it easier to follow for the user.

 

 

 

 

 

 

The font I used was Dunbar Low for headers and Proxima Nova for the text. I think these both go well together as Dunbar Low is thick and bold which is appropriate for a header to stand out and Proxima Nova is commonly use din many app designs it’s a sans seri font easily to read and blends well with Dunbar Low. However, the font choice could change during the design process. I created few more frames with the same style  and I realised I want to use white background instead of orange. The reason for this is because white enhances the elements on the screen, making it easy for user to follow the page and most apps with a lot of content on each screen chose to use white background because it could look over crowded with the text and images. My app will be heavy on images due to the profile sections and main feed for this reason I decided to use white as the background and use colour on text and buttons.

Launch Screen

I had few ideas about the launch screen as one of them was to keep it simple with a dark background and white logo in the centre of the page and it dissolves into the frame of log in or sign up. This would create a good blend into the app not having interaction with the user. It’s also a common feature in most contemporary apps and XD allows you to easily create this feature on prototype section. The other idea was to use an image which is blended in the background colour, an image which shows the context of the app showing a traveler. The tone of the image would be warm colour such as yellow and orange to create a consistency once it dissolves into the second frame.

The 3 colours on the left are the colours I used creating the launch pages. The first one is the darker orange colour #FF6A13, the second one is  #FF7F00 lighter shade of orange I thought this would be really nice for a shade for a gradient. The last colour is #FF8A17 the  light shade of orange which I used in the first few draft frames earlier. I don’t think I will use it as the main colour as it isn’t bright as I like it to be, I could use it for gradients in buttons and some text which I don’t want to draw much attention too.Using the three colours I created variations for launch screen. The first one which has an image and white logo at the top is probably my favourite. It creates a really nice blend with the overall colour scheme on the app and it works well with the white logo. My first initial plan was to actually create a blend with the white background and place the logo at the top but in the darker orange colour. Also the size of the logo is not too big because it isn’t too much on the screen to look crowded with the image but it compliments the image.  However, I couldn’t get it to work for ages and then I tried filling the whole screen and I really liked the outcome. I think this way it makes a difference and everything would seem to be orange which could effect the pace. It would start to bore the user. The other version was a solid background in#FF6A13, which is bold dark orange shade with white logo. This does make it stand out but it looks very flat. The last one I thought a gradient would look nice as the other version with colour was very flat. To create the gradient I used #FF6A13 and #FF8A17. I like the way it looks as it adds a detail to the screen enhancing the logo in the centre. The logo covers most of the space on the screen making it the main focus.  Looking at all these 3 variations the first one is the one I want to use in the design as it looks clean and simple way to introduce the users to the app. Using a photograph breaks the use of only solid colours which could make the app come seems dull and less interesting.

These are the other 3 variations using an image on the launch screen. I found these images Plugins/PhotoSplash on XD. PhotoSplash is very useful tool it has variety of images depending on the key word you enter. The 3 variations I chose have different colour tones. Originally I was going to use the third image but I realised everything is would be orange and other shades I had to add a different colour to make it stand out. I asked some of my peers for there opinion they suggested the first design goes really well with the context of the app, the image is really bright and works fine with the white logo placed top centre. It would be good transition in the app from green to orange. However, other people suggested the third launch screen goes better with the aesthetic of the app and consistency. I decide to use the original launch screen because I want to have a strong aesthetic throughout my app, I also like the placing of image and logo complement each other building a strong visual for the user.

The final first 4 frames look like this. A very simple approach focusing on simplicity and clean layout. The launch page dissolves in to the home screen to where users can either sign up or log in. The sign up section is in bold with a round circle button to create a hierarchy. There is a pattern of rounded edge for buttons because I tried more square buttons but I think they aren’t are smooth and they create a harsh break on the screen. The round buttons create a smooth blend and I think they go well with the sans serif font. Also, my log is also round they isn’t any harsh edges so I think overall everything element on the screen works well and fits together for consistency. The sign up and log in screens both very similar for consistency. placing each section in the centered and I didn’t use section to add a photo because creating a profile page comes later on. For the font I used Dunbar Low for both text and buttons. There is a colour gradient on buttons because at first it was just solid colour of dark orange but then I thought it was too flat and gradient for buttons is used in many other apps to add colour to the layout I chose to use a lighter tone of orange rather than a different colour. There are small less than symbol as icon to go back on both sign up and log in which take you back to the home screen. I created the small icon using round lines to fit the logo and other elements on the screen.

This section for sign up users to create an account, I was originally going to place a map on the screen however I decided to keep it simple and add a search bar where user can type in there location select and move to creating a profile. The first screen is like an introduction to the app, it has a bold orange background colour with white text and white logo. It was originally white on orange but I wanted to break the theme because it could become boring and it needed a in your face screen which is a different style. The small paragraph focuses on the purpose of the app and then with the small icon placed on bottom right you move on to location. I think it was a simple but effective pages needed to users to spend few seconds reading something rather than keep tapping to move onto to the next page. The Location screen is made up of 4 screens all linked together by auto animate. The header ‘where are?” was originally “Where abouts are you?” which speaking to David and thinking about it it sounded too informal so I changed it to ‘where are you?’.

CREATE A PROFILE

Once you selected the location you press the icon at the bottom right and it takes you to create a profile section. This is for new users to create a profile that’s personal to me which has features such as adding a profile picture, a small section to write interesting things about themselves, favourite things to do when travelling and etc.

The 4 frames are all linked together by auto animate on Prototype. The second frame slides up into the screen where you can select to either import from camera or take a photo. This section shows importing a photo from album. I used Twitter as influence on this section they use a simple slide up album. The layout of the this section is very similar to other parts of the app. The centered position of each section with round text circles. The font is mixture of Dunbar Low Bold and Proxima Nova Bold for headers. I think the layout is easy to use, there is heavy use of circles but I think it creates consistency. This section includes the user to enter their birthday as well which is an important part of the app. When user filled in all sections they can see the button at the bottom right which takes them to the main feed.

The video above shows the final frames from Launch screen to the ‘feed’ for a new user. I like the frames on each section, I added more interaction in the app such as adding the location, selecting a profile for photo from your album etc. I made small changes in some frames such as the profile page I didn’t like the mixture of black and orange it didn’t blend together so I used orange as the man colour for round text boxes and headings, lighter shade black for text inside the boxes. I think this version the layout is stronger in terms of layout with everything centered on the screen enables the user to focus better and colours blend nicely. Once the user creates a profile by writing a small biography about things they enjoy while travelling, or interesting things about themselves then they go through to the ‘main feed’. As earlier they selected the location the main, the feed will allow them to see other active users around their location.

The video above shows the ‘feed’ after you create your profile. This section starts off with a small paragraph again introducing the user to the app, they can take few seconds to read it and then click on skip to start using the app. The feed is the main home screen where you can navigate back to and from. The feed allows users to see which users are active around their location and allows them to message them. The design of the feed is simple but practical. It has 3 elements, the first is the hamburger menu on the top left which allows the user to explore the other features of the app and also go to there profile. The second is the main feed is big images of users including their name and location. Then the last section is the inbox, this section allows the user to see if they have a message and it’s easy access they don’t  need to click several buttons to go to inbox. The feed layout is very straight forward and easy to understand. All the users are shown with a big profile photo in a round shape to fit the overall, name and their location. If the user wants to find out more about them they tap the profile photo and it takes to that persons profile. I chose to use a hamburger menu rather than bottom navigation. This is because I think it would be easier for the user to hamburger menu where it has all the features. It helps the functionality of the app. Speaking to Theo about whether it’s a good decision to use a hamburger menu he suggested if the user can easily go back to the menu and it doesn’t take many clicks then it should work fine. So I tested out the menu several times and every feature easily goes back to menu without many clicks.

When you click the 3 lines on the top left corner on the home screen the  hamburger menu slides right and you can see the other features in the app. I used XD transition action slide right as the animation. This tool is really useful as you can choose the seconds and it has other features such as overlay which is also a very useful action when prototyping the app. The hamburger allows the user to first of all see their profile photo and name on the top to creates more personal interaction for the user. Below the profile photo the user can visit their profile, saved messages with other travelers, friends list, privacy and settings. All the features either enable user to create more personal account such as friends list and saved messages or change settings or edit their profile. The icons on the menu some are designed by me except the Solo cycle icon I found them on flaticon website and changed the colour on to fit the app.

PROFILE

The aesthetic layout design also can be seen on the profile frame designs. I had some inspiration from Instagram and other social media apps. The top left you can see a profile photo with the name and location to the left side of the image. This layout breaks the centered layout from other frames which can be good in the app. The font I used for header/name is Dunbar Low and for location it’s Proxima Nova. Then there is a section of Gallery. This feature I added later on in the design process. I struggled on the profile design so I had a look at other UI designs for some inspiration. I could see that my profile layout seemed empty, there was a too much white space so I had to add a feature or change the layout completely. I thought I could add a gallery for the user as it’s a travel app and most travelers take photographs of countries they visit so if they can add them on the app this would make the profile seem more personal and also for other users as it would be interesting. The gallery photos doesn’t have to be photographs of views, it can be you or with friends. This feature is similar like Tinder, the app allows you to have many profile photos. This also helped the layout because it looks more on the screen and more interaction for users.

The ‘About’ section is what the user wrote about themselves with birthday and location. All this is inside a white circle with shadowing to create more 3D effect and hierarchy. I think the design is visually interesting. It’s easy to follow and simple layout system.

The profile layouts above are were designed for profiles of other users and I was finding it hard to choose the one to use in all profiles. They are very similar and have same features such as the profile photo as the round and placed either on top right or top left on the screen. As I said earlier I was influenced by Instagram mainly with this design. However, I struggled with the layout for the biography. In some designs like the 2 screens on the right, I used am orange border to highlight the biography. The designs above were created before the gallery decision so later on I incorporated the gallery in to one of them. The other top right has a white border with shadow to create some texture so it’s not as flat as the design below. Between all 4 of the layouts, top left is the one I chose to use. I then added the gallery section between the profile photo and the biography box.

THE FINAL PROFILE

Reference

https://www.flaticon.com/search?word=bike

Before starting to design on XD I wanted to decide on the colour scheme of the app. As I mentioned earlier I’m thinking about using orange as the main colour on the app. Selecting the colour scheme for the app involves thinking about various elements such as the target audience, the overall aesthetic I want to achieve, whether it fits the context of the app and other factors. From Editorial project I have some knowledge on psychology of colour, which colours evoke different feelings and needs on people. This is mainly used in marketing to try understand what draws costumers into certain brands.  The research showed that orange is a colour which increases attention and increases memory performance. I also thought about green and red however, I think I was set on orange because it’s a bright warm colour which fits really well with the context of my of app is travelling which associated with the feeling of freedom, fresh, excitement these feelings should be represented on the app to attract my target audience which is the solo travelers who want to explore and experience different things. I don’t have a set age for my target audience this is because from the small research I did on on age demographics on traveling trends it says that the number of travelers older than age 30 showed the biggest percentage increase from 2007, rising from 10% of the market to 17%, while younger travelers, aged 23 to 30, have seen a decrease of a similar percentage. So considering this fact I figured out the app should interest and attract people from different age ranges such as Instagram. I think the design is very simple, clean focuses on the usability and consistency in the style. Everything is easy to understand with font choices they mainly used sans serif font which is commonly seen as more readable. However, the design is not really how I want my app to look like but it’s one of my apps that give me inspiration.

I had a look at which colour palettes with orange to maybe have another colour such as lighter orange or even darker orange/red for buttons etc. This way there will be stronger visual hierarchy in the app enabling users to easily navigate around the app. The colour palettes below are very bright warm tones to darker tones of orange and browns. I like the second colour scheme with dark blue and two shades of orange. The blue could be used in the buttons and icons, the two oranges can be used as background colour on the launch screen. The logo I created can be either black which could look too harsh on orange I would prefer it to be white so there’s a soft blend between background and the logo.

 

 

 

 

References

https://groupstoday.com/business/404-travel-trends-by-age-demographic

After all the research I started to think about branding, logos and icons are one of the most important things in an app. I was still unsure about the name of my app which made things lot harder. To come up with a name I started to search synonyms of key words that came to my mind about my traveling and meeting people. These words were travel, explore, talk. Searching up synonyms for these words and writing them down was a useful way to start off. As my app is for solo travelers to find each other and connect as friends I also had to focus on words such as friends, find. The words about traveling and finding friends can be a hard mixture to put to together without giving away too much about the app. The aim to find a name which is short, recognisable and brings together two aspects of the app.

 

The words above are all either synonyms or word associations of words like travel, passage, explore. Once I found an interesting word that sounds good I then found synonyms of that word to find other words. At the end, I had some potentials names like travel buddy, Explore It, Travel match, Trek, Movement. I think these words can be good as a app name, they show that it’s related to traveling which is the main purpose of the app. As I was doing research about existing apps related to my idea, I came across some apps which use words similar to mine which tells about the content in the app yet some names are very different and it doesn’t reveal too much about the app which I think this also creates interest for users to look into the app. The potential names I came up with are very cliche as it reveals everything about the app yet they work with the app well and it could look good with a good UI design. I think for now I will be use travel buddy as that’s the one that works the most and sounds better than others.

LOGOS FOR EXISTING APPS

As the next step I had a look at the logos for already existing apps which you can find them in my Research post. The top 3 are the icons focused on imagery and the bottom two are focused on typography. Looking at the style, as they’re all focused on travel guide I can see the similarities as using symbols associated with traveling such as location symbol. The rest have created their own identity using typography, I like the ‘Klook’ logo, they way 2 o’s blend into each other creates a small detail and stands out in the logo. Couchsurfing app focused on a feminine, simple font in orange which also works well in the app. All of these logos are very simple, using bold bright colours. As these are logos of very popular travel apps, the logos are recognised by users and used by many people around the world. These logos were a good starting point as I can see using bold colours and simplicity what most popular apps used in their logos. For my logo, I want to use a contemporary style focused on typography, a simple but effective logo which can be recognised and looks in the layout design. For this, I want to research more about logos as the the ones above is not the style I like and I think they visually can be stronger.

After the small research I just wanted to go on Illustration and sketch out the first initial ideas I had so I can see which style I want to focus on as I had few ideas. As seen in the ‘Klook’ logo I liked the idea of merging words together decreasing the tracking.

The logos above as the first initial ideas came to my mind influenced from the other existing app logos. I really don’t like these logos I think I just don’t like the name it reveals too much about the app and it’s too long. I like the way ‘buddy’ is merged but other than that I don’t like these they’re not visually strong. I tried to create some hierarchy between travel and buddy using thinner font such as Futura and Cresta fonts and Geometric 231 Heavy BT for ‘buddy’ as I used this font in my editorial project and really liked as it’s bold and stands out in anything. I also made some variations with orange to add colour to see how it would look with black and I think it looks okay but it needs more details it looks too simple with just the way it is. As these are first initial ideas I won’t be using them or carry on creating more variations because I want to change the name. So I went back to searching for a new name.

I was searching for more words associated with traveling and I came up with ‘Solo’ as my travel app is for solo travelers to find friends so for this I think ‘Solo’ sounds much better than travel buddy as it’s shorter, simple but also it doesn’t reveal  much about the app which is what I like the most. Once I was sure, I started to sketch some ideas on my sketchbook then I will create them on Illustrator.

As I was looking at other contemporary logos for influence I found these series of logos created by Ak Desain on Dribble. He creates logos for many companies and when I had a look at his work I really liked his style.

His style is creating simple and effective logo identities for companies to communicate with people. I only chose the logos which are black and white because to me they stood out the most but he also has work with colour. The main thing style he has is he uses imagery or symbols associated with the word or company in the logo. The logos above you can see clearly he has a clear sense of what he wants to communicate, I really like them as they can easily work on anything. I think this style is simple but has a strong visual language which could work really well with my app name and as app icon. As it would include imagery and typography to give the user some idea of what the app is about. So from looking at these logos I sketched some ideas on my sketchbook to begin the process of logo and icon.

 

 

The sketches above are the first initial ideas for my logo. The sketches are very simple and I just mainly  focused on getting  all my ideas on paper which then I would chose the ones I like the most and design  on Illustrator. All the sketches focus on using symbols associated with traveling such as location symbol, compass, a silhouette of a person, a globe etc. As I was sketching I was also having a look at contemporary typography logo designs for inspiration. I think the ones I like the one the most is compass one and the person sat on a plane sit merged into the L part. Those two symbols the word ‘solo’ the most as it shows there’s only one compass and a person associated in the logo I could add a backpack to give more hints about the app.

Then I focused on icons, using borders in different shapes. I used the same ideas but placed borders around them to see what it would look like. I think I like the icon which has the person silhouette and maybe the just the person on the icon and ‘SOLO’ can be under the icon and used as the logo. All these ideas can work nicely on illustrator with some colour like orange or green as for now I want my app to be orange and white. The reason for this is when you think about traveling colours associated with it is warm bright colours such as green, orange, yellow, red. From these warm colours orange is the one I think it would look the best. Orange would stand out on the layout on white background really well, especially as headers with bold fonts. From my research on colours from last project Changing Faces, I already had some knowledge on which colours seek our attention the most and improve memory. I think orange would be really good as it fits to the aesthetic I have in mine for my app. The next step was to design the logos on Illustrator. 

 

The designs above are all the potential logos for my app. I used several different fonts which are sans serif and is very bold in thickness and curves. I believe sans serif fonts suit my app as it creates informal style as traveling is not a formal  activity it focuses on freedom and exploring. Also, everything blends into each other smooths creating it consistency. To start off with I played around with the word it self, placing them differently cutting them and using different point sizes. There’s some designs with diff think it looks good but it wasn’t as strong visually so I then focuses on symbols. I used different symbols for each part of the word. I liked the ones with magnifying glasses but I think this is very cliche and is used a lot in many other logos. The one I liked the most was the silhouette of person sat on chair replacing the letter L. I think this looks very interesting gives a little bit about the app it self focusing on the traveler. I wasn’t sure on whether have straight corners on the silhouette or round edges. But I decided to have round edges so it fits in with the rest of the font and also for my app I think I’m going to focus on round edges in most sections.

 

Using the logo I created more variations but this time focusing on colour and borders. I chose to create variations using black and dark orange which is Pantone FF6A13. I’m not sure which one to us in the launch screen as I don’t know what kind of design I want for it. I have an idea of a photo blended in the screen with the logo on top part of the screen. It depends which colour palette on the screen. However, I think the simple one colour variations is better than the colours versions it’s very simple and I think it would fit better on a screen with heavy photography.

 

 

 

The logo above is the final version with few adjustments. I changed the seat line to a round edges because with this way it blends in with the font and the vector creating consistency. I used the font Geometric 231 Heavy BT, it has heavy thick feature which is very in your face and works well as a logo to make it stand out. I tried other fonts such as Futura, Cresta , Geometric 415 BT Medium but they didn’t look as bold as I wanted them it to be. I really like this logo as I think suits it the content of the app showing the purpose of the app well. The colour is not certain I used the Pantone colour #FF6A13 which I really like so I wan to base my app on that colour however, I will decide on that later on in the project depending on the overall colour scheme of the app.

The next step is to focus on the research about colour. This research would allow me to decide what colour to use on text and background. I think colour scheme is really important as it symbolises the context of the app, it could increase attention if chose correctly and also the compliment the aesthetic.

 

 

 

 

 

 

---

Reference:

https://dribbble.com/Akdesain

https://dribbble.com/shots/6293827-Ramen-119-365

https://dribbble.com/shots/6105413-leave-64-365

https://dribbble.com/shots/6187088-return-85-365

https://dribbble.com/shots/6209992-Send-101-365