Shop Mobile More Submit  Join Login


Submitted on
July 18, 2013
Image Size
4.8 MB


2,980 (2 today)
26 (who?)


Creative Commons License
Some rights reserved. This work is licensed under a
Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 License.
Facebook for Nitrux by DevianTN7k1 Facebook for Nitrux by DevianTN7k1
This mock-up's purpose is to show how 3rd parties can design apps that are native to Nitrux by following the UI Guidelines. 

Using the application structure in use for Nitrux OS, developers and designers can create apps for the OS without them looking out of place.

Designers/developers can customize up to a certain extent their application's layout to give them a more personal feel to them. Custom icons for the Action bar, custom colors for the Toolbar and of course custom content in the app's Canvas.

Keeping it simple, that's what we're all about.

- Update -

3/10/13 - Removed the old panel for the new one, removed window controls (min, max), bigger resolution, fixed spacing, different background.
Add a Comment:
nsrosenqvist Featured By Owner Oct 4, 2013  Hobbyist General Artist
Some things are a bit inconsistent, for example are the UI-buttons rather large, like it was designed to work well with touch input, but the search input is tiny, looks inconsistent and impractical. Also the gray interface elements lacks contrast, a visually impaired user wouldn't see any of it. Except from that; Nice! :)
DevianTN7k1 Featured By Owner Oct 4, 2013  Professional Interface Designer
If you mean the buttons on the left, yes they're meant to be bigger, as the purpose of them is to have as few of those actions as possible by the way, I call it the Action bar. While the widgets on the toolbar are meant to be smaller because while I try not to add many of them, other developers/designers may add more. The search bar is the same size as the widgets in the toolbar. And their size is based on the golden ratio, I suck at math but I trust it for this :P.

The buttons in the bio part are indeed bigger, I didn't noticed that but they should be the same size overall. The UI is meant to combine aspects of both touch UI and desktop UI, it's meant to be usable in both a touchscreen and with a keyboard and mouse through shortcuts or simply moving and clicking.

The items that are less visible are inactive, once they're active they get fully coloured, they might be too transparent but it's sort of the point.

nsrosenqvist Featured By Owner Oct 6, 2013  Hobbyist General Artist
I'd recommend you to consider adding more contrast and maybe testing the chosen colors in a color tool to see if it would cause any problems to people having impaired vision. Keep up the great work! I love your icons! :)
DevianTN7k1 Featured By Owner Oct 6, 2013  Professional Interface Designer
Thanks for the tip, I'll keep on improving them :D
DanielFeo Featured By Owner Oct 3, 2013  Hobbyist General Artist
I like it! 
DevianTN7k1 Featured By Owner Oct 3, 2013  Professional Interface Designer
Thanks For The Llama Emote 
robotkoer Featured By Owner Aug 1, 2013  Hobbyist Interface Designer
Nice, except why you put copy/paste/cut on the sidebar? They'd make way more sense as a context menu or simply keyboard shortcuts...
DevianTN7k1 Featured By Owner Aug 1, 2013  Professional Interface Designer
And as another commenter noted:

If I may, I suggest the addition of a new setting to be applied to the user's .nitrux system: Auto-Action Bar
When enabled, the action bar would automatically toggle on when you have something selected (including but not limited to clicking on a file in a browser, highlighting text, and even typing text. When you no longer have anything selected, the action bar would disappear.

So, basically it'd have two behaviours, the one used by default (my prev. comment) and this. Also, something I've never added to the description of the mock-ups: the Action bar is meant to be scrollable to accommodate more items.

DevianTN7k1 Featured By Owner Aug 1, 2013  Professional Interface Designer
Here's a comment on another of my mock-ups about why there's no contextual menus:, it's an excerpt from our UI Guidelines:

One of the very first things you'll notice is that there's no menu-bars (File, Edit, Tools, etc) and there's no contextual menu (by contextual menu we mean that there's basically no right-click in .nitrux OS). We did away with them, as we see them as redundant items that no longer belong on the modern UX world we live in. But while the contextual menu is not present we make use of something better and easier to access from within your application window, we dubbed this, Action bar (that's the bar on the left). 

The Action bar is not always present, it's hidden by default from the user view, think of it as a sidebar which you can toggle on or off depending on the usage, if you want to paste some link you activate it, if you're only browsing through an album you deactivate it. (so instead of getting a contextual menu when you right-click the mouse you get the Action bar).

In it are the actions that would otherwise be located in the right-click contextual menu such as: copy, paste, cut, etc., and also those that would be located in the menu-bars such as: new file, save, print, new tab, so on and so forth. along with any app specific actions. These items are categorized from top to bottom: Common actions, App specific actions and Settings, the order should always be the same.

All the apps in .nitrux OS would be following that UX, it's not entirely gone, it's just different and it's no longer a menu.
robotkoer Featured By Owner Aug 3, 2013  Hobbyist Interface Designer
Well, I think that context menu is better as it requires less mouse movement.
To be honest, I'd even recommend using a pie menu instead of that as it's even more smooth.
Add a Comment: