I assumed that the best place to start when looking at the aesthetic elements of IOS7 was apple's website, and even when filtering out excessive sales pitches throughout, left some good information on the foundations of it.
I thought I'd document some practical use on my own iPhone 5, from the lock screen to the unlocking screen, an opaque sheet of white slides over the screen more and more until the screen has switched, this blurs out the background wallpaper and gives a sense of a new dimension on top of the screen.
The tool bar at the bottom of the screen has this same effect behind it to separate it from the rest of the apps.
When you start up an updated IOS7 app, the first thing you see on all of them is a landing page, this will either consist of a high resolution photo with a logo on top or just a logo, this works as a gateway to the app whilst it loads properly. Here are some examples:
This is a good example of an IOS7 application taking advantage of the whole phone's screen and not filling it with buttons and toolbars (Authentic Weather). This is really stripping back the IOS as we knew it which is a huge benefit to the system and usability. Every page you get to from here has to be swiped to, from the top, either side or bottom.
Top.
Bottom.
Left.
Right.
More and more apps are following this rule of swiping as methods of navigation to fit in with the new IOS7 but also to take advantage of the whole screen for legibility and ease of use. If we were to design an application for IOS7 we would have to keep these elements in mind to allow it to flow more naturally with the OS.
An Ambient, Environment-Sensitive UI
The big focus on today’s unveiling was the apparent simplicity of the apps and icons. But for all the simplicity, the most telling element of the new UI is its complex adaptability to external environmental conditions.
The biggest—and perhaps most elegant—element of the new system is its responsivity. For example, iOS 7 uses the accelerometer to adapt the screen in parallax, achieving those new sorts of depth Ive mentioned. And using the phone’s light meter, it seems that the new icons and background adapt to the lighting to improve readability automatically—a bit like the previous iOS' ability to adapt screen brightness to environmental conditions.
Another nice responsive detail? The text and line color of the control panel change according to the color of your home screen image. And, finally, the time and weather seem to appear accurately on the app icons. Goodbye to the endless sunny-and-72-degree days.
Layering and Depth
The details of the icons and apps are certainly simpler than they are today. But the visual ecology they exist within is far more complex. How? Well, first of all, icons and text aren’t siloed into individual icon buttons or bars. Very often, Ive’s Helvetica Neue Ultra Light type appears directly on the screen. That seems like it’d be simpler—but it’s actually a bigger graphical challenge to orient users to text that's floating in space, rather than text anchored by buttons.
The screen itself was presented as a dense layering of image effects, too. In an exploded axonometric view, we saw a crisp clear background serve as a foundation for a middle layer—the apps—topped off with an elegant blurred panel that serves as a background for the control center. We can glean something about the future of iOS in the use of layers. Rather than treating the homescreen and apps as unique, 3D spaces, iOS 7 uses layering to provide context, instead. It's a bit like Google Now, in a way. Rather than treating the UI as an architectural metaphor, it's treated as a series of layers, or cards.
The Typeface
Say hello the Helvetica Neue Ultra Light, a slimmer variant of iOS' standard Helvetica Neue. Neue was designed nearly three decades after the original Helvetica. It was redesigned because its early translation into pixels left much to be desired—for example, the italicized version was hastily slanted from the original, and the kerning and widths were irregular and disorganized.
So, in 1983, Linotype commissioned an update for the digital age. The width system was standardized, the curves were redrawn and cleaned up, and even things like punctuation were rejiggered for digital viewing. In a way, Helvetica Neue, and its variant Ultra Light, was one of the first classic typefaces of the computerized era. As a typeface for iOS, it couldn’t make more sense: seen on the sparse banner for today’s conference, the light iteration of Neue looks elegant and clean.
But the increased use of Ultra Light is something of a risk. In many contexts, Ultra Light becomes unreadable—and without the frame and background that all iOS text once lay against, it runs the risk of becoming meek and fragile. It’s certainly beautiful on blurred backgrounds—but if users decide to use a louder, crisper background, it could become problematic.
The Stock Apps
The new icons, just as we imagined, have lost much of of the reflectivity and depth of the old. The figures themselves have been given an update too: a rainbow-hued palette, and black-and-white backgrounds, make for a lovely little set of icons. There's also a set of wire-frame-esque icons that appear on the blurred, layered background of the lock screen.
Like the new typeface, the icons seem to borrow a bit from a golden age of signage and typography design: the 1930s (and later, the 1970s), when an Austrian designer named Gerd Arntz and his partner, Otto Neurath, developed a visual language of pictograms called Isotype. Their language was intended to transcend traditional language barriers using typographic symbols.
What does this have to do with the iOS 7 icons? Well, the original iOS icons borrowed their rounded edges and simple icons from pictograms—a heritage that's been muddied by increasingly realistic details. By eschewing real-world visual cues for simpler icons, Apple is returning to its roots in pictograms and Isotype. In a way, we can understand this as Ive integrating a rich history of pictogram design into Apple’s design language.
With all of these elements surrounding IOS7 there's only one way to keep it looking as appealing as the operating system itself at the same time as working as successfully and that is to take the above on.
I thought to look into the history of isotype and review whether it should be an element we bring into our own application.
Isotype (International System of TYpographic Picture Education) is a method of showing social, technological, biological and historical connections in pictorial form. It was first known as the Vienna Method of Pictorial Statistics (Wiener Methode der Bildstatistik), due to its having been developed at the Gesellschafts- und Wirtschaftsmuseum in Wien (Social and economic museum of Vienna) between 1925 and 1934. The founding director of this museum, Otto Neurath, was the initiator and chief theorist of the Vienna Method. The term Isotype was applied to the method around 1935, after its key practitioners were forced to leave Vienna by the rise of Austrian fascism.
Source: http://en.wikipedia.org/wiki/Isotype_(picture_language)
I thought to look into the history of isotype and review whether it should be an element we bring into our own application.
Isotype (International System of TYpographic Picture Education) is a method of showing social, technological, biological and historical connections in pictorial form. It was first known as the Vienna Method of Pictorial Statistics (Wiener Methode der Bildstatistik), due to its having been developed at the Gesellschafts- und Wirtschaftsmuseum in Wien (Social and economic museum of Vienna) between 1925 and 1934. The founding director of this museum, Otto Neurath, was the initiator and chief theorist of the Vienna Method. The term Isotype was applied to the method around 1935, after its key practitioners were forced to leave Vienna by the rise of Austrian fascism.
Origin and development
The Gesellschafts- und Wirtschaftsmuseum was principally financed by the social democratic municipality of Vienna, which was effectively a separate state (known as Red Vienna) within the new republic of Austria. An essential task of the museum was to inform the Viennese about their city. Neurath stated that the museum was not a treasure chest of rare objects, but a teaching museum. The aim was to “represent social facts pictorially” and to bring “dead statistics” to life by making them visually attractive and memorable. One of the museum’s catch-phrases was: “To remember simplified pictures is better than to forget accurate figures”. The principal instruments of the Vienna Method were pictorial charts, which could be produced in multiple copies and serve both permanent and travelling exhibitions. The museum also innovated with interactive models and other attention-grabbing devices, and there were even some early experiments with animated films.
From its beginning the Vienna Method/Isotype was the work of a team. Neurath built up a kind of prototype for an interdisciplinary graphic design agency. In 1926 he encountered woodcut prints by the German artist Gerd Arntz and invited him to collaborate with the museum. Arntz moved to Vienna in 1929 and took up a full-time position there. His simplified graphic style benefited the design of repeatable pictograms that were integral to Isotype. The influence of these pictograms on today’s information graphics is immediately apparent, although perhaps not yet fully recognized.
A central task in Isotype was the “transformation” of complex source information into a sketch for a self-explanatory chart. The principal “transformer” from the beginning was Marie Reidemeister (who became Marie Neurath in 1941).
A defining project of the first phase of Isotype (then still known as the Vienna Method) was the monumental collection of 100 statistical charts, Gesellschaft und Wirtschaft (1930).
Principles
The first rule of Isotype is that greater quantities are not represented by an enlarged pictogram but by a greater number of the same-sized pictogram. In Neurath’s view, variation in size does not allow accurate comparison (what is to be compared – height/length or area?) whereas repeated pictograms, which always represent a fixed value within a certain chart, can be counted if necessary. Isotype pictograms almost never depicted things in perspective in order to preserve this clarity, and there were other guidelines for graphic configuration and use of colour. The best exposition of Isotype technique remains Otto Neurath’s book International picture language (1936).
“Visual education” was always the prime motive behind Isotype, which was worked out in exhibitions and books designed to inform ordinary citizens (including schoolchildren) about their place in the world. It was never intended to replace verbal language; it was a “helping language” always accompanied by verbal elements. Otto Neurath realized that it could never be a fully developed language, so instead he called it a “language-like technique”.
Diffusion and adaptation
As more requests came to the Vienna museum from abroad, a partner institute called Mundaneum (a name adopted from an abortive collaboration with Paul Otlet) was established in 1931/2 to promote international work. It formed branches containing small exhibitions in Berlin, The Hague, London and New York. Members of the Vienna team travelled periodically to the Soviet Union during the early 1930s in order to help set up the 'All-union institute of pictorial statistics of Soviet construction and economy' (Всесоюзный институт изобразительной статистики советского строительства и хозяйства), commonly abbreviated to IZOSTAT (ИЗОСТАТ), which produced statistical graphics about the Five Year Plans, among other things.
After the closure of the Gesellschafts- und Wirtschaftsmuseum in 1934 Neurath, Reidemeister and Arntz fled to the Netherlands, where they set up the International Foundation for Visual Education in The Hague. During the 1930s significant commissions were received from the USA, including a series of mass-produced charts for the National Tuberculosis Association and Otto Neurath’s book Modern man in the making (1939), a high point of Isotype on which he, Reidemeister and Arntz worked in close collaboration.
Otto & Marie Neurath fled from German invasion to England, where they established the Isotype Institute in 1942. In Britain Isotype was applied to wartime publications sponsored by the Ministry of Information and to documentary films produced by Paul Rotha. After Otto Neurath’s death in 1945, Marie Neurath and her collaborators continued to apply Isotype to tasks of representing many kinds of complex information, especially in popular science books for young readers. A real test of the international ambitions of Isotype, as Marie Neurath saw it, was the project to design information for civic education, election praocedure and economic development in the Western Region of Nigeria in the 1950s.
