I realise this is the first time I have revealed that I am interning at Aptus Interactive as the Lead UI/UX designer. I am currently redesigning an iPad app. And have many more roles coming up.

Furthermore, some exciting posts coming up about my collaboration with Microsoft 6 months ago including some freebies too.

View this on a Windows Phone and you will see something akin to the mobile Bing site, open with the iPad and modern browsers like Internet Explorer 10 and Chrome; you will see some CSS3 animations. View in Windows 8 metro interface and you too will be treated to animations as well as jump lists, (also available on windows 7 using IE9 and above.

I have not tested this on the iPhone (Although I have devised a way to emulate it on my iPad: open pinterest – and iPhone app scaled to the iPad, click on a pin that links to my blog, then click on the link below! Will test properly though in the future).

Hope you like it….oh and I am using SVG’s for my “temporary” logo.

levifreeman.com

As I mentioned before I am taking a great interest in hipster, old school retro typefaces. They are what I would call “Vintage”. Here are a few of my pins. many more are available on my pinterest

interesting

Here is the shaky cam of a presentation of what appears to be the work in process Wunderlist application for windows 8.

You may notice some similarities with my own design, well that is because it is simply how wunderlist would look on Windows and have it any other way would not make it wunderlist. That is why my design is so close to theirs. My design was also based on the Windows Phone design by Benjamin Rösner which is metro in style, Windows 8 must therefore show a similar look to its mobile counterpart.

Here is my design concept again if you haven’t seen it.

This is a pretty large project I have thrown myself into, but it is worth it as it may lay the groundwork for me to actually build and sell actual apps based on my service. For now I plan on releasing a website of to provide this job hunting tool to the masses. Besides the website, I will create concepts for the iPhone app, the Windows Phone app, the iPad and Windows 8 app as well as design how the website will look.

The Windows 8 app will include share contracts, split screen support, landscape and portrait support, NFC, live tiles and more. The Windows Phone app will support Live tiles, NFC. The iPad app will work in either portrait or landscape orientation. The website will be of a responsive kind, HTML5, CSS3 and graceful degradation.

The service will be called Hunt and Dash, Hunt ‘n’ Dash for short. The logo was born from looking at vintage typography, online and via my “New Vintage Type” book written by Steven Heller and Gail Anderson which I mentioned last month. The service is aimed at helping those in the creative industry to manage their job applications, help them search and reply to jobs. It is a sort of dashboard that will have all that you need at your fingertips.

Lastly I will leave you with a teaser of the service on the major platforms. (I am considering Android, its phone platform at least).

I took inspiration from the original Windows Phone app which is itself a metro styled design. Since Windows is aiming to be consistent with their look and feel across the Xbox, Windows Phone and Windows the Ocado app needed to be consistent with its Windows Phone counterpart.

I also close to Microsoft’s own design rules for their metro styled apps. Using a number of elements from their developers resource kit and templates. With this app to search for products you would simply need to use the system wide search box. For account settings, billing, pin number for login will all be accessible using the settings button in the charms bar. Windows 8 however is new, and for users, the habit of going to the charms bar for settings, search and share will still take some getting used to. Therefore within this app the settings button will be part of the options on the bottom bar (not illustrated here in the designs).

Square Tile

Expanded Tile

Let us begin with the tiles that will give Ocado a presence on the Windows 8 Start screen. There are two modes for Windows 8 tiles it could either be a square tile or expanded. It is up to the developer to allow for the expanded option or to just stick with a square tile. The expanded tile is able to give the user a lot more information at a glance without needing to enter into the application. Since this app has information that it needs to convey to the user I have opted for an expanded tile as well. This expanded tile will tell the user the current total of their basket, how many items they have and how much they have saved through offers and deals. The tile will also give the user information about their delivery slot which is a very important piece of information which cannot be displayed on the home screen of an iPad for example. This continues the glance and go idea that Microsoft had introduced for Windows Phone. It is why metro is metro. It has been derived from “international design” modern and clean but more importantly it has also been derived from airport and metro/tube signs. In these situations the prerequisite for the design is to be quick and easy to read and comprehend. People are walking and reading, or scanning if you like, the signs as they go. They don’t stop, they don’t need to.They have understood. Perhaps my own tile can be simplified further. The Wednesday to become Wed is an example of a future improvement.

Once they tap, or click if they are using a mouse, on the Icon the splash screen appears and they are automatically logged in or taken to the login screen. The automatic log in may only work if they recently logged in, however a time out feature should require the user to log in again if the app hasn’t beeing used for a short while. Becasue this app deals with shopping and payments security is paramount.

The Welcome screen with various links, and access to the categories by swiping to the left. Notice that Search is on this screen even though the Windows 8 Users are encouraged to use the system wide search button. Search is important to this app like the Bing maps app, so offering it here will help those users who need to see it on the screen.

Also here is the current status of the current basket. The total amount is enlarged for emphasis of the most important information to the user. The text is also a link, so tapping on the total and the “you have 22 items” text will take you to your current basket. Tapping the red delivery slot will take you to the delivery screen. Saving s will take you to the basket with the offers and deals products filtered.

Selecting shop will bring the following loading screen up

This screen is the loading screen where the catalogue is being populated. The catalogue will only need to download once and subsequent uses of the application will have an almost instantaneous transition to the products. Because the products do need to load the first time, I thought it would be useful to include an animation of how to select items.

As I mentioned before, Windows 8 is new and not everyone would know how to use it correctly. This animation serves as an instruction not just for selecting in this app but for others a swell. The animation will be smooth, the pointed finger will gently tap and hold on to the item and pull down both items on screen. After that another animation will show how to select on the mouse (not illustrated here) by right clicking the items. Credit for the “Van” symbol by Marwa Boukarim, from thenounproject.com

I hope you like my concept, more are on their way.

Here are the rest of the images for this concept.

UI Designer Benjamin Roesner who is currently working for 6Wunderkinder, has teased A second Image of the upcoming Wunderlist App. He relased the image to dribbble on the 29th of February.

It features a metro style grid of filter options for your lists. You can filter by date, by which tasks are completed, by starred as well as all the other filters available in other Wunderlist apps. One admirer of the revealed design, David Keegan mentioned, “Very nice, feels like a windows phone app but is still clearly wunderlist!”.

Previously this image, back in December last year, was revealed which confirmed that the company is indeed bring Wunderlist to Windows Phone.

Update: Its’s out now!

I noted it down and immediately started on a concept. The following concept is unfinished, I have yet to make the icons for example, for now they are plus signs. I present to you my Wunderlist Windows 8 app. For those that are unaware, Wunderlist is a freeware application from 6Wunderkinder that can be used for task management and list making. Tasks are categorized into lists, such as a shopping list or a to-do list. Tasks can have completion dates and remiders[sic] (wikipedia).

Before I carry on, I just signed to edit on Wikipedia (anyone can sign up) to correct the “remider” spelling mistake, never thought it was so easy to edit an entry!

Before I started I looked at Wunderlist on the iPad, on the Mac and on Windows. Each had slightly different layouts but the list themselves were largely the same. On Windows and on the browser the list side bar appears on the right. On the iPad it is on the Left. I also looked at the Wunderlist for Windows phone image that was revealed via dribble if I am correct. That was instrumental because like IOS and the Mac, certain elements are maintained for platform consistency. The same consistency is what should appear on the both the Windows Phone and Windows 8 platform.

The list is actively scrollable up and down, unlike most current windows 8 apps which tend to scroll sideways. This keeps Wunderlists own design consistency which needs to be maintained also. The categorised list menu can be assessed by selecting the hide/show button on the bottom bar when swiped from or right clicked. Searching for task would be done via the search charm in keeping with Windows 8′s user experience. To add a new list simply tap add new task or use the button on the bottom bar.

In portrait mode the categorised list menu would be hidden by default but when called up by the user, would slide over the lists partially covering them. This is different from the landscape mode where the list smoothly pushes and compresses the width of the tasks in order to fit on screen, when it is hidden from view the list will smoothly fill up the entire screen.

The lists can be visible in the split screen mode. Two buttons would appear at the bottom of the narrow segment that will toggle between all categories and filters (today, all, tomorrow) with the title of what is being displayed appearing at the top.

I will call this version 0.5 as it is unfinished. Version 1 would show the split screen behaviour, notifications, tile and actual icons for the commands in the bottom bar. Let me know what you think.

Wood texture credit: downloads.dvq

Available Now

Version 1.0

• 16:9 ratio screen
• Portrait Only

Coming in Version 1.1

• Portrait and Landscape
• Higher Resolution to make it easier to use SDK PSD templates with the Kit
• Editable Regions, so you can focus on your app design without distractions