Updated wireframes

I tried my first wireframes design previously, however the circle images did not work therefore I went back to the drawing board and started over again. I included the primary colours and my updated idea for a black banner for my navigation.

During the group critique on my website I had some changes to make. The advice I received form Kyle and Pauline really helped make my website appear more interesting and professional looking. I had some problems with the entering of text and positioning the text to the left so it is more easy to read but they helped me with that.

They also told me to make sure my title is in line with the navigation for a cleaner look. I did this and realised it made such a difference.I also changed the colour of the heading titles of my essay to co-ordinate with the colours of Piet Mondrians work – the primary colours. I feel like this ties the website together and enhances the overall design, furthermore making it more interesting to read and look at because the all black text was a little boring.

They also advised me to put the title of each image underneath beside the ‘fig’, so it is clear what each image is and who made it etc. I chose a smaller font and to change the colour to a grey so it is still legible but not as heavy on the screen. I think this looks nice against the bold black navigation. This is an example of how the description of each image looks under this piece by Piet Mondrian.

I also took their advice on placement of my overall body copy and the centering of my website. I had to take away the padding I had and then I had to make sure I had text-align centre in my css. I also changed the bibliography to alphabetical order and changed the centering so it can be read from the left. Overall I think the end outcome was successful and I feel like I executed that clean look I wanted to with the black and white theme with splashes of the primary colours throughout.

In addiction to the John Baskerville and history of type exercise we were given a short exercise to practise css further. We had to take three of the same pieces of text – version 1-3 and make each one a different type. I chose ‘libra Baskerville’ , ‘open sans’ and ‘lato’ for my three choices and this his how they turned out.

I chose this green colour because it caught my eye as I was browsing through Adobe colour. I thought that this earthy green tone would go well with the black and grey text.

I think all fonts work well and I especially like the drop cap in the first version ‘Libra Baskerville’. I really like the tale on the ‘J’ that this from cap possesses unlike versions 2 and 3 that have more modern and sleek looking fonts.

What I could improve on:

Looking through this exercise again if I could have done something differently or the areas in which I need to improve on regarding CSS is fonts. I think the fonts ‘open sans’ and ‘lato’ are too much alike. This got me into researching both fonts and found lots of blog posts and online discussions on designers websites on ‘Open Sans vs Lato’. Both fonts are so alike but there are slight differences that encourage discussion for which is better.

However I think that to show a wider range of this body copy I should have looked for a three very different fonts. Overall I enjoyed this exercise and the learning skills that came along with it such as the introduction to the drop cap and the addition of breaking up each version with the black line. I am always discovering new tips and techniques when practising a new css exercise and I am finding it easier each time I use it.

During our John Baskerville assignment we were asked to use information given to use an d to recreate the html and css tasks on our own with the ‘History of Type’. I liked this process because it made me practise the skills I had been learning in class.

I chose a different colour to my John Baskerville piece because I wanted to experiment with adding different colour with CSS.I chose a blue, green and orange colour scheme which I think worked well and was complementary. I found it tricky trying to transfer the same skills I learned from the Baskerville sample but with practise it got easier as I kept going. I enjoyed doing this project on my own as I felt a senes of accomplishment at the end of it.

The first versions were similar to the Baskerville project it was adding the simple html and the standard CSS and choosing the colour.

I chose a more modern typeface in comparison to the Baskerville piece I went for a more traditional type but for this one I wanted to reverse the concept. Since the topic is ‘History of Type’ I didn’t want to go for the stereotypical traditional old-style typeface to match, I wanted to do the opposite. Therefore I went for a sans-serif and more modern approach. I think this works well as it is easily read and works nicely with the colour palette also.

There was a table to be added just like the Baskerville task, however this table was different and more complex than the Baskerville one. Therefore, it took longer to input the information in the HTML. There wasn’t just two columns, so I did find it more tricky and if one section was incorrect then it would mess up the whole table. But when I got it right it was satisfying to see a correct table. I like the colour I chose the earthy green complements the blue header well I think.

To add images to this project I wanted them to stand out and be different from the Baskerville task, not just the plain image. So I want to take them to photoshop and experiment with colour, hues, size, and perhaps try different positioning or crop out the portraits and place them on a different background.

I went with a blue/green tint over each image to tie in with the navigation, I tried green and orange but they didn’t look right. Blue just seemed more complementary. I like how the overall outcome turned out and feel like this ‘History of Type’ project helped my CSS and HTML skills improve greatly. I found it really enjoyable to put into practise my skills I learned from the John Baskerville project.

During the feedback and group critique on my type specimen I came away with advice and tweaks I had to make on my designs. I chose this one for Kyle and Pauline to give me feed back on because I liked it the most.

They told me that the body copy was not in the correct placement and that I should just keep in a simple paragraph instead, near the bottom of the screen. They also said that I should work soon the opacity of my letters and add a mixture of having less opaque and opaque lettering so it doesn’t look as heavy. So I did all of these things and this is how it turned out.

Although I feel like this is an improvement I still was not happy with the end result I felt like it did make the overall design appear less heavy but now I feel like it looks weak and not the look I was going for.

During the feedback Kyle said I should work on another type specimen that he liked and said could be interesting if I work on the opacity. This was the initial design.

They told me to take away the lines and perhaps take into account the beauty of the tail of the ‘Q’ as that part of the letter can be very interesting. I worked on this and this was the end result.

I tired two different tones of autumnal colours for both and varied the placement of ‘Palatino’ which I lowered the opacity on to not make it look so heavy. I think both turned out well however I like the first one where the Palatino is lighter and positioned in the background. working on this design I think I like it better than my grey ‘g’ type specimen.

Our lecture on web typography was an interesting one for me because I was always curious where all these new fonts came from and why there was so many to chose from.

A brief history of web typography

 The creators of the web knew the importance of typography and fonts in the early days. Even the fist version of CSS in 1997 had special mention of fonts. However when the first computers were launched there was only a small variety of fonts available for the user. Only the fonts that were installed in the computer or software itself could be used, therefore fonts from the internet could not.

Ten years later designers were still working with the ten fonts they could access and then in 2009 web fonts became a thing. Right on the heels of all this news came the service Typekit, launched by Jeffrey Veen in May of 2009. Typekit was a font-hosting service that connected font foundries to designers and developers with easy to understand licensing terms and cross-browser compatibility.

Now there are endless possibilities for font styles and families available for use on all platforms without any restrictions on websites like Googlefonts,

A journey through beautiful typography in Web design

I wanted to do more research into web fonts. So I took to the internet to search for websites that use web fonts as a way of enticing the viewer and therefore use them to the business’s advantage. I wanted to find sites that use interesting and innovative fonts that really add the the experience of the website. These are some that I found.

This is a natural skincare website and this one caught my eye because of the simple yet delicate style and placement of their web fonts. The font style is simple yet suits the brand perfectly because their products are all natural and simple. The mix of sans serif type for the navigation  and a more traditional font for the description of what the brand is works perfectly and really makes this webpage appear classy and luxurious.

This website I found is called ‘I weigh’ and is well known for its unique home page and bold use of typography. I really like the colour palette used as I feel it enhances the impact of typography in the background. The simple sans serif navigation also doesn’t take away from the striking title ‘mental health’. The size and placement of the ‘title’ depicts what the what the website is about and gets straight to the point as the opening page of this website.

This is my favourite find. Its a website called Autumn and they are a small team of multi-disciplined creatives based in London. Their services encompass anything from Graphic Design to Branding, Print to Photography. They work with a human centric approach, crafting emotive, meaningful and engaging digital design. The most eye-cathing part of this website is definitely the web typography and the overall function of the website, this encouraged me to read on and find out more about what they do.

I really like the traditional like typography they used as it looks classic and sophisticated, I also admire the use of the same type only in italics for emphasis. There is also a combination of fonts used, a sans serif used for the body paragraphs, this only enhances the importance for the quotes or essential information that is in bold and a different font. I think what else makes me like this webpage so much is the placement of the typography, the variation of having the text in the centre and then toward the bottom of the screen makes the information easier and more enjoyable to read.

Tasks in class

In class we were given two pieces of texts of different genres and we had to chose an appropriate font that suited the information. I really enjoyed this because I knew the themes of both texts, therefore I knew what text would work well and represent the text correctly. The first one I done was the Frankenstein text by Mary Shelly. I knew this was a gothic horror story, so I chose the ‘gothic’ font which I thought really worked nicely. I chose a simpler traditional font for the body so it wasn’t as striking. I think both fonts complement each other and it was fun to pick a daring, bold font that I wouldn’t normally use.

The second piece of text was in the science-fiction genre, so this was a little more tricky for me to select a legible yet modern font. I went for a typeface that was easy to read yet had a science-fiction feel to it, so I chose a type that had squared letters with a larger size. The only thing I would change is that I would have chosen a different font for the title so it would differ more from the body. Other than that I think the fonts I chose work well for the text given.

Todays lecture was an exciting one for me, as it displayed all the reasons why young designers should be excited for the future of their careers in Interaction Design. We were shown the here, now and the future of this industry, which was eye-opening and inspiring for a young apsiring designer like myself.

What did I learn from this lecture?

I learned that as current designers in this day and age that the devices we are going to be designing for, for example, mobiles, iPads, watches etc. That the content will always be changing, and as designers we have to be prepared for designing for new content and new devices constantly.

I also learned that alongside this, that to when confronting this challenge for always having to be prepared for the next new thing, is that I have to remember that the web is fluid and over the years little has actually changed in terms of web standards. (Tim Burners-Lee’s discovery). That in fact we have done a full circle with ‘tag’/ the ‘tag war’ over the years and that we are back to the original tags used in the first versions of HTML. That is why universal web standards are so important. So that was a very interesting concept I did not know before watching this weeks lecture.

I also learned that designers should return to the first principles;

1. Proportions- Golden Ratio, The appreciation of spacing.
2. Hierarchy- Order/display of importance
3. Typography- The importance of a suitable typeface
4. Composition- An understanding of composition on screen not just on paper.
5. Narrative- Transitions/animations to create story telling on a digital device.

… and when they all come together greatness is achieved in websites and UI design.

Modern Discoveries

After this lecture I wanted to expand my knowledge and curiosity and search for the most modern and unique discoveries or creations in technology. Of course we have the Alexa (voice activated technology), and we have wearable technology such as the Fitbit or Apple watches (that can basically do everything a mobile phone can), becoming more and more popular with every household possessing at least one. The future of interaction design is only getting bolder and more advanced.

In the lecture we were shown some new creations that are being developed such as a ‘smart sense’ which is a contact lens which when placed in a users eye can give them the power to record with just a blink.

I looked into this further and found that other companies in America are trying to make a smart lens that can magnify surroundings, improving sight for many people who suffer with age-related muscular degeneration. This contact lens will act as a telescope and the 1.55mm-thick lenses incorporate a thin reflective telescope made of mirrors and filters; when light enters the eye it bounces off the series of mirrors and increases the perceived view of an object or person.

I wanted to see what other findings I can discover that are pushing the boundaries of technology and design and shaping the future. This is what I found.

Virtual Reality

I wanted to do some research in this are because in the lecture we were shown developed interfaces that allowed the user to move the screen with gestures etc and I thought it was so fascinating. I stumbled onto a science blog that was sourced by the University of Cambridge that they are developing a new virtual reality software that allows scientists to ‘walk’ inside cells.

It could be used to understand fundamental problems in biology and develop new treatments for disease, which is crazy to think that technology has come this far. The software, called vLUME, was created by scientists at the University of Cambridge and 3D image analysis software company Lume VR Lt. It will allow analysts and scientists new ways to view the data in ways that can stimulate new ideas or initiatives. For example, Anoushka Handa — a PhD student — used the software to image an immune cell taken from her own blood, and then stood inside her own cell in virtual reality. “It’s incredible — it gives you an entirely different perspective on your work,” she said.

Todays lecture was on WorldWar II and the movement that derived from this. Modernism was a response to the results and terrors of the war and what it left behind. Modernism applied to all creative outlets including music, art, design and many more. Modernists believed that they could design a better life for themselves in all aspects.

What is it, how to use it ?

• Reject traditional forms and decorative elements
• Seek a solution that is simple and direct
• Use systematic methods rather than intuitive ones
• Think about relationships in form and content

We learned how to use modernism in design;

• Use primary colours
• Use sans serif typefaces
• Show contrast in typographical material
• Use asymmetrical page layout
• Use grid or clearly delineated page-organising method
• Apply a planned visual hierarchy

I also remembered this from the lecture that stuck in my head – Form Follows Function

There were many artists and designers that were key people in modernism and have made huge impacts in the design world, that are still relevant today. We seen lots of examples of these artists throughout the lecture but these were the few that stood out to me.

Jan Tschichold 

Tschichold was a famous typographer, book designer and calligrapher who created the iconic ‘Penguin’ series books. He was also well known for his posters and claimed that he was the most influencial designer for typography in the 20th century. He worked closely with Paul Rudder (The designer of Futura Typeface), so he got to see first hand how a talented modernist worked and created typography.

His minimalistic posters and book covers with simple forms such as one circle and line reflect the characteristics of modernism, and his really worked well. They were simplistic yet sophisticated and his use of hierarchy in his type make them easy to read. When Tschichold wrote his book on ‘Die Neue Typographie’ he set forth rules for standardisation of practices relating to modern type usage. His style and knowledge on typefaces has had an ever-lasting effect on todays designers and people follow his rules to this day.

The lecture also focused on a range of Americans who played an important roll in modernism during this time:

Herb Lubalin

I liked Lubalin’s work because I was initially attracted to h is magazine covers and advertising work. He is an American graphic designer who worked with Ralph Ginzburg on three of Ginzburg’s magazines.

His work was cutting edge and told a story, his bold use of typography and positioning brings energy to the magazine spread. He stated in an interview ‘I’m terrible because I don’t follow the rules’. I feel like his designs communicates his ideas very well and bring his work to life. He created his first typeface called ‘Pistilli Roman’ in 1964.

He is also known for the many logos he designed. More famously for his culture-shocking ‘Avant Gard’ typeface, he was the designer and typographer behind its creation. He was forever pushing boundaries and at the late age of 59 stated that ‘ I am only finished my internship’, suggesting he was learning throughout his career everyday to become a better designer. Through further research I found that he was also a key figure in the American ‘creative revolution ‘ which went on to shape graphic design and advertising in the 1960’s.

Unlike Paul Rudder or Lester Beall, Lubalin rejected the ‘Swiss Style’, he was more passionate about Graphic Expressionism. I found this quote that he said in an interview he told IDEA magazine.

“Graphic Expressionism is my euphemism for the use of typography, or letterforms, not just as a mechanical means for setting words on a page, but rather as another creative way of expressing an idea, telling a story, amplifying the meaning of a word or a phrase, to elicit an emotional response from the viewer.”

This reflects perfectly how he feels about his work and how impactful the positioning and size of the typography is, furthermore all of these elements effects the viewer differently.

How has their work effected me?

Through all this research on artists these who felt passionately about modernism, who wanted to get away from traditional art and try new angles and techniques, has encouraged me to want to do the same. It has encouraged me to start to look at the most modern trends in art and design, in particular UI/UX design. So I started to search the internet to find the most relevant trends and findings that are new to the design industry today.

This is what I have found.