Apple Design Influences

How has Apple effected web design over the years, and will continue to do so.

History

Apple has always been big on white space, using it to bring attention to the images and the text, while this  is relatively simple design, it can be seen across many websites with similar design to apple’s website. It uses subtle gradients to add depth to otherwise boring content, great text and content that match, icons used across the site, a grid system to keep everything in line, user friendly navigation and use of javascript to avoid long loading times. This can be seen in Apples website along with a lot of other websites that have been influenced by their design structure.

Apples website:

in comparison to

Mac Rabbit:

Versions:

Pixelmator:

Removing Skeuomorphism

Skeuomorphism is the term given the visual style that represents physical objects. The reason for using the visual style to begin with, was that when people first started using computers, they didn’t fully understand how to use them, so designers made icons to represent the original object. This is why mail icon is a envelope, music icon contains a musical note ect. Now that computers have gone ‘mainstream’ and we all understand them much better, we can remove a lot of this unneeded clutter such as textures, reflections and shadows that allowed things to represent their physical counterparts. This was changing content to so that instead of using texture and realistic imagery to represent certain design aspects, they moved to flatter mimalist design. Here are a few examples from when apple removed skeuomorphism from their mobile operation system;

The Icons were all changed to be much simpler, vibrant and nicer to look at, with the removal of physical objects and textures. The same can be said for the design with the apps.

Examples of flat web design

http://foodpornindex.com Is a website that tracks the hashtags of certain foods, healthy and unhealthy. It then shows it in an info graph designed with flat colours.

http://www.franzsans.de Is also shows another good use of flat design to show off the design of the font so you buy it, It works particularly well and I was tempted to buy the font.

Future

I believe that circle user interfaces will be inspired by Apple’s new watch. Circles appear in our natural world, just look at the moon, wheels and fruit. They create emphasis and focus our attention, giving us a defined centre. Apple have recently re-imagined user experience for the smaller screen of the watch but could have potentially created another web trend. Heres a picture of the new operating system.

Using circles in web design isn’t really a trend that has taken off over the years but there are still a couple of websites that use them in their design. Not just using circles in the design but in the user interface will create a completely different experience, something that hasn’t been created on rectangular shaped screens. While it doesn’t take up every area of the space, it will allow for a new type of white space by naturally giving the page more room to breath.

The operating system runs on a fluid icon system where you flick the screen to navigate into areas that aren’t currently visible, a crown on the side allows the user zoom in/out to their preference. If you click on an icon, an animation zoom into the icon until it is fullscreen then transforms into the app. This could be the next step in web design, as previously spoken about in my blog, pageless designs are becoming much more popular and seem to be more logical and less crowded than current designs. Interactivity to create a more immersive experience for the user would work well with pageless designs, I have researched websites that currently use circles in their user interface to create an interactive, pageless design.

A particularly interesting website I came across was (http://www.circle-ent.com) complete with animations and flat colours this website screams simplicity. Circle is a “idea lab”, a company that works on web experiences for ‘fun and brands’, it targets its market perfectly by showing off their digital skill with a fun, friendly user interface. This website seems to have already mastered Apple’s technique of simplicity through white space, the use of flat colours.

Another great example of a user experience that uses circles was (http://vlog.it) which uses a lot of slick animation from arriving to the site, to the introduction of the wheel of vlogs. It was “named as finalist for the 15th SXSW Interactive Awards in the Motion Graphics category” and “won the Awwwards Site of the Day”. Not quite as simple as the previous, it still uses flat colours and white space. Shadows from one circle to the next give the wheel a sense of depth, which makes the century circle stand out even more. It is perfect for its audience, people who want to watch video blogs the site which on a single visit contains about 40 links to videos which all open within the same window with an animation, will show recycle a total of 396 videos. It means users don’t have to leave the page, they click on all videos until they have watched them all then just refresh for another set. It takes for a great user experience, takes on great design concepts.

A website that doesn’t use circles as its user interface, but just adds to the simplicity of the pageless design is this one created for the iPhone game “Hundreds” (http://playhundreds.com). It uses white space really well to give focus to the content of the page, and again uses flat colours. There are clutters of different sized circles together and animations create an experience that attracts the user to pay more attention. As you scroll down the page, you follow a grey circle which is shown above and below other images which creates depth within the page.

References:

http://www.dtelepathy.com/blog/design/8-reasons-why-pageless-design-is-the-future-of-the-web

http://versionsapp.com

http://webdesign.tutsplus.com/articles/how-apple-has-influenced-web-design-over-the-years–webdesign-2553

http://www.businessinsider.com/apple-otl-aicher-ios-7-2013-7?op=1

http://webdesign.tutsplus.com/articles/flat-design-ios-7-skeuomorphism-and-all-that–webdesign-14335

http://www.apple.com

http://versionsapp.com

http://www.pixelmator.com

http://macrabbit.com

http://mashable.com/2013/06/12/ios-7-apps-comparison/

http://wpmedia.business.financialpost.com/2014/09/apple-watch-features-apps.jpg?w=620

http://www.digitalartsonline.co.uk/news/mobile-creativity/see-how-app-designs-have-changed-in-move-from-ios-6-ios-7/

http://gizmodo.com/skeuomorphism-will-never-go-away-and-thats-a-good-thin-1642089313

http://designshack.net/articles/graphics/designing-with-circles-tips-and-advice/

http://i-remember.fr/en

http://www.theprz.com/

http://www.businessinsider.com/apple-otl-aicher-ios-7-2013-7?op=1

http://www.awwwards.com/best-websites/franz-sans-powerful-pleasant-1

http://www.theprz.com/

http://activetheory.net/#!/work/food-porn-index

http://www.franzsans.de/

http://foodpornindex.com/#!/berry

http://wp.iosfans.com/wp-content/uploads/2012/11/Apple-Logo-Banner.jpeg

Advertisement

A history of typography

Typography dates back as far as 1200 BC when the Phoenicians gained independence from the Egyptians, they developed the first language composed entirely of letters. Greeks then went on to develop this by adding 5 vowels that we use today but missed spaces, punctuation or lowercase. The romans were the next to improve the language by keeping the “ABEZHIKMNOTXY” letters and remodelling the “CDGLPRSV”. “UW” letters were based upon the letter V and were being used by the year 1000, J based upon the letter I wass added by 1500. Only 57 years later in 1557 Robert Granjon ” invented the first cursive typeface, which was built to simulate handwriting.” The first groundwork to a different type of font was when William Caslon IV created the first ever font without serifs, called sans serifs was ‘ridiculed’ for it. Years later the arrival of the Macintosh and the original concept of Graphic User Interface (GUI) meant user could take advantage of a total of ten different fonts on screen. The explosion in font design was when apple created the Truetype font technology that allowed small time designers to create fonts.

The different types of typography

There are many different categories and sub-categories of typeface. There are many factors that can effect the way we perceive text, weight, style, proportional, monospacing & mood are all major factors in this. The difference between serif and sans serif can be seen in this image; Serif Serif fonts are usually used for large amounts of text, in print or online, Old Style serif, Modern serifs and Slab serifs are the three main types of serif.   There are many examples of serif fonts being used today, the ibooks app offer many font choices but only one being sans-serif, the reason for this is as earlier stated, serif fonts are usually used for larger amounts of text; Old Style Serif typeface is one of the original roman typefaces designed in the sense that the style of the letters come from the fact someone is writing them with a pen at a consistent angle. This Apple advert below shows a good use of the old style font with sloped serifs.   Modern Serif typeface uses many of same ideas to create the font but create a bigger contrast between the thick and thin lines, have vertical stress and minimal brackets. The TIME magazine uses this on the cover of their magazines.   Slab Serif  typeface have almost no contrast between the thick and thin lines with thick rectangular serifs, the most notable is the use of the font Clarendon Bold Expanded in the sony logo (original is top);   There are other uses of the typeface in mainstream media. The U2 album “How to dismantle an atomic bomb” has the exact same font as the sony logo (original is top).   The origins of this typeface was back in western “wanted” posters which i have mocked up here; Sans-Serif typefaces look modern as they do not have the the ‘serif’ details on the end of characters. The font can be broken down in to four major categories. Grotesque, Neo-grotesque, Humanist and Geometric. Grotesque typefaces are usually very similar to Sans-Serif fonts just without the serifs. It’s original meaning was “restricted to an extravagant style of Ancient Roman decorative art rediscovered and then copied in Rome at the end of the 15th century.” This cover of Vanity Fair shows an example of the use of a grotesque typeface in use, Sans-Ps-Cd (below cover) is very similar, but lacks the thinness and the height as you can see here:     Neo-Grotesque typefaces are plain and simple in comparison to the grotesque fonts. A modified version of Univers used in the HUGO BOSS logo, as you can see they have mixed serif with sans serifs which add clarity and contrast to the logo…   Humanist typefaces are the most legible out of any font, they have the biggest variation of the line widths. Easily the biggest user of this typeface is the BBC when they used the font Gill Sans.   Geometric typefaces are designed too look like they are layer out using direction. GQ’s cover is a mix between both Century Gothic and Futura, to further study the geometric font, I decided to research the covers that GQ do and then recreate my own.

I studied these covers for things that I would need to re-produce on my cover, a couple of things that caught my eye was there fact that GQ was behind the faces, two covers also feature a red transparent box with text about the magazine. The covers tend to feature about 3 different font colours and sizes alternated across the cover, this was something important I needed to use. I photoshopped the background out of an image of myself, and replaced it with grey to white gradient. Used layers to put text in front of, behind of and around me, using varied sizes on the different sections, I give it a very realistic look. I make sure the text layout is exactly like the GQ cover for example the text is structured to the left and right, the text is measured from the sides to be flush all the way down also has a red line along a title of a feature and the red plus sign at the bottom just like the yellow one on Robert Downey Jr’s cover.

Script

Formal

Formal Script typefaces were created usually between the 17th and 18th century, the best example of a formal script typeface is the Spencerian Script which was created in the 19th century. There are two major companies that have used variations of this font. First one being Coca-Cola;

    The only difference between mine and the original is the letter spacing. Coca-Cola’s are joint and are inter-looped. I have also created this image;       The Ford logo and Coca-Cola’s is very similar, using variations of the same font. You can see the font is varied to the point in which some of the small details are not the same, but you can see some of the similarities in the fact it flows like handwriting. I have also added the Coca-Cola logo in the top right just so you can note the similarities between the three.   Casual Casual Script typeface show a more relaxed, active hand. The fonts tend to look like they were created with a wet brush instead of a pen nib. They started to become mainstream in advertising in the 1970’s. A great example of Casual Script typeface being used was created by sbdesign with this design for a stationary company.   The next stop on my journey on typography will be to learn how to match certain fonts.   References: http://planetoftheweb.com/components/promos.php?id=174 http://www.noupe.com/design/a-crash-course-in-typography-the-basics-of-type.html http://en.wikipedia.org/wiki/Slab_serif (http://www.gngcreative.com/newsletters/images/serif-sansserif.jpg). http://farm8.staticflickr.com/7206/6880915996_44cb8620f5.jpg http://www.kitguru.net/channel/generaltech/matthew-wilson/sony-executives-will-cut-wages-and-forfeit-bonuses-this-year/ http://cdn.americansongwriter.com/wp-content/uploads/2010/08/u2112.jpg http://photos.imageevent.com/afap/wallpapers/musicpictures/u2/huge/U2-How-To-Dismantle-An-Atomic-Bomb.jpg http://oakdome.com/k5/lesson-plans/photo-editing/wanted-poster/blank-wanted-poster.jpg http://idsgn.org/posts/know-your-type-clarendon/ http://typophile.com/node/13516 http://www.honestjohn.co.uk/media/3297865/ford-logo-big.jpg http://download.fontmeme.com/fonts/10107/coca_cola_ii.html http://upload.wikimedia.org/wikipedia/commons/thumb/c/ce/Coca-Cola_logo.svg/800px-Coca-Cola_logo.svg.png http://en.wikipedia.org/wiki/Script_typeface http://williamaaronkelly.files.wordpress.com/2012/01/tumblr_kvfjo9wnlt1qz4s4lo1_500.jpeg http://th07.deviantart.net/fs43/PRE/i/2009/067/7/c/Time_magazine_cover_psd_by_almosh82.jpg https://akbrodie.files.wordpress.com/2014/09/42860-08-dec-gq-cover-796492.jpg http://www.drfunkenberry.com/2012/08/29/happy-birthday-michael-jackson-human-nature-howie-t-remix-listen-now/michael-jackson-gq-200809/ http://www.360nobs.com/wp-content/uploads/2013/04/Rober-Downey-Jnr-GQ-May-Cover-2013-360nobs.com_.jpg http://www.vanityfair.com/dam/blogs/2013/jennifer-lawrence-cover.jpg http://logopond.com/gallery/detail/159380 Featured Image: http://flaffitis.files.wordpress.com/2011/05/evolution_of_typography_by_silverthornz-d32ydi0.jpg