Brief 15 - Adding Weights

Following the completion of the letters, I started on creating the weights. I wanted four weights, light, regular, semibold and bold.

I tried out a few different stroke variations and decided on the following four. I decided on these because of the obvious difference in their weight. I didn't want subtle differences, I wanted these to be clear.

While I could have gone thicker for the uppercase for a bolder setting, it just was not working for the lowercase.

As shown above, the 'e' is extremely squashed in the thicker weight, so it would be unrealistic to make it thicker, and I did not want to change the angle of the cutoff on the 'e' because it works with the entire typeface and other letters that use this as well.

Above shows how much thicker the uppercase could have gone without making the letters hard to read. I think I could consider creating the uppercase in this weight in the future, but right now I want the four weights which work over them all.

I applied these weights to all characters and below shows how these type out and sit.

I'm happy with the way the weights have turned out, however I am still slightly concerned about the 'e'. I do think on a smaller scale it does look like the bottom curve is touching the bar, but apart from that, all letters work really well and I am pleased with how it has all turned out.

Brief 15 - Rounded Version

Following the completion of the slab serif, I moved onto the final variation, the Rounded version. This is very simple to do as I just have to round all the ends and edges of the sans serif.

The way I will be rounding these is shown above. I have decided not to round the sharp points on the joins of letters, shown in the 'H' and 'K'. This is to keep the letters defined as clearly as possible. I applied this to all the letters and numerals.

I found this a very easy task. It took slightly longer than expected due to some of the ends being curved as well, such as the 's' or 'w', however I think the majority of these went well. They might need cleaning up a bit but that will be determined when the larger weights are created and some of the points don't come out quite right, but on the most part I am happy with this variation. I think i works really well.

At this point I have completed all three style variations and I think they are all working really well, and I am excited to do the weights and expand on it all.

Brief 15 - Slab Serif Version

Now the base version of the typeface is created, it's just a case of creating the two variations that I want to for it. The first is the Slab Serif.

For the original typeface, the initial intention was to create a slab serif, so I already have a very good idea as to what this will look like as I took the serifs away from the base typeface in the first place.

I wanted to follow the same style of serif I did previously, just small and straight, and on the outside of the letters.

To create the serif length, I did double the width of the letters strokes. The height of these serifs are the width of the strokes. This is so that the serifs are completely consistent and work effortlessly into the letterforms.

These are the serif variations that will be throughout the typeface. On the curved letters, 'C' and 'G', the serif will be just at the top. All serifs will be on the outside, as shown on the 'H'. The only exception is the 'J', where it works much better on the inside. The 'I' serifs are on alternate side to create a balanced letter. The 'K' shows how the serifs will work on angled strokes also.

I then applied these serif rules to the rest of the uppercase.

For the lowercase, with the letters being smaller, I decided on having smaller serifs. This is to create a balanced look when these letters are put next to each other. The serifs on the uppercase work at the length they are at, however, putting these on the lowercase results in the letters looking a bit strange and being very wide. The smaller serif on the smaller letters is proportional to the way the serifs work on the uppercase.

Longer serifs:

I applied this serif size to the lowercase.

Following this I added the larger serifs to the numerals.

I think the serif works well across all the characters. While I wanted to keep the serif size consistent across the uppercase and lowercase, it is clear that this was not realistic and they are consistent by how the serifs work with the letterforms seamlessly. I think the style of serifs still keep the typeface contemporary, which is what I want, and I think this is really promising.

Brief 15 - Adding Lowercase

Following the changes to the base letterforms, I moved onto the lowercase. Having already established the x-height though the numerals, it was just a case of creating the letterforms around these.

I did these letters in various stages due to the nature of the different letters. I started with the very simple letterforms which sit between the baseline and x-height. Of these, I started with those that circle circles/are very simple.

The 'o', 'a', 'c' and 'e' all use perfect circles are were very simple to create. The style of 'a' was decided on because it is more contemporary to use an 'a' like this than the more traditional kind. It also works to the use of a perfect circle.

The end cuts on the 'c' are the same as those used in the uppercase version. This is also the same with the cutoff in 'e'.

The 'n' and 'u' use slightly smaller circles. This is to follow the structure decided on in the uppercase with these letters being thinner than the 'O'. There is also a lot of space in these letters, so when these are too wide, it is very noticeable. The 'x' follows the same width as these.

Following these I moved onto the letters which are slightly different. These all followed the same width as the 'n', 'u' and 'x'.

In terms of the 'r', I initially tried the same cutoff angle as the 's', but found that this point made the letter wide and just not sit well. I tried the 'c' cutoff and it seemed to work much better.

I then moved onto the 'w' and 'm' as these are the last that sit between the x-height.

These were simply made up of two v's and two n's.

Following this I moved onto the letters which have an ascender and descender height involved. I decided on a descender height which matched the ascender to keep consistency.

The majority of these letters are very simple, with the 'f' and 'k' being the only exception. The 'f' followed the same design as the b, d, p and q, before being cut off in the centre of the circle to create the letterform.

The k was slightly different in the way it was made up. Initially I had tried the arm to the x-height, however it just looked too low, so I added a slight bit more height to it and it looked much better. I didn't necessarily want to break the grid, but I do think it was necessary for this letter.

Following this I had a few more letters left. I started with the 'i' and 't'. I have left these until now because they need a bit of consideration into where the Terminal Height will be. I did initially try this at the ascender height, however the dot on the 'i' looks far too heigh, and the 't' looks a bit strange.

I moved these up and down until I eventually found a height which seemed to work well for both. I also moved the height of the 'i' stem to he height of the 't' crossbar to create a bit of consistency across these characters.

Following these, I worked on three letters which I had not done yet - the 'g', 'j' and 'y'.

I was having issues with these all moving down to the descender height, particularly the 'g'. I feel that it just does not look right at all. The bottom half looks too low and really unbalances the whole character. With this, I decided to create an alternative descender height. It is not something that I necessarily wanted to do, but I think it definitely benefits the letters.

Completed Lowercase

Overall I am really happy with the way the lowercase has worked out. I think that it works really well and is consistent with the uppercase. I'm happy with all the letters and found that they were all relatively easy to make.

Brief 14 - Branding

For the branding I had a very clear idea of what I wanted. I have decided on the name being 'visit', due to the fact that it is very general and city names can be put after it so it would be 'Visit New York' or 'Visit Melbourne'. I quite like this because of how it can apply to all cities very easily.

I also wanted to incorporate the map marker as this also plays on putting the city name with the brand name.

Ideas:

After experimenting with all of these logos I decided that the one in the bottom left is the best. I really like the way the marker is integrated into the name. I did try curving the lines in the marker to make it more interesting, but I think that it takes away from the 'V'. I think that this icon is finished off well with the small piece of land below it. It is a small detail which I think stops it look like it is floating.

With he colour scheme, I had originally just wanted to use the red and grey, but found that the inclusion of the green makes it seem a lot more friendly and fun - something which should be when it comes to travelling and holidays. I also tried a light grey, but found that it just wasn't as strong as the darker grey. I also think that these three colours work well together and will make for something visually exciting in the App. I do think that I will incorporate the light grey in there somewhere because I do like the colour and it does work with both the green and red.

In terms of body copy for the city names, I like the contrast of the thinner typeface, and with it being larger. Also, having it below, the marker is pointing down to it and essentially 'landing' on it.

Chosen identity:

Brief 15 - Initial Changes

To start the editing process for this typeface, the easiest way to I find to do that is start with the thinnest weight for the typeface and get that perfect so creating the thicker versions is much easier and more consistent. It also allows for me to make sure that the typeface will work at thinner weights instead of just working at thicker ones and looking out of place or uneven when it comes to creating the thinner versions.

In terms of the thinnest I want to go, I dislike hairline style typefaces as they never really print well or come up on digital well unless large. Keeping this typeface in with what I personally like is what I wanted to do from the start, so I will start with a weight which is classed as light/thin rather than hairline.

Thin version:

To get a better view of the letterforms and see them in their most basic form, I got rid of the serifs.

Seeing the typeface like this allows me to see all the issues with each of the letters and will make it easier for me to keep all the letters consistent.

One of the things I did when originally designing the typeface was to try keep the majority of the letters the same width, however this clearly works better for some letters than others. Keeping them the same width isn't necessarily something that needs to be done, especially when some letters don't look anywhere near as good as others with this in effect.

An example of this is the 'A'. It looks quite wide compared to the 'B', however these are at the same width. Something key to remember in type design is that the angles of the lines used changes the viewers perception and can make letters look wider or thinner.

Another thing that needs attention is the 'C' & 'G'. Their curves don't seem to work quite right, and editing is needed in terms of where the ends are cut off .

The 'W' looks out of place. While I had originally wanted to keep the mid-point low, I do now think that it doesn't work well and really makes the letter look out of place.

Another change is the 'R'. Again, like the 'W', I had an opinion on how I wanted the leg to be, however I don't think it works well at all in this thin version of the font.

With this in mind, I edited a number of the letters to make them look better.

Letter changes:

The ‘X’ suited a slightly thinner width which made the letterform appear taller instead of a square.

The length of the leg on the ''L' made the letter look too long and it didn't work quite right. Taking off a bit of that length helps make the letter look slightly more proportional and natural.

The ‘C’ follows the same design as the ‘O’ in being a perfect circle. The initial design of cutting the centre right off with straight lines worked well in the hand rendered design, however when taken digital and cleaned up, it looked very abrupt. This was changed to a softer angle cut to create a thinner and symmetrical letterform.



The ‘G’ follows the design of the ‘C’. The central serif did not work well in the initial digital design. It was too low and the way the curve went into it was unnatural, so this was corrected with a different approach of taking the cuts of the 'C' and creating a flat edge at the bottom right.

The ‘V’ was initially the same width as the‘X’, however, through stage one and two, it became clear through this design and the same design in the letter ‘A’, that it was too wide. Following the same width as the ‘U’ and previous letters, the ‘V’ was thinned.

The ‘A’ follows the same design as the ‘V’. It was clear through the ‘A’ that the width was too large and a thinner appearance would look more natural.

Like previous letters, the width of this letter was thinner slightly to create a less square-like.

The ‘Q’ is the letterform which I wanted to have a bit of a flourish on for the typefaceas it has the tail which is not present in any other letter. Starting with the tail which went all the way through the centre, it worked very well, however to get consistency with the rest of the typeface, it was better suited to stopping half way.

With the success of the flourish in the ‘Q’, I did add this to the 'R', however I decided to move back to a more generic straight line as it strengthens the letterform.

Originally, the ‘W’ was the same design as the ‘M' with a mid-height central point, just with slanted strokes. However through development, it became clear that the low centre point was not working with the rest of the typeface. Moving the point up to the top create a stronger letterform which worked better.

The development of this letter was through the attempts of making it look more natural, while keeping in with the appearance of the rest of the typeface. Following the other letterforms, I moved to use a thinner width. Trying to find a width that worked for the letter without looking out of place with the rest of the typeface was important. I changed the angles on the ends as well, first trying the angle that the 'C' and 'G' use, however this did not work very well because of the angle. I then tried a slight angle from the original flat cut, which was a bit more subtle and seemed to work well.

Following these changes, I feel that the letters work much better and are definitely more considered and professional in appearance.

Looking at the numbers, the main thing that makes them look wrong is the width applied to them, as it was on the letters. Changing the width and some of the angles will make the numbers look a bit more fluid and consistent.

Changed numbers:

The changes are very clear, and I think they work much better and look far more professional. I decided on building up the numbers using perfect circles, as I had done for the uppercase. The initial design obviously uses circles too, but the characters are elongated and unnatural. A move towards using just one circles width is what I wanted to go for. I decided this because this will be the direction I will take when creating the lowercase, and creating a consistency is what I want.

I decided on an x-height from the 'H' bar, using the top of this as it is central to the letterforms, but slightly taller, so it should work well. The numerals follow this, with slight changes to the '3' and '4' in terms of their mid-heights. The '4' bar is obviously lower, working to the same level as the 'A' bar. The '3' mid-point is central to create a symmetrical numeral.

Final Changes

Overall I think these changes have greatly benefitted the typeface and give a much more professional look. Previously the typeface didn't look as clean and consistent, but now I feel much more confident in it. I am feeling much better about the aim of a contemporary, clean and professional typeface as I think these base letters and numerals really work well and are proportional in design.

Brief 14 - Initial Wireframes

The typeface used in the branding is Montserrat, so this is what I decided to use across the whole of the App to keep consistency. It is also a typeface which works really well on screen, and it has a few variations in style which I can play around with.

I had a pretty clear idea of the kind of design that I wanted to do for each page, so started by creating some initial wireframes, incorporating the colours where I could.

Login/sign up

I want this page to be really simple and self explanatory in terms of what the user has to click. I think the whole background image would work well - something faded and maybe light so the logo is visible.

New Trip pages

I started by deciding on the two tabs at the bottom. I wanted something quite subtle, but clear in showing which tab is open. I didn't want it to be a full colour button, so a thin line across the top seems to work well. I also incorporate the light grey here because it keeps it light. Overall I want the App to be light, so the backgrounds for everything will be white. The light grey creates a contrast and clear buttons, but stays with this lightness. The blue circles indicate where imagery/icons will go.

City homepage

The city homepage is something that I wanted to be simple, but informative and easy to use. When the user has clicked onto this page, there needed to be tabs for them to be able to flick between 'activities' and 'my planner', however I did not want to replace the tabs at the bottom with these. I decided on putting the table to the top instead, keeping them in the same style, but clearly thinner so they're 'sub-tabs' as it were.

I want each small section to have it's own icon, and I want this to be integrated into the individual activity page as well, shown on there somewhere to signify what section the activity is part of.

I also thought it would be useful for the user to be able to see what day of their trip they are on, and a small weather note as well.

Category/My Planner

To create consistency across the App, I wanted these two pages to be identical in design. When one of the icons on the City page is clicked on, they will be taken to the category page, which lists all the activities in this section. This will be scrollable. I also added arrows to the bar at the top so the user can easily flick through the categories as well.

The My Planner page follows the same structure, but instead of flicking through the categories, they can flick through each day of their trip and see all the activities they have planned. I also added a 'map my route' button to the bottom of this page. This is what the user will click to map their activities together and show them how to get from one to another.

Activity Page

 

In keeping consistency, this is the same general layout as the city homepage. This is what comes up when a user clicks on the event from the categories list. They have the change to be able to flick through the other activities in the same list as well.

There were only two options that were needed on this page - view on map, and add to planner. When the add to planner button is clicked, a calendar will appear and allow them to book it into a day and time to their trip. I also thought a short description would be useful so the user knows exactly wha they're look at.

The white circle indicates where the category icon will be.

Another idea I had for this page was the bit at the bottom which shows other activities close by. This is useful because users might want to spend a full day in one specific area of the city, so they are able to see everything available near where they are.

Map Route Page

The map route page is what will appear when the user clicks this button on the my planner page. I decided on having two variations of this page as each can do different things. The first is a visual map, which will be similar to the 'view city map' - it will be a full flat designed map of the city with the day activities and route shown. The second is the listed version, which is visual, but it is basic information, just showing the points of the day. The white button in the top right corner is to allow them to flick back and forth between them.

Something that I want to do on this page is have the route lines in a variety of colours to show the type of travelling involved, for example, water travel would be in blue, etc.


At this point I am quite happy with the progress of the app and how it is all looking. I think that style of design works well, and when I create the icons and flat map, it will look even better. I was a little unsure about the white background initially, however I think that it keeps everything bright and clean. What I want to do is maybe incorporate the green and red a bit more into some of the buttons. They're all grey at the minute, so adding the brighter colours should make it look better.