Labels

Advanced Typography- Final Project





Kyra Binti Rizal Hamzah (0337085)
Advanced Typography
Final Project

Lecture Notes

No lectures

Instructions 
Final Project

 I presented 2 ideas. Honestly speaking, the first one was planned out, but the second idea I came up with for backup during class. . .


Presenting the first idea went great and I wound up skipping showing the second idea at all. 


My initial idea for the typeface was to make each individual letter 3d and buttonlike, but after discussing with mr Vinod, the final concept is for the typeface to contain the graphic/line elements so that when you type it out, it creates a button. 
Fig 1.0- To start things off I dissected a few letters from Roboto Mono to figure out how to construct my letters. I used this typeface as it's monospace and cause Roboto is very commonly used in UI. 
 A characteristic I wanted my typeface to have were for letters to have rounded corners to make the soft look of neomorphism well.. softer? 
Fig 1.1- Initial design of the flat version of the typeface to be used to create the 3d version later on.

Fig 1.2- To get the ball rolling I made these to both figure out how I intended to design my typeface following neomorphic design styles as well as to think about different weights of it. My main focus for the timeframe of this project will be to make the main button typeface as well as the flat version, but I think the button pressed weight could be interesting as it could be used to create animated button interactions. 
Fig 1.3- Also tried out a coloured version of it just for the heck of it.
Fig 1.4- Second draft of the letters. Mr Vinod said I should have done it and made the borders at the same time rather than creating the letters first. whoops



Fig 1.5- After the feedback I got during week 12 I made the necessary changes to the letters, then I added the border, following button border size suggestions I read about in my further reading. 
I faced a a bit of an issue with my font construction after this point; in my original attempts to figure out the shadows for fig 1.2 & 1.3, I used the Illustrator drop shadow effect, but I failed to realise that the drop shadow would apply to every edge of the border and that once I split it up, it'd appear like each letter has a full rectangle around it,so I then spent a good 3 hours messing with gradients to replace it. Another issue that I had was when creating these gradients, I had initially used multiple gradients and clipping masks to create the side bracket character/border rounded edges, not realising that those can't be exported in SVG files, which I needed to do to generate my font in FontLab, so I had to rework them to be as seamless looking as possible without any masks.

Only then did I realise what Mr Vinod meant when he said it would be easier to design the borders alongside the type.

I wish I had progress photos of this entire escapade, but in all my stressing I forgot to take screenshots and made the changes directly on the same assets rather than duplicating them to maintain a timeline of it.

Fig 1.6- I created the border (the side "brackets" took particularly long) and the borders for each letter were of equal length

Fig 1.7- The individual letters in the font have the letter and a top and bottom gradient to create a shadow/highlight border.


Fig 1.8- Since I had the time, I proceeded to create 4 variations of the typeface as per my earlier ideation.


Fig 2.0- Neo Mono Button uppercase (Has borders)


Fig 2.1-Neo Mono Button Press (Has borders, sunken in "pressed" effect)

Fig 2.2-Neo Mono Regular uppercase (No borders)

Fig 2.3-Neo Mono Regular lowercase (No borders, no shading)
Fig 2.4- Neo Mono Button lowercase (Button with flat text). This one created during week 14 after feedback that it could be used for the button's hover state.

There were a lot of issues I faced while trying to export the font into FontLab as it was my first time working with a colour font. First of all, I did a test run to figure out FontLab7 using just Neo Mono Regular, and could not export it. FontLab's site said to use OpenType-TT but that wasn't working, and I only found a workaround when Jon helped me out and figured out that I needed to use OpenType-PS. That was just the beginning of my issues. For some reason, my initial AI designs (which I had to export as SVG files, then import them into FontLab, as that was the only way to handle the gradients) would appear differently in FontLab, and then once I exported the font as otf files, it would look different yet again. I spent days trying to solve this problem, and to this day I haven't been able to fix it. 

PDF Compilation of all the font variations.


Fig 3.0- Flatlay? Mockup? Promotional Image? Of All the different variations of Neo Mono.

Video version of the flatlay to include button animations (My original plan was to create a microsite displaying the font to display the button/hover/click capabilities, but colour fonts are not supported by most browsers so I created this video instead.)

Fig 3.1- UI Design mockup of a file manager application using the Neo Mono typeface.

Feedback
Week 12
A too thick
B curve make thicker 
G curve ontop too small
fix the I and J (weird anchor points)
K leg make bottom wider
make M wider than N
make O/Q out of S
Z make wider bottom than top

Reflection

Experience

Week 11- I'm really glad that sir liked my idea. I've read a lot about different UI trends (skeuomorphism, flat design, neomorphism) and neomorphism is a particularly interesting one. Also, given what I'm going to design (A typeface where the text in buttons are put together) I think neomorphism is the easiest style to translate into a typeface as the style is very minimal and typically uses buttons that are the same colour as the background, just with a coloured shadow outline. Doing this sort of typeface for other styles may be more complicated as skeuomorphism would involve more colours and more complex light and shading, and flat design, although very simple, still has variations of colours and occasionally gradients both in the button fill colour, the outline, and the text colour itself, and condensing it into a typeface may make it lose some of those variables.

Week 14- I'm not very satisfied with the outcome of my project. The design process went as expected but as I mentioned earlier in this blog post, I struggled a lot with the process of turning my design into a useable font. I spent so long trying to export it and making it workable, that right now I'm super burnt out. I still like the idea I had now as much as I did then, and my initial plan of just creating Neo Mono Regular and not the Button variations went fine, but once I got the designs ready I was really excited to complete the full font and all the variations, ready to end this semester on a high note. It also took some time to produce the mockup due to the lack of compatibility and support for colour fonts. I initially wanted to create a website displaying the font, in order to show the idea I had for the different button weights being used together to create interaction animations, but most browsers do not support colour fonts. I then thought it' fine. I'll just make this in After Effects. But After Effects doesn't support colour fonts either, meaning I would have to design the assets first, then only export the files into AE. So I opened up Affinity Designer, my graphic design software of choice (aside from After Effects I tend to avoid using the Adobe softwares, especially Ps and Ai as I personally find Adobe interfaces very complicated to work with) but guess what...... Affinity doesn't support colour fonts yet either...... So in the end I did have to create the assets in Ai. I'm tired. So tired. And disappointed in myself. I really had set my hopes and expectations high for this project. Out of this and the previous typography module, I think I had the most fun with this, and the idea I had was something I was truly interested and invested in. Perhaps one day I'll further develop Neo Mono, but any plans for that will be on hold until colour fonts are more commonplace, both for ease of development and so that there's realistic room for implementation.

Observation

My initial reason for embarking on this specific typeface was that I had never seen type used, be it an existing font with shadow effects or a standalone typeface, that followed the neomorphism trend. I now see why, as Neo Mono is not the most readable of typefaces around. Honestly speaking, if I take off my glasses I can read it even less than I am able to read regular text. Do I think my typeface is interesting and worth the time I spent creating it? Yes. As I mentioned in the experience part of the reflection, I would like to further develop it in the future. Do I think it's practical? ........Not so much. Especially considering that the root of the trend is UI design. I think Neo Mono echoes the type of things that you'd see on Dribbble or similar sites, that when are isolated as visual designs, can seem fantastic in that sense, but if you were to implement it in an actual app, it wouldn't be very good in terms of the user experience. Wow factor and usability unfortunately do not always come hand in hand. 

Further reading

"Design better buttons"- Michal Malewicz


Read this to aid the design of my typeface, and to make sure the button lines i plan to add will be designed well. The article included some helpful diagrams, pictured below.
Keep the corner radius of the button aligned similarly to other rounded elements on the page


Center align the text to the button.  


Use the height of 1 W for the top/bottom padding and 2 W 's for the left/right padding




Labels:

Popular Posts