Typography

Typography is a technique of arranging type to make it readable and appealing when viewed by an audience. The arrangement of type involves selecting different fonts, point sizes, line lengths, letter spacing, and spaces between words.

Selection of fonts I may use in my final design

Because MCM Comic Con London already uses a sans serif font through out all their designs it would only be right if I continue using sans serif too. Because I’m creating the website on Figma it is obviously limited with the variety of fonts I have to offer. However I managed to collect a variety of sans-serif fonts that should be suitable for my future designs. These examples consist of:

  • Josefin Sans
  • Open Sans
  • Ubuntu
  • Intern

To give my designs more interests I may end up using two of the four I have chosen. One for the headings/ subheadings, and one for general type.

I aimed to select two fonts that had a matching appearance in order to create designs that are both appealing and readable. Certain comic convention websites result for bold, comic-style fonts for headings, while maintaining a clean sans serif font for straight copy. However, I believe this design approach can make it appear overloaded.


App Onboarding

The App Onboarding process serves as a important intro to its uses and needs. It is the first thing the user is presented with as soon as the app opens. App Onboarding feature is meant to be visually appealing for the user to continue using the app. Once opened for the first time, users are shown with a series of screens or animations, presenting options such as a log in/ sign up page, allow notifications, enable location etc. Interactive timed pages presents the information in a flow of how they should be reading it, therefor easier to understand.

My App Onboarding

For my App Onboarding I created a log in/ sign up page. This page is interactive containing a timed flow for when each section of copy appears (see video for demonstration). I wanted it to be timed as for then the user can read it the way I’m wanting them too. They will hopefully read it as each section appears on the screen.

CLICK LINK TO VIEW WORK IN FIGMA

https://www.figma.com/file/Z0vhOArFr7n8aBEzlCvtVg/002_CWRK%3ADevelopment-log-(UI-%26-UX)?type=design&node-id=0-1&mode=design&t=RLVtTPersngJPRaH-0


0 Comments

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *