Pixelation
Critique => Pixel Art => Topic started by: Jedemy on November 01, 2018, 07:08:59 pm
-
Hi,
i've been working on a Crafting system for my game and now can't figure out how should i continue on this concept. Just wanted to ask for your opinion what can be done to improve this.
Since few days i tried to change this black background to something else but no luck.
(https://i.imgur.com/MTrBJJ7.png)
I tried to create something similiar to Chaos Engine but got carried away.
(https://gamefabrique.com/storage/screenshots/genesis/chaos-engine-02.png)
-
I feel like you could make much better use of the available space. Everything is tiny and some of the text is hard to read because of the size, and yet you have all that unused space.
The gold/brass colour doesn't read very well against the grey background, especially for the smaller icons, more contrast between them would really help. Perhaps the grey could be made darker?
The UI feels disorganized. You have four distinct sections (resource list at the top, the circles on the left, the blueprint area in the middle, and the hangar on the right), and there's no clear indication of which is the most important at the moment, what's related to what, and so on. The resource list is the only one that has a clear purpose and a clear place in the otherwise non-existent hierarchy - it's unobtrusive and clearly there to be looked at when you specifically want that information. The other three sections all fight for attention, especially the blueprint area and the hangar.
The lack of alignment between elements also fuel the visual chaos. Everything's anchored to different points, so it appears as though every element is floating independently.
The hangar is a good example of alignment creating visual groupings - the three ship info cards are aligned and have the same size, so despite the spacing between them, they clearly read as related. The L2 and R2 button prompts are aligned with the edges of the cards, so they also feel related, but because they're smaller and simpler, they also feel less important than the ships and don't clash with them. Size/contrast issues aside, the hangar's good! You should try to apply the same principles to the UI as a whole.
Try to avoid having different icons for things with similar functions. The hangar has tiny white arrows for flipping between pages, but the blueprint has large brass arrows, even though those arrows perform roughly the same function (presumably, they flip between different blueprints). Even though the purpose is clear in both cases, it feels less unified and more chaotic. It could also cause confusion if e.g. the player makes the guess that one type of arrow represents inactive/unavailable pagination.
Similarly, some of the ship circles have highlights, and some don't, which can be misinterpreted as meaningful.
In the circle bar on the left, you have a large green sphere next to one of the big circles. Is that the currently highlighted ship, or...? The green sphere looks a lot like the resource icons. It also doesn't feel thematically connected to the ship-circles, perhaps show selections by changing the circles, e.g. by giving them a brighter frame or a different background colour within the circle?
-
Thanks a lot Eishiya! I tried to make things clear depending on your critic.
About font size, i just work on 640x360 but min compile resolution is 1280x720.
However i am still being stuck on background issue. What i tried to achieve is brass on polished steel as material but i can't somehow think of anything to attach those elements.
If i keep using black background, it feels too empty. Any suggestions?
(https://i.imgur.com/4k9V4A1.png)
-
Fading UI elements is a quick way to create a visual hierarchy, but try to think more on that subject.
It looks less chaotic with the Blueprint and Hangar sections aligned, but it still all feels a bit disjointed. Try to think about how these things connect and how they can be grouped, and how the UI can show these relationships. If there are no relationships, then are you sure all of these things need to be on the screen together?
Consider the theme you're going for. It looks like your goal is something that resembles an actual physical interface that could exist in your setting (as opposed to something abstract). How would such a physical interface be arranged, what would it consist of, how would it be built? These questions might guide you to some effective answers. Don't think of the background as just a "background", think about what it might be in terms of your UI's theme, and think about how you can use the background to show the relationships between the different elements.
Even a solid black background can look good, though! The reason yours doesn't is because the other elements aren't particularly well-composed. Consider perhaps arranging them so that they're a little tighter, rather than anchoring things to the edges of the screen? Dead space far away from the focal areas feels a lot more pleasant that dead space in the middle of the action.
-
Thanks again Eishiya. I will be working on it next days and update the post. Hopefully i will come up with something better organized.
-
It has been quite sometime since my last edit , was working on some other stuff but i am back to the Crafting system again.
Like Eishiya pointed out, i didn't actually need to show hangar there at all. So i replaces with different kind of blueprint system and reworked on it. It is still WIP but i appreciate any feedback! :)
Thanks!
(https://i.imgur.com/wEN1eMn.png)
-
I really like the improved separation of background / foreground. The eye is more attracted to the content now.
The bronze adornments are not distracting at all.
You may want to try a double-pixel shaded border for edges of the UI. This gives some thickness.
On the dots that look like targets, I think you mean them as a 0-3 count for bomb and I-dont-know-what : You probably overdid the contrast, because "gold+black" is extremely sharp and much more eye-catching then the bomb that gives it context. I would rather use solid gold or black dot, if possible using the same color scheme as the above bar of gold-or-black squares. If you insist on the "target" pattern, then at least reduce the intensity by choosing gold and "darker gold".
The colored dots are painfully non-round, especially on the zoomed one (hopefully just a placeholder).
A square highlight on these dots would look better, because a 2x2 square in this contewt will read as a tiny circle in the viewer's mind.
-
Thanks for the feedback yrizoud!
Yes those balls are just place holders. :D
I actually didn't understand what you mean with that target "black-gold" part. Do you mean the green colour?
-
I meant the on/off circles under the bars, the concentric circles made me think of "target" symbols.
Here are some studies / suggestions. I tried to make the squares and circles match, somewhat.
I originally wanted to create a version that kept the "target" pattern (maybe it's informative), but couldn't find a pretty one.
(http://i66.tinypic.com/14iiotk.png)
-
Ah okay now i understand your point. Yeah thanks for the edit, definitely i will be going with flat option :)
-
So here how it looks . Something still feels off but i can't figure it out, maybe that is just me =/
(https://i.imgur.com/6HM8KwJ.png)
-
I got my laboratory up and running, what do you guys think about this research UI? (Blobber Autopsy green stuff is a bug caused by gifcam application)
(https://i.imgur.com/L6VuGxU.gif)
P.s. Yes, I love X-Com games :P
-
It's looking good. To the point where now the first thing I notice in your UI is the deep black background. I'd make it a textured gray or at least not deep black (a purple or blue that READS as gray to the viewer). I also think you could increase the "selected option" intensity 1 or 2 more steps. It doesn't become immediately apparent from a glance what is selected and what isn't selected.
Otherwise the only other thing that stands out is the Green angled symbols near the battery I think could use more texture or shading. Actually it looks like the main battery units on the far right have some slight shading. I'd try to include something similar on the angled unit symbols in the middle menu area.
Overall the things that stand out are the solid colors (background and green angle symbols). Everything else is very tastefully shaded. So the solid colors stand out a lot.
But overall I think it's looking great. There is a clear visual hierarchy and the shading is really great on the different menu sections. And I love the green/pink/blue bubble meters in the middle section.
-
The highlight color may be sufficient, but I find it too slow to fade-in/fade-out. It may not be an issue if the game has a mouse cursor anyway to see what you're pointing, but if it's cursor-driven, it makes the interface look sluggish, and also reduces visibility: If you try scroll continuously down to select an item near the end, the "current" item will not be highlighted for long enough to become visible, and so you can't see anything until you release the down control.
-
Thanks for the feedback guys.
@DTE462 I am glad you liked it , i have serious problems with that pitch black background and can't really figure out how to solve it. Doesn't matter what i tried i wasn't able to do it, will keep working on it though.
@yrizoud There won't be any mouse interaction within the game since it is designed for Consoles but will be available for PC too.
You guys are right about the opacity and it's speed to lighten up, I've already changed that. :)
I could really use some tips for that black background , if you have an idea please let me know.
-
If it's menu that is mid play, I would just have the current background with a solid color set to 50% or so transparency. If it's ab entirely new scene or layout I'd say more of those pipes that the foreground menus are made out of but with far far less contrast. But even a solid color that isn't black Stark black would be better. Maybe some simple texture patterns could work too.
-
The background is already not solid black, there seems to be a dark image behind it. It could stand to be a little more visible, but not too much, or else it would become distracting.
-
Yeah there is grayscale mothership on the background, i thought it might be better than just a black background
-
Oh I see it. It wasn't showing up on my phone for some reason.
Maybe lighten it a bit, and double or triple the size of it, so that it's more abstract but still subconsciously connected. I'd still shift it to a specific color. But I would still keep the background of the menu items on the left as solid black. Changing the main background to a specific color will make them stand out more too.
-
Update :
(https://i.imgur.com/3FklaHB.png)
-
It is looking really nice! I dont have much feedback, though. It's reminding me how I need to put some good hours into my project's UI soon haha. Did you make the font yourself?
-
Thanks Falz. Nope, i did download it from dafont.