Shop Mobile More Submit  Join Login
elementary styling redesign: scratch by ainq elementary styling redesign: scratch by ainq
I'm personally not too much of a fan of the current OS X-esque styling, so I'll be mocking up a newer, lighter, flatter style for several apps over the next few days. The goal is to keep the current layouts and HIG, while offering a less Apple-y look.

Thoughts? Be sure to :+fav: if you like it!
Add a Comment:
 
:iconmenkodany:
MenkoDany Featured By Owner Apr 13, 2014
Oh my god! We have a winner!!! This is the best design I've seen! Moar!
Reply
:iconluca00002002:
luca00002002 Featured By Owner Oct 31, 2013
very nice!!!
Reply
:iconlink6155:
link6155 Featured By Owner Oct 19, 2013  Hobbyist Interface Designer
I certainly like the light color scheme. After seeing this a few weeks back, I started working on a theme for windows 8/8.1 based on this: hostr.co/file/2lbWsGVDycnh/van…
Reply
:iconainq:
ainq Featured By Owner Oct 19, 2013
Cool!
Reply
:iconlink6155:
link6155 Featured By Owner Oct 22, 2013  Hobbyist Interface Designer
Made some revision to it now. what do you think? fc09.deviantart.net/fs71/f/201…
Reply
:iconainq:
ainq Featured By Owner Nov 21, 2013
A bit late, but congrats on the DD!
Reply
:iconhaze007:
haze007 Featured By Owner Sep 16, 2013  Student Interface Designer
How did you make this? Or is it just a mockup?
Reply
:iconainq:
ainq Featured By Owner Sep 17, 2013
Mockup.
Reply
:icongivesnofuck:
givesnofuck Featured By Owner Aug 30, 2013  Student
Interesting...
Reply
:iconscionicspectre:
ScionicSpectre Featured By Owner Aug 28, 2013  Professional Digital Artist
Hm- the grouping of the maximize and 'hamburger' menu button seems to imply that the menu serves a similar function or has a purpose on the same level as maximize/fullscreen. Of course, it is quite different. According to the HIG, it would make sense to put the menu further in, since people probably maximize more often. Also, the level of padding between the buttons and the window border is debatable. One idea could be to have the buttons lay flat against the side of the window, making them look more distinct (and possibly being a better target area for the mouse when the window is maximized).

I like the style- it almost reminds me of where GNOME is going, but a bit more toned down. It's good to see that the title and toolbar are obvious, but not overpowering the content. I could live with this, certainly.
Reply
:iconainq:
ainq Featured By Owner Aug 29, 2013
I'll definitely be experimenting with alternate layouts. However, I just thought that the connected menu/max looked cool...
Reply
:iconscionicspectre:
ScionicSpectre Featured By Owner Aug 29, 2013  Professional Digital Artist
Oh, no doubt. Having too many separate buttons in the toolbar can look weird if they all have their own outline (a la GNOME). So I'd say it's sort of a juggling act of deciding on priorities. But I would being lying if I said I didn't think this is a step in the right direction overall. As much as I like to think flat design is overrated, when it comes to basic user interface elements on a computer it's hard to argue against it.

I hope you keep giving us more of your vision, I really enjoy the feeling my eyes get looking at this.
Reply
:iconjacobp100:
jacobp100 Featured By Owner Aug 28, 2013
I like it. I don't think the menu and full screen should be linked, as they don't really have anything in common. I also think it needs to not be white, though I have no idea what to do in place.
Reply
:icondeviantningia:
DeviantNingia Featured By Owner Aug 28, 2013
Too many white variants, also... rounded border are a lot more cpu intensive ( expecially if you want antialiases on them )
Reply
:iconscionicspectre:
ScionicSpectre Featured By Owner Aug 28, 2013  Professional Digital Artist
Not necessarily. There are ways to do clipping and the such that don't have an impact on the GPU (or CPU), so long as compositing is already running. The different would be negligible. Of course, pixel-based 'fake' antialiasing is possible and would be less intensive still. So yeah, I'd say it's not an issue given the technology being used (libmutter).
Reply
:iconbitbored:
Bitbored Featured By Owner Aug 22, 2013
That, dear sir / 'mam, looks freaking AWESOME!
Reply
:iconkhampal:
khampal Featured By Owner Aug 22, 2013
Nice mockup, but I feel there needs to be more contrast. It's kinda hard to see the title text, and icons.
Reply
:iconm-awesome:
M-Awesome Featured By Owner Aug 22, 2013  Hobbyist Interface Designer
looks really cool :D
Reply
:icondeviantn7k1:
DevianTN7k1 Featured By Owner Aug 21, 2013  Professional Interface Designer
I like it though to me it looks more like an improved version of Gedit than a redesign of Scratch :P
Reply
:iconainq:
ainq Featured By Owner Aug 21, 2013
Somewhat of an adaptation of this: danrabbit.deviantart.com/art/S…
Reply
:icondeviantn7k1:
DevianTN7k1 Featured By Owner Aug 21, 2013  Professional Interface Designer
Maybe the use of the colorful icons in elementary would give yours a more elementary-ish look even with the flat light theme in your shot however I do like how you used symbolic icons instead but they seem to be a bit smaller than usual.

They also seem to have a very specific shape for widgets in the toolbar where yours are rounded theirs are squared you can get an idea from looking at their site (check the header and the Register and Login buttons). I think that the buttons for close and maximize shouldn't be displayed as part of the toolbar but instead as part of the actual window as Dan's mockup.
Reply
:iconainq:
ainq Featured By Owner Aug 21, 2013
I'm planning on introducing Tap Revival-style icons with the plank mockup. I do agree about the size of the icons (I just ripped them off of Bootstrap), but leaving them as part of the window doesn't look that great either.

I'm not too much a fan of the square widgets, and I feel that they make the window feel constrained. I will definitely experiment with rounding.

Thanks for your feedback, I'll keep it in mind.
Reply
:icondeviantn7k1:
DevianTN7k1 Featured By Owner Aug 21, 2013  Professional Interface Designer
No problem, I'm looking forward to see more mockups.
Reply
Add a Comment:
 
×
Download PNG 655 × 470




Details

Submitted on
August 21, 2013
Image Size
28.1 KB
Resolution
655×470
Thumb

Stats

Views
6,293
Favourites
38 (who?)
Comments
23
Downloads
18

License

Creative Commons License
Some rights reserved. This work is licensed under a
Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 License.
×