During last month’s vUDS we showcased the latest design explorations for the new Ubuntu icon theme. Here is a summary of what we presented.

Our objectives

This project’s main goal is to create a single modern, high-resolution icon theme for desktop and touch devices that can adapt to various screen densities and reinforces the Ubuntu user experience. We want our icons to express our values and convey Ubuntu’s personality in a unique way.

We already had mobile icons for the applications and symbols, but, because they evolved over time without strong guidelines, did not form a consistent set. On the desktop, even though the style is clean and consistent, the icons looked dated and needed to be replaced too.

The previous version of desktop, mobile and monochromatic icons

New icons

We’ve been working on this on-going project for the past year. We’ve done extensive research on the subject with a focus on learning how best to classify the icons; and we’ve gone through several design iterations and explorations.

So here is the latest iteration of the new icon set. As I’ve mentioned, these are all still subject to change as we’re constantly improving and refining the designs.

Latest application icons

Latest symbolic icons

Icons in context — one of the latest design explorations of the dash

Next steps

The goals for 14.04 are to provide a new icon theme for mobile and tablet, and to provide guidelines with templates to help people to design consistent icons for their apps. We’d like to eventually implement the new set on the desktop too.

We’ve had lots of good feedback so far, and we’d like to get even more, so please let us know your thoughts in the comments!

On 19-21 November we had our vUDS where we got to discuss and share with the community some of the design work we’ve been doing recently.

Our topics ranged from our design blog to convergence designs to Juju GUI cloud to icon designs!

If you missed any of our sessions, don’t worry. They are all below for you to check them out!

Design Blog

Love our blog? How can we make it better? What topics would you like to see?

Responsive Design

Hear about our thoughts on converging our patterns, components and designs from phone to tablet to desktop.

App Design Clinic

Every two weeks, we gather to talk about app designs and patterns. If you are developing an app or have any questions on apps, let us know!

Designing a responsive website and web guide

We talked about the process of designing a responsive website and shared the current web style guide we have been using for the main Ubuntu.com site.

Research on Windows and Android usability

Juju GUI design evolution

User research has informed the way Juju GUI has changed over the last year. Here is the evolution of Juju GUI.

Designing icons for Ubutnu

We have been designing icons for Ubuntu Phone and Tablet and Desktop. Check them out!

Let us know what you think, or suggestions on what you want to see next from the Design team at the next vUDS!

Who doesn’t like ice-cream? Here in the design team we sure do! In the last few weeks we’ve been preparing a special Juju demo for the OpenStack Summit in Hong Kong and we’ve created some very ‘tasty’ icons for it. We thought it would be nice to show you how those icons were created, so here’s a little insight on the design process.

The brief

We wanted to replace the normal Juju icons for something a little bit more special in order to explain to people that visited the Ubuntu stand what kind of things Juju can do. We decided to use the idea of an ice-cream with toppings and sauce which you can build in the same way that you can build services in Juju.

The best part of this demo is that people would actually get the ice-cream they had ‘built’ in Juju in real life!

The Juju interface, with its default icons

Finding good concepts

The first thing I needed to do was to find good concepts to present ice-creams and toppings in an icon format. Toppings were going to be especially tricky, as they can be very small and therefore hard to make out at small sizes.

I initially sketched and designed some ideas that were using a kind of flat look. This worked well for the ice-cream, but not so much for the toppings — I soon noticed they had to be semi-realistic to be recognisable.

Initial sketches and designs following a flat and more simplified look

At a second stage, I added perspective to the icons; it was important that the icons kept the same perspective for consistency.

Another set of sketches with added perspective

The shape of the sauce bottles was also something that needed a bit of trial and error. The initial design looked too much like a ketchup bottle, so we’ve decided to try a different approach.

Before and after shape of the sauce

For the backgrounds, I chose to use vibrant colours for the ice-cream icons, to contrast with the ice-creams’ monochrome palette, but paler colours for the toppings, as these are already quite colourful.

The amount of detail added to the icons is just enough for what we needed to show and for them to be recognised. I’ve also added larger pieces to the side of the toppings, to make them easier to be identified.

The Oreo topping icon, with a side of Oreos

Working out the detail

The Oreo pieces were created from a single biscuit, which I cut into 9 different parts and then distributed in different layers — I guess in a similar way to what happens in real life.

The 9 pieces used to create the icon

The clone tool in Inkscape came in handy: repeating the same small set of different pieces made the final SVG file much lighter, and also Inkscape faster.

The whole process took 4 days from brief to final icons, which is quite a tight deadline, but it was a really fun project to work on.

The final icon set

Today we’ve launched the alpha version of our latest project: the Ubuntu Resources website.

This is our first responsive project that follows the mobile-first methodology and we’re very excited to share this with everyone!

As you’ll be able to see, we’re not quite done with it yet, but we wanted to share what we’ve created so far, so we can get feedback and keep improving the design and expanding the features.

The new Ubuntu Resources on an Ubuntu-powered phone

A little bit of background

This project grew from the need to separate content like case studies, news, press releases and events, from the core of the Canonical and Ubuntu sites — and it will eventually replace much of what currently is at insights.ubuntu.com. As the site is designed for reading and engaging with longer pieces of content, we thought it would be the ideal place to explore mobile-first and responsive approaches. And we plan to use what we’?ve learned from it to make www.ubuntu.com and our Web Style Guide responsive.

Scaling things down

We started the research phase taking a holistic view of the project, trying to understand what types of content and users we wanted to target. We realised that with limited time and resources we would have to divide the project into different releases, so that we could make sure each aspect of the site was given the attention it deserved.

The first and current release of the site — alpha — focuses solely on small screens. The main goal is that all the content is accessible and the visual style and features will be progressing and being added as we go.

Initial wireframes across a variety of screen sizes

Reusing existing styles

One of the challenges in this project was deciding how we were going to integrate the existing Web Style Guide, which we’ve been using internally for a while now and will be made public on design.ubuntu.com soon.

Sneak peek of our Web Style Guide

We decided to use a minimal version of the style guide that kept the Ubuntu Resources’ style coherent with www.ubuntu.com and that we could improve on.

You’ll also notice small details that align with our phone design, like the grid, navigation selection and icons, and we’ll be adding even more in the upcoming releases.

What’s coming

Apart from working on the larger screen versions of the site, some of the things we will be looking into for the next iterations are:

• the ability to subscribe to different types of content
• more curated topic landing pages
• content filtering and sorting
• cleaner URLs
• the way we handle PDFs and other file formats
• more content like a press section

Go and have a look at the site and let us know your thoughts. We want to know what you like and what you think can be improved, or any other comments you might have — we’ve included a handy link to the feedback form at the bottom of every page. Enjoy!

Some of us in the Design team have been gathering on a monthly basis to have lunch together and share things we find interesting to us.

Today, I’d like to share with you the Brown Bag lunch we had this week.

Vesa shared with us his interest in photography and showed us some of the shots he took over time.

Westminster at night by Vesa (flickr)

I came across an inspiring research done by Helen Hamlyn Centre for Design at the Royal College of Art in London. The research focused on facilitating older people using mobile phones, rather than designing a simpler phone for them to use.

And, our challenge of the month was to build the tallest paper tower! Each team had 20 pieces of paper and 6 minutes, with 2 rules:

1. You can only use paper to build your tower
2.You can tear or fold the pieces of paper.

Well, I’m happy to report that Rachel, Vesa and Olga proudly won this challenge with their paper tower!

How would you build your tower in 6 minutes?

Since we released the initial demo of Ubuntu on phones, we’ve been looking at refining the whole Suru theme — the theme on Ubuntu for phones and tablets — and creating visual guidelines for it.

Two of the things that we evolved were the treatment of the indented style and the corner size of the Ubuntu shape — the squircle. We wanted to make sure these were consistent across the theme so that any designer and developer could follow the same guidelines.

The Ubuntu squircle shape

Explorations

There were lots of discussions about what kind of shadows we should use — blurred shadows, sharp shadows or a combination of the two — to represent the indented style, and we went through various iterations.

Variations on grey

Soon after we started looking into the indented style we decided to look at the corner size of the shape at the same time, as they work together. Since the squircle is not an ordinary shape, it can’t just be scaled up and down as needed, so we arrived at four different corner sizes that can be used in the different sizes necessary across the theme.

The four different corner sizes of the Ubuntu shape

One of the main goals for the shadows was to make sure they worked with different images inside the shape and on different backgrounds. We also needed to consider the pressed state of the shape, which has a bigger shadow inside.

Variations of Maps icon on different backgrounds in the normal and pressed states

When the shape is used, it’s not always indented (like in popovers and notifications), so we also had to study these variations too.

Final styles

And finally after many iterations, discussions and reviews, here are the current styles of the indented and non-indented shapes.

Telephony icon on different backgrounds

We’ve started to put these guidelines on design.ubuntu.com, where you can follow their evolution.

Release month is always a busy one for the web team, and this time was no exception with the Ubuntu 13.10 release last week.

In the last few weeks we’ve worked on:

• Ubuntu 13.10 release: we’ve updated www.ubuntu.com for the latest Ubuntu release
• Updates to the new Ubuntu OpenStack cloud section: based on some really interesting feedback we got from Tingting’s research, we’ve updated the new pages to make them easier to understand
• Canonical website: Carla has conducted several workshops and interviews with stakeholders and has defined key audiences and user journeys
• Juju GUI: on-boarding is now ready to land in Juju soon
• Fenchurch (our CMS): the demo services are fixed and our publishing speed has seen a 90% improvement!

And we’re currently working on:

• Responsive mobile pilot: we’ve been squashing the most annoying bugs and it’s now almost ready for the public alpha release!
• Canonical.com: with some of the research for the project already completed, Carla will now be working on creating the site’s information architecture and wireframing its key sections
• Juju GUI: Alejandra, Luca, Spencer, Peter and Anthony are in a week-long sprint in San Francisco for some intense Juju-related work (lucky them!)
• developer.ubuntu.com: we have been working with the Community team to update the site’s design to be more in line with www.ubuntu.com and the first iteration will be going live soon
• Fenchurch: we are now working on a new download service

Release day at the Canonical office

Have you got any questions or suggestions for us? Would you like to hear about any of these projects and tasks in more detail? Add your thoughts in the comments.

Over the last year we have been working on the Juju GUI to reach a broader audience. Juju is a way of building complex cloud environments. It connects different services, allows complex configuration and the ability to scale out quickly and easily. Juju is offered as a command line tool or as a GUI on the web.

The team

For the last 6 months a small dedicated team has been working together to push the design of the Juju GUI forward. The design team consists of 2 user experience designers, Alejandra and Luca, and 2 visual designers, Jamie and Spencer. The project has raised many questions and one of them was what it is like designing a product you don’t use. In this blog post Jamie and Luca attempt to clarify our process.

No assumptions

Luca: As a user experience designer part of my process is to create assumptions to further thought, design and development, these are later validated in interviews with stakeholders, user testing or with the development team. An assumption is something that is generally accepted as being true without proof. I’ll never be a direct user of Juju, therefore creating assumptions for the type of audience that the Juju GUI is designed for is an interesting challenge.

To help build assumptions, ideate and create cohesive user flows that will later be tested I’ve had to run planned and impromptu workshops, ask questions, have daily hangouts with the development team,  run week long sprints, ask more questions and lock myself away in the Juju war room to immerse myself in the world of Juju.

Jamie: From a visual perspective this digital product is unlike anything that I’ve worked on in the past. Whereas some rules of typography, hierarchies and readability apply to the design I’ve found myself a lot more focussed on subtle detailing and refinements than ever before. This is because users of the GUI are wanting to complete tasks, they want to be able to deploy their environments as quickly and painlessly as possible. So the design job became about helping them do that without the GUI getting in the way. It is intended to lay lightly across the canvas, aiding users when they need and not obstructing them when they don’t.

The Juju GUI

Extensive and continuous research

Luca: I’m always surprised by the sheer amount of complexity that the GUI entails. The varying needs of our core target audiences means that we have to conduct a lot of research when we create user flows, ideas and when we’re examining if a feature is needed. Thankfully we have a great user research team which helps find users, conducts the testing and helps interpret the results.

I’ve found that with this particular product the interpretation of feedback has been key to making sure our designs resonate with our users. The feedback is catalogued in a document and shared out amongst the development teams to gain their insights and ideas as well. Solutions are then ideated and the design team then acts upon them creating new designs.

Jamie: The user testing results and feedback from the community has been key to the development of the visual style for the GUI. We’ve been through numerous rounds of testing to get to this stage of design development and each round of tests has moved the design forward. Once a round of testing has been completed the team will review the findings and create design tasks to solve any issues highlighted by the testers. The users we’ve tested with have been high-level cloud architects and system administrators, so familiar with the type of tasks that the GUI performs just not familiar with the way in which we perform those tasks in the GUI. Assumptions we’ve made about the way they would use the GUI have sometimes been mistaken so the design really has been guided by the users.

Evolution of Juju’s interface

Constant validation from a multidisciplinary team

Luca: Throughout the project the need for validation on concepts and ideas has been incredibly important. The agile process we use allows us to create wireframes and designs quickly and get them in front the dev team and get their insight and feedback, we’re lucky enough to have a near 24 hour working cycle (Teams in Europe, North America and Australasia). Because of this it’s not uncommon for a design to go through many iterations in a week, for example; the inspector wireframes (pictured below) went through 9 revisions in 10 working days, the complexity of the inspector design and experience was refined and finessed collaboratively with the development team, this has turned the inspector into an integral and very powerful part of the GUI.

Detailed wireframes for the inspector

Jamie: Working within an agile process has meant that design decisions are required to be made quickly and collaboratively within the team. The design team in London is small so we can share work internally and move designs on sometimes multiple times a day. This means we’re able to keep up with the development cycle that releases every 2 weeks and means that users can see the design evolve far faster than waiting for a yearly or biannual release of the product. As a designer it’s been hard seeing the product not pixel perfect when it’s released but we’re working hard to craft, fine-tune and round the edges of it so it will be a beautiful thing to use and interact with each new release.

Visual iterations of the inspector

Questioning language and terminology

Luca: Juju is expanding into a new field of creating clouds by managing services not machines. This means that there really isn’t a language framework that we can rely on and one thing that has been apparent over the last 6 months is the importance of terminology and language for developers. At the beginning of the project it was difficult and time consuming to learn the established vocabulary associated with the cloud and Juju, this gave us a great reason to start questioning words and terms used throughout the GUI. We uncovered words that were already established in other web services and words that didn’t connect with the user. Questioning these words and terms made it clear that not only do we (as non-users) not understand but this would also happen with users and it allowed us to finesse the language in the GUI to something more appropriate.

Good design principles and patterns

Jamie: The GUI is not just the work of the Cloud team. To harmonize the look of the products in the Canonical stable we’ve worked closely with the design team developing the phone OS looking for ways that design patterns developed by them can be applied to the Juju GUI. We’ve also worked with the Web team to see where we can integrate any elements from their UI library. The GUI is a product but it’s not a mobile OS and equally we interact with it in a desktop web browser but it’s not a website, so it ultimately has to have it’s own look. But by pooling the collective design wisdom of the teams who have been crafting interactions in their specific fields and by using patterns and guidelines already defined in this space we can create a interface that is better than the sum these parts but with it’s own clear voice.

Good design practices

Jamie: We like to sketch here. We sketch everything out before any work is done on screen and it’s enormously useful in iterating quickly through problems that users have and trying to come up with multiple solutions to these in a collaborative way. With a small team we can sketch our way through multiple problems towards multiple solutions and then move into applications like Photoshop and Illustrator once we’ve got a clear direction of the UX. This fast way of working also allows us to keep pace with the development cycle and to be able to add features to the GUI each time we do a release. Once a feature of the GUI is open to the world we’ll gather feedback then it’s back to the drawing board to refine it.

UX sketching during a recent sprint

Playing to our strengths

Luca: Most of the processes to provision, create and manage services in the cloud are currently carried out via command line. A priority for us has been to think about how we can use visual language to provide a layer of information and understanding not readily available via the command line. As designers we understand that with colour, structure, layout and flow we can communicate the status of a system or process in a very powerful way. We have made it our goal to bring out the strengths of the GUI by exploring visual metaphors and relationships. We established that the command line is an input output tool, the GUI doesn’t have that type of interaction and offers a more holistic approach, we offer that by having a clear hierarchy and having concise user flows. Early on in the project we made a principle to not compete with the command line but to embrace it, there are users out there who will use Juju just as a command line tool or as the GUI or a mix of both.

Playful icons helps users navigate the GUI

Final thoughts

Pretty much everyone in the team has been involved in the conceptual stage of the project, this has helped us create a cohesive product with some really powerful features. I’m sure there are a lot of designers out there working on designs for products that they won’t end up using. We wanted to take the time to highlight how we’ve approached this problem while we’ve been working on the Juju GUI project. The coming months will see a redesign of the the navigation bar, notifications, service blocks and relationship lines. We’ve given you a preview of some of these features in the visuals above.

We might have been quiet, but we have been busy! Here’s a quick overview of what the web team has been up to recently.

In the past month we’ve worked on:

• New juju.ubuntu.com website: we’ve revamped the information architecture, revisited the key journeys and updated the look to be more in line with www.ubuntu.com
• Fenchurch (our CMS): we’ve worked on speeding up deployment and continuous testing
• New Ubuntu OpenStack cloud section on www.ubuntu.com/cloud: we’ve launched a restructured cloud section, with links to more resources, clearer journeys and updated design
• Juju GUI: we’ve launched the brand new service inspector

And we’re currently working on:

• 13.10 release updates: the new Ubuntu release is upon us, and we’re getting the website ready to show it off
• A completely new project that will be our mobile/responsive pilot: we’re updating our web patterns to a more future-friendly shape, investigating solutions to handle responsive images, and we’ve set up a (growing) mobile device testing suite — watch this space for more on this project
• Fenchurch: we’re improving our internal demo servers and enhancing performance on the downloads page to help deal with release days!
• Usability testing of the new cloud section: following the aforementioned launch, Tingting is helping us test these pages with their target audience — and we’ve already found loads of things we can improve!
• A new canonical.com: we haven’t worked on Canonical’s main website in a while, so we’re looking into making it leaner and meaner. As a first stage, Carla has been conducting internal interviews and analysing the existing content
• Juju GUI: we’re designing on-boarding and a new notification system, and we’re finalising designs for the masthead, service block and relationship lines

We’ve also learnt that Spencer’s favourite author is Paul Auster. And Tristram wrote a post on his blog about his first experience with Juju.

Spencer giving his 5×5 presentation at last week’s web team meeting

Have you got any questions or suggestions for us? Would you like to hear about any of these projects and tasks in more detail? Please let us know your thoughts in the comments.

Since Ubuntu touch was announced, its been fantastic to see the variety of apps you’ve been developing, from shopping lists to word games, to apps that aid your daily commute.

As the Ubuntu Touch platform gets bigger and better, myself and the design team have been receiving more requests for feedback on designs, as well as questions about the App Design Guides and general app design. And although we are available for conversations on irc and in the email lists, what’s been missing is a place to have a more in-depth and visual conversation about app design.

Starting this Wednesday the design team will host a weekly app design clinic on Ubuntu On Air. The clinic is a chance for you to get feedback on your app’s UI, and a forum for you to ask questions about interactions, the Ubuntu brand and guidelines, visual styles, typography, colour… anything design that you want to ask.

If you would like feedback on a particular design, send a screenshot or mockup of your design to design@canonical.com before 1pm UTC on Tuesday.

The first clinic will be this Wednesday 11th September at 1pm UTC at http://ubuntuonair.com/ . Join us (or watch later) to find out more.

In past years, we have had many Ubuntu users getting involved in helping with our user research. Now we feel it’s time to form a user research network, which we’re calling: UbuntuVoice.

So,  if you want to:

• be the voice of over 20 million Ubuntu users. You will have the opportunities to take part in a variety of Ubuntu user research with different products, and help shape the Ubuntu experience. You choose the ones that you are interested in.

• stay up to date with Ubuntu. Get periodic updates (every two months) via email, such as what designers are working on, how feedback is used, and how users behave when interacting with technology.

• get a little something extra. Some of our research will come with an incentive, or in the form of a ‘Ubuntu goody’ lucky draw, and some research will be voluntary.

…then join us today by clicking here

If you have any questions, please feel free to contact us at: ubuntuvoice@gmail.com

Update: Thank you very much for everyone’s support for the UbuntuVoice! We reached our target number of participants in just a day! Since we are a small team, we can’t have more participants at the moment. However, do keep your eyes on the design blog for updates.

Ubuntu user research team

Music apps that allow users to switch between player and queue mode can be quite complex. Some challenges of music apps in general:

• Deep navigation through the music library:
  Home › Artists › Artist › Album › Play queue
• Switching between play queue and library

And a challenge unique for the Ubuntu phone:

• Keeping play controls easily accessible, while focusing on the content.

Tabs

The Ubuntu Music app is all about your music collection. The home screen shows a list of recently played items and the musical genres in your collection. It is easy to find your way around with the tab navigation.

Let’s open one of the albums.

Player

Tap on a song to start playing it and enter the player view. This view combines full album art of the item that is currently playing, and a queue of all previous and next items. There are play controls in the toolbar at the bottom of the screen.

Queue

For the next example of what you can do with the queue, let’s imagine that we have already queued up a lot more songs from various albums.

Scroll down the list to see what’s coming up in the queue. When our focus changes from the current song to the rest of the queue, the toolbar with play controls contracts. A hint of a progress bar stays on the screen; not to interact with, but as a visual hint to show something is playing and as a reference to where the play controls are.

Users can remove songs from the queue by swiping, and move songs to a different position in the queue with drag and drop.

Bring up the toolbar with play controls to refocus on what is playing now. As the toolbar is swiped up, the queue moves back to the current item.

Back to the library

The user can go back to their library to find more songs to queue. Patterns for back and overflow in the toolbar are still in development so check the App design guides to find out how exactly this will work.

Back in the library view, we again see a hint of the progress bar to show that items are in the play queue. We bring up the toolbar and see the condensed play controls. The toolbar lets users tap play or pause on the current song, tap on the album art or song title to return to the player view, and open up the overflow actions.

We navigate to another album.

Item options

To keep our focus on play controls in the toolbar and keep the toolbar as light as possible, item actions are grouped with the item and accessible via the expansion pattern. This goes for library albums and songs and queued songs. We can queue another song of the album we are looking at with the song options.

What’s next

This is the basic UX concept for the music app. Visual design will play a big part in deciding what exactly goes where, and we will need to test if the controls are easy enough to access. Coming soon are some exciting visuals to connect the dots.

Over the past few weeks we’ve been exploring visual directions for the calendar app. It’s a pretty exciting opportunity to create something fresh and at the same time useful. In this post I’ll take you through some of the directions we’re looking at right now and where we hope to eventually go. At this stage the designs are still under consideration.

Year view

This view offers a lot of challenges particularly given the large amount of information that can be compacted into such a small space. The challenge was to provide something that could inform the user quickly and usefully without overloading the screen with information. Each month is clickable. Individual dates, however, will need to be selected from the month view.

Month view

As with year view, it’s a tough call to keep the month view looking and feeling smooth and simple. Because of this, we decided to use the month view to provide the user with an overview of the dates in that month, from which they could select a date only. Instead of filling in the events inside the month view, the user can see the events at a glance inside the week view. We explored two different ways of laying out the month view visually.
    

Week view

In this view we experimented with the visual layout in terms of how much screen space the chrome took up and how you could visually represent different calendar events using coloured blocks vs coloured dots.

Day view

With day view, as with Week view, we tried looking at reducing the chrome around the day box to give more space to what the user most needs to see – the events during that day.

Event

Event view tends to be a different interface type than the others. Where with the other views a user’s prime activity is to navigate through information, the event is the goal in itself, providing a list of information. Because of this, a white background may be a better solution to presenting large amounts of text, making it easier on the eye. One thing that is still in design at the moment is the ability to select the date and time when creating a new event.

We hope you enjoyed going through our visuals and thought process. Watch this space next time for more visuals on date and time picker to go along with event view.

Video

Here’s a video to show how the interactions and transitions will eventually function.

Right… so where should we start? First post.

Hello, my name is Chee, and I am an industrial designer.

In this post I will share some materials, stories and process during the development of the Ubuntu Edge.

We started off by pulling the key elements of the Suru theme, and expanded on that, in order to explore the transition from a digital user experience, to a physical one.

Once the rough ideas were formed, the fun part started, as we dived right into visualising the concepts; Pencils, sketching pads, markers, clippings, samples, colour chips and anything else interesting.

One of the best way to visualise, experiment and refine a design is to materialise it in any way possible. In the process of creating and fine tuning the Ubuntu Edge, we turned to methods known to be the most effective: Model making, 3D CAD, and 3D printing. In our case, we tried it all!

It’s equally important how the Ubuntu Edge feels in the hand, how it visually presents itself and how certain textures give visual cues to the perceived expression. How each material works alongside each other without creating visual complexity is one of the key role to either make or break a design.

After several rounds of refinement and fine-tuning, we pressed forward with what we have now today as the Ubuntu Edge. From a rendering to visualize the Ubuntu Edge, to one that sit in front of us.

I hope you enjoy reading through the process, and lets make it a reality.

The Ubuntu Edge

Hey

After all the work we have done on the Rituals app designs it was time to start exploring other core apps.

I thought it would be good to share with you our recent exploration of the RSS Reader App.

Please note that those are only the key screens and settings are not covered yet. But this should give you something to get started ;)

Here is the link to the spec with all the font sizes, spacing, and colour values for the gradient backgrounds…

Let me know what you think ;) and I will try to update you on some visuals for the music app next.

This is the home screen of the RSS Reader.

Hello everyone! I’m delighted to be kicking off the next wallpaper selection process for the 13.10 release of Ubuntu coming this October. As you can see from the Saucy Salamander release schedule, we hit UI freeze on August 29th of this year and we’d like to get all your lovely community submitted images ready before then. To get involved submit your images to the Flickr group for submissions.

I’ve also made the above short video to encourage new people to get involved, share it around as hopefully it’s a good intro to the process and if you have ideas or comments then let me know, I can make additional ones as we go.

With some help from designers in Canonical we’ve come up with the following tips for creating wallpapers images.

1. Images shouldn’t be busy and filled with too many shapes and colours, a similar tone throughout is a good rule of thumb.
2. A single point of focus, a single area that draws the eye into the image, can also help you avoid something too cluttered.
3. The left and top edges are home to Ubuntu’s Launcher and Panel so be careful to consider how your images look in place so as not to clash with the interface.
4. Try your image at different aspect ratios to make sure something important isn’t cropped out on smaller/ larger screens at different resolutions.
5. Take a look at the wallpapers guidance on the Ubuntu Wiki regarding the size of images. Our minimum resolution is 2560 x 1600.

To shortlist from this collection we’ll be going to the contributors whose images were selected last time around to act as our selection judges. In doing this we’ll hold a series of public IRC meetings on Freenode in #1310wallpaper to discuss the selection. In those sessions we’ll get the selection team to try out the images on their own Ubuntu machines to see what they look like on a range of displays and resolutions.

Anyone is welcome to come to these sessions but please keep in mind that an outcome is needed from the time that people are volunteering and there’s usually a lot of images to get through so we’d appreciate it if there isn’t too much additional debate.

So, to get this show on the road here’s the outline for this cycle.

• 12/07/13 – Kick off 13.10 wallpaper submission process
• 23/07/13 – First get together on #1310wallpaper at 19:30 GMT
• 16/08/13 – Submissions deadline at 18:00 GMT – Flickr group will be locked and the selection process will begin
• 23/08/13 – Deliver final selection in zip format to Launchpad
• 29/08/13 – UI freeze for latest version of Ubuntu with our fantastic images in!

As always, ping me if you have any questions, I’ll be lurking in #1310wallpaper on freenode or leave a question in the Flickr group for wider discussion, that’s probably the fastest way to get an answer to a question.

I’ll be posting updates on our schedule here from time to time but the Flickr group will serve as our hub.

Happy snapping and scribbling and on behalf of the community, thanks for contributing to Ubuntu!

Edges are special to us. We use them for finding apps, tools and system services, so using the edges will be second nature to Ubuntu phone users. By using the launcher, how to launch your favourite app will become ingrained in your muscle memory of the left edge.

The design vision behind Ubuntu for phones includes the use of fast and natural interactions, so taking that to the welcome screen means that if your phone is locked, you can still access the launcher, system services and the right edge. If you have a pin set up, you only need to enter your pin when accessing private data, in the Gallery app or the Dash for example.

If you’ve flashed your phone recently, you will be able to activate the lock screen for the phone using a temporary hack (love it!). You’ll notice that the blur has not yet been implemented, but will be added later. Thanks to Michael Zanetti for originally posting instructions to the Ubuntu Phone mailing list. Here they are:

To enable the pin lock, log into the phone and create a file /home/phablet/.unity8-greeter-demo, with the content: password=pin

If you want to see the password unlock screen instead, put this into the file:  password=keyboard
For now, the pin is hardcoded to “1234″ and the password is “password”. Note that this functionality can (and will) disappear at any time as we bring all the bits and pieces together. This is a temporary, simple way to enable the visual part of the lock screen for us all to have a play with.

Let us know what you think on the Ubuntu Phone mailing list and the IRC channel.

In my previous blog post, we looked at the key screens for Shorts, the organic grid and the reading view. You can read about the list view behaviour in this document. In this post, I would like to look at journeys for adding and editing content, sharing an article and adjusting the reading view.

Sharing and adjusting the reading view

From the reading view, pull up the toolbar to reveal options:

Options for adjusting the reading view are:

• Font size
• Light / dark theme

Any changes made to the reading view are persistent until the view is changed again.

Adding things to read 

There are different options for adding content to the Shorts app. All of the options described here are for when the user already has feed subscriptions in the app; the first use scenario is not yet covered. To get to the different options for adding content, pull up the toolbar from the topic view:

1. Adding a topic

Adding a new topic with feed suggestions makes finding things to read much easier for users who don’t understand RSS. However, suggesting feeds for subjects could easily become quite complex; for example feeds related to ‘News’ are location specific. Whether we can suggest feeds for users will depend on if we can automate this process.

2. Adding feeds

When adding one or more feeds, the user needs to select a topic to organise it under. Selecting the topic is done with the expanded option selector.

3. Add online accounts

This might not be possible for version 1, but being able to read articles that were posted on your social networks would be a great feature to have in Shorts. Connecting to social networks will be done through Ubuntu Online Accounts.

4. Import subscriptions

Exact functionality for importing and exporting subscriptions will depend on the how the file manager works.

5. Other

Depending on browser functionality, it might be possible to add feeds from the browser.

Edit topics

In Shorts, feeds are organised under topics. Occasionally, users might want to change the names of their topics and the organisation of their feeds. Under ‘edit topics’, users can:

1. Change topic names

2. Change topic organisation by adding a new one

3. Moving feeds into a different topic

The above proposal lets users drag feeds from one topic and drop it into another. The list of feeds under a topic could be very long, so there is an option to collapse the topic. Whether this is possible depends on the drag and drop pattern available in the SDK. Drag and drop is not the easiest thing to do on a touchscreen. A possible alternative would be to long-press on a feed, go into selection mode and have move topic as one of the options.

4. Deleting feeds or entire topics 

Same as in the messaging menu, we will use the swipe to delete pattern – this will soon be in the app design guides.

Next steps

We aim to make the app powerful but simple by having the more complex options easily accessible where they are needed, and to cater for both advanced and novice users. Do you think this app can work without pages and pages of settings? Looking forward to hear your feedback and ideas. You can follow our progress on Google+, the Ubuntu Phone mailing list and IRC channel. Next thing to do is look at first use and no content scenarios.

One of the key challenges with designing calendar applications is the number of ways you can display your time, whether it’s by year, month, week or day. After a lot of good old fashioned hard work, we refactored navigation by making the tab header the key to switching between views. Although the direction I’ll take you through in this article is strong and clean, it’s still a work in progress, and as such, can still change. The images are small in this article, to get a closer look at all of them collected together, download the PDF here.

The latest designs in this article show you how we’ve aimed to solve:

• Navigation between different calendar views
• Gestures to help quick navigation
• Editing events
• Creating events
• How this will potentially look and feel

Different views

There are 5 different view templates inside the calendar app we are focusing on. They are:

• Year
• Month
• Week
• Day
• Event

Navigating between different views using title header bar

You can move through the different views by tapping on the title header bar to toggle the view mode options. Just like our patterns, this title is scrollable – so that you can scroll through the view modes which don’t fit the width of the screen. Also like our pattern, swiping to the left or right moves along to the next or previous unit (year/month/week/day/event) in its category. For reference, take a look at Calum’s excellent post on this.

To get a better idea, click here to see a video of the prototype which formed the base of this navigation model and allowed us to test it out, comparing and contrasting it against other design directions. It was enough to give us a feel for the potential final build.

Navigating between views using spread and pinch gestures

To aid fast navigation for pro users and to also add an element of fun, we’ve decided to enable zooming in and out between views using finger spreading and pinch gestures similar to zooming in and out in a map app.

 Spreading fingers gesture: This zooms in to the next view; the next view offering more detail, close up.

     E.g. A user spreads when on the year view. This opens up the month view. Spreading on the month view opens up the week view, and so on.

Pinching fingers gesture: This zooms out, to a less detailed view – the previous view in the view hierarchy.

     E.g. A user pinches on month view, the system responds by taking the user to the year view.

An event

An event has several detail fields. In order of appearance they are:

• Event name
• Time
• Description
• Location
• Guests
• This happens (how many times does this event happen in the series? Or is it a one time event?)
• Remind me
• Timezone

Editing an event

A bottom edge swipe on an event page brings up the toolbar with the edit button.

[NOTE: toolbar menu options within the calendar and across the whole system have not been finalised, this image of the toolbar is a placeholder to give an idea of how to edit]

The edit mode shows the boxes around the fields allowing the user to type and change the event details. The toolbar in edit mode is always present. It shows cancel and save options.

Creating an event

A bottom edge swipe on year, month, week and day views brings up the toolbar with the option ‘New’ to create a new event. Pressing this brings up a similar template to the ‘Edit’ mode, the only difference being the blank forms.

Visuals

The visuals in the image below are an exploration of how this can potentially look and feel. This is still very much still in progress, but gives a strong hint of what’s to come.

This is a presentation of our ‘Paper’ Motion theme for Ubuntu Mobile.

The theme is informed by the ‘paper’ graphic style of the mobile OS and we have sought to accentuate it wherever possible. Rather than using more overt effects like page curling and folding, we have hinted at the theme by using multiple layers, ‘stacking’ and suggestive effects. Multiple layers of sliding paper can be observed in the animation of the switch button, stacking can be seen occurring on the icons in the launcher and an example of a suggestive page-turning effect can be seen during the ‘App Stacking’ example.