Nokia N9 is an unforgotten legendary device: it was the NOKIA’s “song of the swan”, before to be bought by Microsoft. After years of works, R&D, industrial design, and last but not least, UI design and software engineering, Nokia took up the challenge launched by Apple in 2007 with the iPhone 2G.
Nokia N9, finally launched in 2011, was a device that – although for some technical aspects inferior to iPhone 4S (Apple has iterate in the while!) – it exceeded him clearly looking at daily User experience, UI solutions in OS, Industrial Design and also Graphic Design.
Below you find the embedded prototype, made with Adobe XD. In case of slow performance or lag, see it in a separate window.
Below a short technical report that accompanying the project.
The main purpose of the project was to verify if it was possible to use the Components provided by Nokia in its graphical kit in 2011/2012, and design a contemporary Twitter app.
The answer was: YES.
The components, that corresponds to QTQuick 1.1 items with a look and feel same as the Meego UI, called
More: The UI style of Harmattan 1 is called “Seattle UI” by Nokia.
This is an unknown detail, not indexed by google buy visible opening the UI templates for designers.
The first stage was to visualise an overall view of the app. The media chosen was a solid A3 paper, with the rough of main pages (low fidelty prototype). A touch of color is given by a cyan Promarker.
The format for mockup was a 480 x 854 px format, the display size of Noka N9 target device, vertical state.
You may see it larger than how it would be, consider it is a 3.9 inches display!
As said, it was chosen for this prototype the Adobe XD. This because all the Nokia UI kit were in .AI format, and the ability to do copy/paste directly in XD was unvaluable. The software allowed to simulate barely all the N9 system transition with good age.
The reference in authoring the app was the latest iOS Twitter official app: menus and function are matched by the Meego components, although in different position or requesting one more tap.
The actual stage of project is the test: navigate it and let’s us know if you wants a more simplified and N9 style, or a more complex hierarchical UI.
The NEW TWEET button is placed in top header, like in old Twitter stock N9 app. Also, the New Tweet button now opens a new Sheet.
Did you wanted the button in toolbar instead?
This is not a fancy concept: every element is an official component provided by Nokia, with its QTQuick item as reference. So it may be easy for some good QT 4 developer assemble the app. After that will be needed to connect it to the backend, and get a Twitter Oauth 2.
Will may be created a Github repo in future.