Shop Mobile More Submit  Join Login
GNOME-Shell mobile layout mockup by nsrosenqvist GNOME-Shell mobile layout mockup by nsrosenqvist
I wanted to test out some design ideas surrounding the GNOME-Shell after I've seen all the nice new updates that came with 3.10. This is in no way completely thought through, it's just a quick attempt at translating the desktop UI onto a smaller touch device (I know that there is no way of accessing the overview except through a hardware button). All comments and critiques are welcome!

# UPDATE 2013-10-06:
I decided to make a second revision of the design and this time basing it on the 1280x768 display of a LG Nexus 4, so that I get a proper reference for the position and size of elements.

Changes:
* The shape of elements adhere closer to the style of GNOME-Shell's default theme but I've kept my changes that I think improves the user experience. An example is that I've chosen a flatter look and removed borders of most elements.
* The overview now also has the search bar so that it's more accessible.
* An example of the window list overflowing has been provided.
* The pagination on the view showing all installed apps ordered by title are now placed horizontally, differing from the desktop GNOME-Shell since the swiping gesture is then more comfortable on a handheld device.
* An example of a search view has been added.
* An example for the notifications view in the overlay has been added.

p.s. Sorry #GIMP-Artists, this time I implemented the designs in Inkscape since I found it to be much easier handling "objects" like interface elements and aligning objects with it. Though this presentation of all screens has been put together in The GIMP :)

NOTE:
The search results are supposed to show a longer list with results from the web, even direct results from google/ddg, I just didn't have the time to make it more detailed.
Add a Comment:
 
:iconjszvb:
JSZVB Featured By Owner Apr 6, 2015
This is so beautiful... :(
I want it.
Reply
:iconlesik2008:
Lesik2008 Featured By Owner Oct 14, 2013  Student Filmographer
Funny, I just made a mockup of GNOME on phones by myself and posted it on Google+ some weeks ago. Interesting that we had the same idea :)
Reply
:iconnsrosenqvist:
nsrosenqvist Featured By Owner Oct 15, 2013  Hobbyist General Artist
Yeah :) I got kinda tired of only seeing cool mockups for Unity Touch, I wanted to show some love for GS as well :P
Reply
:iconlesik2008:
Lesik2008 Featured By Owner Oct 15, 2013  Student Filmographer
Oh, there are even Unity mockups? I've got a looot to check out now.
Reply
:iconnsrosenqvist:
nsrosenqvist Featured By Owner Oct 16, 2013  Hobbyist General Artist
Spiceofdesign has a couple of nice mockups of both unity for desktop and mobile: spiceofdesign.deviantart.com/g…

On Ubuntu App Developers you'll see a lot of nice app designs by Lucas Romero Di Benedetto: plus.google.com/u/0/communitie…
Reply
:iconlesik2008:
Lesik2008 Featured By Owner Oct 17, 2013  Student Filmographer
Thanks for the links! I'm not really a fan of Ubuntu, but I'll join that community anyway :)
I agree, spiceofdesign's art is awesome.
Reply
:iconnsrosenqvist:
nsrosenqvist Featured By Owner Oct 18, 2013  Hobbyist General Artist
I'm there mostly to see how the app ecosystem evolves :) what happened to your GS-mockup? I can't seem to find it in your deviantart gallery.
Reply
:iconlesik2008:
Lesik2008 Featured By Owner Oct 18, 2013  Student Filmographer
Oh, it was a quick GIMP edit using a few screenshots from GNOME on my laptop, nothing fancy, so I didn't post it on dA. I posted it in the Google+ GNOME community instead :)
Reply
:iconnsrosenqvist:
nsrosenqvist Featured By Owner Oct 18, 2013  Hobbyist General Artist
ah, ok :)
Reply
:iconpoinck:
poinck Featured By Owner Oct 6, 2013
That mockup is the proof, that Gnome-shell is suitable for any screen-size. (o:
Reply
:iconnsrosenqvist:
nsrosenqvist Featured By Owner Oct 6, 2013  Hobbyist General Artist
Thanks! I've just updated the design, do think it was an improvement?
Reply
:iconlovelybacon:
LovelyBacon Featured By Owner Oct 2, 2013
wow, Someone must make an android rom  at least. This is insanely good. The lock screen is amazing!
Reply
:iconnsrosenqvist:
nsrosenqvist Featured By Owner Oct 2, 2013  Hobbyist General Artist
Thanks! :)
Reply
:iconmmesantos1:
mmesantos1 Featured By Owner Oct 1, 2013  Hobbyist Interface Designer
Wow, looks great, would be nice to see Gnome-Shell for mobile touch devices. Good idea and looks well thought out. ;-)
Reply
:iconnsrosenqvist:
nsrosenqvist Featured By Owner Oct 2, 2013  Hobbyist General Artist
Thanks! :)
Reply
:iconmmesantos1:
mmesantos1 Featured By Owner Oct 2, 2013  Hobbyist Interface Designer
Your very welcome. ;-)
Reply
:iconkexolino:
kexolino Featured By Owner Oct 1, 2013
Looks clean and consistent, and really like Gnome Shell. I especially like how the status bar gets pulled down to the bottom of the screen.
My android phone kinda looks like this.. It's running Cyanogenmod, 1 homescreen, favorite apps in the dock + another four icons on top of it, and that's it. Simple is good :)
Reply
:iconnsrosenqvist:
nsrosenqvist Featured By Owner Oct 2, 2013  Hobbyist General Artist
Here I've disabled the concept of a homescreen or a desktop, instead the lockscreen is where you show off a nice background image and the home button takes you to the application overview, like current GNOME-Shell. That will allow more focus on the apps and not management of the OS's interface.

I didn't know you could get that status bar behaviour with Cyanogen, the Android versions I've used always uses a handle that comes of out nowhere when pulling down the status bar which always seemed rather weird to me.
Reply
:iconkexolino:
kexolino Featured By Owner Oct 3, 2013
No, it doesn't have that behavior, I just like the way you did it :)
It's a nice design overall, hope you will do more like this.
Reply
:iconnsrosenqvist:
nsrosenqvist Featured By Owner Oct 3, 2013  Hobbyist General Artist
Thanks! I'll probably make a second revision of this and include some changes and more screens :)
Reply
:iconwevertonmarx:
wevertonmarx Featured By Owner Oct 1, 2013
It's really good!
Reply
:iconnsrosenqvist:
nsrosenqvist Featured By Owner Oct 2, 2013  Hobbyist General Artist
Thanks!
Reply
:iconbimsebasse:
bimsebasse Featured By Owner Oct 1, 2013  Hobbyist Interface Designer
I'm in on the application launcher if the search field is a Google (web) search, not an application filter.
Reply
:iconnsrosenqvist:
nsrosenqvist Featured By Owner Oct 1, 2013  Hobbyist General Artist
Sorry, I don't think that's the way to go. It would however provide the same results that GNOME-Shell search providers can give you since it's just another layout for the shell (e.g. google results). You do also realize that it is the same amount of clicks (shorter travel distance) to just open the overview -> the web browser and search in the address bar?
Reply
:iconbimsebasse:
bimsebasse Featured By Owner Oct 2, 2013  Hobbyist Interface Designer
Du you own a smartphone? Do you need an app filter field on your home screen or do you need a web search? How do you arrive at the conclusion that typing directly into a search field from a home screen takes as many "clicks" (touches?)? On my phone it's 1 touch > then type (from home screen search field) - and it's 1 touch to open browser > 1 touch to enter address bar/google start page search field to activate touch keyboard. Or: double the effort.
Reply
:iconnsrosenqvist:
nsrosenqvist Featured By Owner Oct 3, 2013  Hobbyist General Artist
Your reasoning is invalid. You compare this design with (probably) the stock Android interface, that features a search bar on it's home screen. When you go "home" in this design you open the overview, not the application launcher, therefore your argument makes no sense at all since you're discussing the functionality of the search box here, not the one on stock Android.

"Do you need an app filter field on your home screen or do you need a web search"

I am a user who would greatly appreciate an app filter functionality in my smartphone since I look for and launch apps far more often than doing web searches.

I will however try to address your concerns. As I stated in the deviation's description is this simply some ideas I threw together, not a long thought out implementation. I just wanted to spark some ideas in the GNOME community. If I find the time I will redo this design with the comments I've heard mentioned kept in mind. For example, I had forgotten that the shell features search providers since I'm used with the 3.6 workflow which I've been using on my Ubuntu installation. That's why I didn't consider using it for anything else than application filtering.

This design is on a 320x480 resolution, many smartphones today have a lot higher resolution than that and with more screen real estate there might be room for more elements in the design and I could move the search bar into overview instead (or keep it globally within the overview/launcher).

p.s. I've already figured out a nice design to show all results from different search providers which is probably enough for me wanting to make another revision of this design. :)
Reply
:iconbimsebasse:
bimsebasse Featured By Owner Oct 4, 2013  Hobbyist Interface Designer
Eh, I'm trying to argue why the home screen search field would make more sense as what it already is on several Android smartphones (not just stock) than what it is in gnome-shell - I haven't misunderstood you, nor am I "discussing something else".

I use the app filter in gnome-shell, and Synapse in Gnome 2,, it's useful, and quicker than looking for apps manually. But a smartphone is not a desktop/laptop. On a smartphone the keyboard is not already there, the search field is not already selected waiting for your input. You have to first press in it to activate the on screen keyboard, then use that keyboard to filter for apps. If you have 2-3 app pages sorted alphabetically, it won't be quicker than just swiping to the right and clicking the app when you see it. That's all.
Reply
:iconnsrosenqvist:
nsrosenqvist Featured By Owner Oct 6, 2013  Hobbyist General Artist
I've now updated the design trying to address this issue you mentioned. Keep in mind that the web results are supposed to be a longer list, I just didn't have the time to make it more detailed :)
Reply
:iconsomethingwildinside:
SomethingWildInside Featured By Owner Sep 30, 2013  Student Digital Artist
nice job
Reply
:iconnsrosenqvist:
nsrosenqvist Featured By Owner Oct 1, 2013  Hobbyist General Artist
Thanks!
Reply
:icondeviantn7k1:
DevianTN7k1 Featured By Owner Sep 30, 2013  Professional Interface Designer
Very good job, it does feel like Gnome Shell and it does look very nice. It'd be interesting to see the other apps in this form factor.
Reply
:iconnsrosenqvist:
nsrosenqvist Featured By Owner Oct 1, 2013  Hobbyist General Artist
Thanks! I think that most of the new core apps would fit very well on a device of this size. I'll probably explore other designs later :)
Reply
Add a Comment:
 
×
Download PNG 960 × 4710




Details

Submitted on
September 30, 2013
Image Size
4.6 MB
Resolution
960×4710
Link
Thumb
Embed

Stats

Views
2,757 (1 today)
Favourites
18 (who?)
Comments
32
Downloads
24

License

Creative Commons License
Some rights reserved. This work is licensed under a
Creative Commons Attribution-Share Alike 3.0 License.
×