Designing the UI for my Farming Game

[@Kingmetro360]

I've been watching you since I was 13-14 man, and now I'm 20. Thank you for just motivating me, and the game looks amazing.

[@dylkirbs]

This channel was one of my biggest inspirations in life and definitely contributed to me studying computer science

[@Jiftoo]

Hey man, same. Trying to make my own game is what really hooked me on to programming.

[@-N0PE-]

This.

[@konjecture]

Keep watching for another 10 years and you will be 30, if my math is correct.

[@razmatazz9310]

@@konjecture Let me crunch those numbers...yep, looks like you are correct.

[@cats4president]

i really like the color scheme system you made, especially when you were switching between them (blue > brown > lightblue) to me, it immediately felt like you were switching to a different season. the darker greenish blue would be a nice winter color and the browns for autumn.

[@d0tt]

I was looking for this comment, instantly felt the same and think it would really cool to switch them with the seasons changing :)

[@dcprom0396]

Would be a nice option for the player so they can choose between different color schemes.

[@sebastianprice9496]

Im sure enough people have said this but the UI looks amazing so far and I love the fact colours can be changed. It would be so cool if we could do this in the game as a setting and apply our own custom colours. Love the progress and I look forward to seeing the next devlop. Keep it up :)

[@pixobit5882]

Yeah, exactly my thoughts!

[@roeyshapiro4878]

Or depending on the time of day they change!

[@alexisbrin518]

why not have some reward or quest to complete that gives you more choice in the colors of UI you can choose from

[@ConnerWithAnE_]

@@alexisbrin518yea that’s a great idea, like unlock different colours

[@retrojon_]

@@alexisbrin518 Not being able to change the colors to whatever you want from the start presents a usability issue for those who experience some level of color blindness. The idea of unlocking colors sounds cool but since this affects UI, it's probably best to avoid it.

[@jamesbaconreid]

Designer here. Keep the cell shading, thats great. Small dark circles around the inventory numbers. The white text on the green was still readable. Keep going in this direction!

[@jamesbaconreid]

Also for the fertilizer buttons, keep the design it's great, just scale down the tag.

[@MariamaDiallo-fj6ow]

It would be cool if the transition from the farm to the town was in the style of the cloud like shapes in the UI

[@RobGThai]

Something like The Simpson intro sounds wonderful. However, do consider how often this will get used. Such detail transition required times for people to perceive and might not fit how often we need to see it. If a game flow required me to visit the town often then it might be annoying. Need to find that balance.

[@kr15t14n_]

Remember that simplicity is the ultimate sophistication

[@TheThirdPrice]

Ahh, the anti-wintergaten theorem

[@klaxoncow]

"A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away." - Antoine de Saint-Exupery

[@Tylru]

Hey! Followed you a long time, figured I could chime in as someone who as worked has a Senior UI/UX Designer for a long time :D - On the inventory bar, the counter numbers could get a small circle behind them, that'll increase contrast and allow the number/circle sit slightly outside of the slot background shape. Perhaps try using the icon outline colour as the background for the number. The star could get a similar outline to the icon which would make it pop. - Really well done on the button shapes. They're really unique and have a fluffy/welcoming feel to them. - I would consider centering the currency/time elements into the middle of the screen. Perhaps have them either side of a nice juicy round Home/Town button. It'll keep the symmetry that the inventory bar has created and keep the corners/sides of the screen empty for other elements you may need to introduce later. - Popups look great. They're fairly easy to read but the feedback about the 'filters'/fertilizers looking like buttons is valid feedback. I'd suggest trying a much more translucent fill on the shapes, and go with the same font colour as the fertilizer colour itself. This will make them feel less like buttons, but still introduce the fertilizer colour in a subtle way. - On accessibility, you're already doing a great job not solely leaning on colour as an indicator. I would more heavily focus on the Fertilizer icons, rather than the colours they have. Especially if you're going to have more than 2-3 fertilizer colours. Colourblind players will struggle with that, if so. Icons are far clearer, and the ones you have already are quite nice. Perhaps you could try adding a " + " to the growth booster icon. - I would highly recommend adding the ability to hold shift/ctrl to toggle on object/tile examine modes. If shift is held, auto object examine under the cursor, and if ctrl, examine the tile. You can still keep the UI buttons, but that'll reduce the number of mouse clicks and mouse travel needed for more experienced players (not having to move the mouse away from the thing you want to examine to switch mode will be really nice). Not sure if links will work, but here is a very rough paint-over of some of these suggestions: i.imgur.com/LkjKFf3.png

[@Tylru]

Oh, another idea as well, for later representing seasons :) i.imgur.com/Ob1qSqd.png

[@ThinMatrix]

Oh wow, thank you so much for the suggestions and for taking the time to make that image - I'm very envious of your skills to be able to come up with something that looks that good so quickly! The changes you've made all look wonderful, especially the fertilizer tags, I love what you did there. Thank you very much for the help!

[@lucbloom]

Text with a solid high contrast backing is preferable to throwing an outline on it with that color, legibility wise. (So make it an inventory counter *circle* instead of a number + outline)

[@Goodgis]

I love the visual update. They seriously add to the character and charm of the game. Great work!

[@ThinMatrix]

Thanks a lot ^^

[@JuanTarallo]

Looks awesome. Very clean and suits the overall style.

[@ThinMatrix]

Thank you :)

[@KingPr0o7]

I have the same feeling of “What makes a UI look good?” It’s the biggest thing for me as a Website Developer.. Glad to see I’m not alone.

[@phoenix05892]

There's always so much work that goes into the little things that people look over. UI is absolutely one of these things. Glad there's a video discussing the process that goes into it!

[@NaughtyKlaus]

It's looking a lot like it's made by Nintendo, which has a good name for making great child-friendly games like this.

[@natecraver6362]

I definitely like the more imperfect design for the buttons/icons. Makes the game look a bit more cozy, for lack of a better word. Would be neat if the player could make/choose there UI own UI Color Schemes.

[@clamor9849]

I’ve been playing skyrim and i think their potion mixing system is amazing and could be incorporated in your compost system. Basically so that when you first start the game, you do not know the effects of the fertilizers in the shop and you have to add them and wait for the compost to be ready and only then will you discover the effects of the fertilizers. That could give some progression to the compost system and also, could allow you to have a few sneaky fertilizers with negative buffs;)

[@CoderDev6545]

This is a long awaited update! Fantastic job!

[@GuildOfCalamity]

Dude loves the workspace selfies. Game's looking really nice.

[@theyeetgamer7787]

THIS IS AMAZING! This guy is someone i wait excitedly to upload cause i love his content and just love all around😁

[@SebbyGraves]

"I've been working on it so long I've lost the ability to look at it objectively." I feel this every time I do world design or UI design for long periods of time. Always great to have other people give you unbiased notes.

[@ItsMeChillTyme]

That idea of trying to draw over/around a professional icon to give it more personality is really smart. Wow. Thank you.

[@Datdus92]

Graphic designer here with some feedback: The buttons with text could use a little more padding. It will be easier to read and will look less cluttery. love the faux drawn icons!

[@blopstudio]

ui look great imo u can be proud, crazy how you seem to be able to learn anything one thing id change would be making the outlines white rather than black, maybe it would fit better with the general color scheme of the game while still keeping the readability that an outline gives id try it at least also idk if you plan implementing a day night cycle in the game but if you do, the ui could change depending on the time all in all great work man love these videos always make me happy to watch

[@360McCarthy]

As always amazing! My partner has recently started a UI UX course so she has found this fascinating also, can't wait to see more!

[@CurtisDoesADig]

Dude I REALLY like this UI design. This is so impressive for real!

[@samuelhulme8347]

UI looks better than what I could do. Also Shneiderman’s 8 “golden rules” of UI could help you.

[@PengiiiiGameDev]

It is a good dayyyy!!!

[@pineapplerindm]

7:07 - for the fertilizer tags, maybe it'd help if you made the text colors a darker version of the current background, and the background much lower opacity (or blended more with the parent container's background). That should maintain contrast while reducing attention to them also - the headers for each statistic ("Contents:", "Fertilizers:") may look nicer without the colon as they are headings anyways. To make them look more like headings without the colon, increase their font size & bottom margin. another thing that might help with distinguishing between headings and normal text is to make headings look _more_ contrasting against the background by making normal text _less_ contrasting against the background finally I really wish Dosis had a monospace (tabular) numbers OpenType feature for numeric values...nothing much can be done about that... overall the ui looks really good and fits the "cleanliness" of the game's artstyle :)

[@ThinMatrix]

Thanks for the suggestions!

[@pushqrdx]

I am not sure if you noticed it but the wavy bits you mention in 6:10 are actually genius because they look like little clouds, as a top-down game, they give you a feeling of the sky above even though it's not visible on screen.

[@Spagheters]

The new UI genuinely looks so amazing, I love it! For someone who struggles with designing UI you did a really good job!

[@ElianeGameDev]

Your game already looks so professional.

[@hamzahgamedev]

What a timing ❤ I was about to start implementing UI for my own open world farming game and I can’t believe you uploaded a video about it. Thank you so much and this looks absolutely amazing 😍😍

[@ramoncf7]

I think you've done an excellent job with the design but also setting the foundations for future changes. Cell shading looks good, but I believe the animations play a bigger role in this specific type of game, they provide feedback and make the game feel more "alive" (icon wiggling or zooming in, etc). Also, make sure you run the animations on the icons when using the keyboard, and not just the mouse. Game is looking great, thank you for sharing your talent with us!

[@Lizard_geek]

I think I watched your LWJGL videos a long time ago and now you have a game released and even working on another? That is amazing man! Trying to get back into my hobby of game dev can be difficult but once you're in it your locked down and I love every second of it. You are doing great and living a lot of peoples' dreams!

[@Rhys510]

Looking great, I'm always so drawn in with your videos!

[@johnosei826]

Always nice to see these devlogs. Some of the best!

[@sour_trout]

Having the ui be adjustable in code is so cool. I'll keep this approach in mind :)

[@taylorbayouth998]

LOVE the hand drawn look on icons and buttons!!!

[@coreyshepherd9328]

I am currently at university studying game development. I've love watching these videos and they really help me stay motivated with my own work.

[@theintjengineer]

More impressed with the place you live 😮 So much Nature around❤️

[@burrdid]

I first watched you and bought Equilinox when I got out the hospital about 5-6 years ago. still very underated.

[@FMontanari709]

4 years since the city builder already? Feels like yesterday to me, time sure flyes by!

[@andyloveridge7485]

I absolutly love that navy blue color scheme it feels so fresh and pops

[@DBProductions12345-m]

Should have a seasons colour scheme that changes every quarter based off the PCs clock

[@incM14]

The colorscheme at 11:37 looks the best in my opinion.

[@relucri]

Always a pleasure to see progress. Loving the new UI.

[@stickzman]

Nice call on adding the little accents to the bubbles, it does help give the UI some personality

[@manuel.7461]

This would be a really fitting as a mobile game...

[@souls.7033]

The most anticipated episode is here!!!! I haven't been this excited before!

[@skullteria]

After all those years I expected you to be far further ahead in life since you started with such an high aptitude.

[@VxMxPx]

Very nice. Gives different feel to the game. Big improvement. Happy you've corrected perspective on top-left clock icon, to be the same as coin.

[@tropicallion9662]

Amazing work like always! I so can't wait to play another amazing game from you. This one is my fav as i love gardening and always wanted a game that is like this!

[@Haapavuo]

Looking good! I recommend removing the boxes from the hotbar totally and perhaps adding a single wide element as the background. The slots would still be there but a bit less visible 👌

[@diegochequer]

You’re slowly motivating me to start out and make some small games just for educational reasons. Love your content

[@Skeffles]

The UI looks great. I particularly like the render for each item.

[@fuzyongames]

Every time I watch you, I realize how grateful I am that I use an engine. You have to code to simply rotate a UI element? No, thanks :) Your art style great btw. I really liked it.

[@drtnt8855]

As soon as I start work on UI and get stumped you upload. Great work Bro!

[@SpikeStudio]

UI is overlooked by many players, but spending the time to get it into a great state pays off. Overall great progress!

[@Ladebalken]

Going to watch the whole video now

[@larryd9577]

Considering, that currently no sky is visible, I really like that you have chosen clouds as accents, that balances it out.

[@Selentor]

I like how smooth/rounded the new UI looks. It fits well with the aesthetic of your vegetables. If you need inspiration for icons and stuff, it might also be helpful to look at how e.g. plants are sold/presented, the next time when you're buying something for your balcony. Keep up the good work. I'm looking forward to your next devlog.

[@altered_dev]

woohoo you actually moved to idea! seeing eclipse was rather weird than nostalgic to me tbh

[@GamesBySaul]

Nice work as always, I think the UI looks great, love the button style you've gone for and I especially like the transition button too! I think knowing where to draw a line under a task (at least for stage 1) is a good skill to have in development as you could keep doing the UI until its perfect...then you add the menu and realise you have to change it again!

[@paul8731]

Great video. I'd say you're doubting your own ability to make good UI - your concepts, ideas, styles and implementations are really awesome! Great work

[@cardistymo]

Rufus content makes the day!

[@eric-id6bk]

UI looks fantastic, perfect for this style of game

[@jkirby]

The UI looks great! As a software developer myself I also struggle with creating professional looking UI. I would be very happy with myself if I produced that UI!

[@Joern290]

Looks amazing! Well done - you never disappoint ❤

[@RTSFan1337]

I really like your UI Design approach - keep it up!

[@NotGeri]

It looks so good! Super clean, and so very pleasant to look at. I'm so hyped for this game!

[@zoksss5323]

This game is really coming together. Great devlog

[@embergamedev]

UI Design can be so frustrating. There's a reason UI Design is a whole profession in the world (and even those UI Designers a lot of times disagree with each other's designs lol which makes it even more difficult to define what feedback to follow and which to ignore). Overall great update, it's looking more and more stylized!

[@LifeOfMohammed]

Looks amazing as always man so happy to see how far this has come!

[@MrLasditude]

Finally got around to playing Equilinox and loved it, which then raised two questions: "Is there more games from the same developer" and "Are there any videos about why and how the game was made?" Well, finding this video and this channel answers those questions quite thoroughly. I guess I have a lot of videos to pore through! The Game UI Database also looks fantastic and something I definitely make use in the future. Subscribed, excited to follow the progress!

[@buhuhuh7757]

Keep the cell shading on the icons, just because the rest of the game doesn't have it, doesn't mean the UI shouldn't.

[@error17_]

This new UI makes a big difference, love the shapes and colours

[@martin096]

Hey keep up the great work you're doing a fantastic job, the new UI looks really pleasing to the eye and it suites the theme of the game really well. As soon as you release this game (cross fingers) I'm buying it!!! Indie game developers build and release games half finished but then use the feedback to release additional updates to improve the game play over time. Don't stress yourself out trying to perfect this game or you might risk giving up. You are creating something that genuinely looks really fun and calming to play. Some of us have been following your journey for a long while now and will support you no matter what. Seeing those insets @ 1:42 tickled me. You've got to add those to the farm game, it'll add life to the farm. At the moment it feels a bit lonely. Maybe give us the option to purchase a companion such as a dog or cat who sits on the porch or wonders around the garden and maybe even allow it to poo which you can collect for compost. Any way, keep up the great work!!!

[@ThinMatrix]

Thanks for the support :) I agree, the farm and town area definitely need more life! Nearer release I'll add some little details to make the world feel more alive.

[@kylemason01]

Loving the UI design and layout! Great work dude!

[@diligencehumility6971]

That UI looks really good! Gives the whole game a lift.

[@musemeghini]

The UI is absolutely beautiful, congratulations

[@bluemond100]

The design is very well consistently stylized and overall cohesive with the rest of the game. It even matches the color palette pretty well. I do like the organic drawing but it may be overaccentuated in the plain buttons. Maybe it's too much shadow or something, but, if there were any weak points in the overall design, that'd probably be it

[@NoVIcE_Source]

I totally understand stressing out so much about the little details but as someone who sees the ui for the first time, i think looks perfect :D I literally felt like saying woah when it transitioned from the placeholder ui to the new one

[@MrOmega-cz9yo]

I like the UI. Suits the game nicely. I didn't know there is a game UI database. Thanks for the info!

[@HandleDeleted]

Your irl garden inspired me to have my own garden! So far it's growing well! )

[@alexline4131]

UI is surprisingly hard. I've done it professionally a few times. I think you've done a brilliant job with it so far. I'm dyslexic, I like that font, it's not hard for me to read.

[@g_azillion]

UI looks really good, clean, simple and fits the game perfectly

[@zarblitz]

Implementing your UI controls as separate parts you can color through code is actually a big step towards accessibility because then you can allow the user to adjust the color scheme to fit their personal needs. Vision impairments are varied and personal. If they can adjust font size or the whole UI scale as well, that’s great too.

[@eboatwright_]

Looks amazing! I really like the big juuuuuuuicy outlines, and the fluffy UI shapes are really nice :D

[@compasscrafting1147]

Timestamp 5:50, the buttons you hand drew. I think I see why you're undecided. the shadow you've drawn loops around both sides and makes the eye not see it as a shadow anymore. I like the "informal button" look you went with, but that's what stood out to me. The wavy bits work really well: it moves those boxes and buttons away from the standard box design you mentioned yourself. I think the icons popping out of the hot bar lends itself nicely to your goal of an informal look. I think you've got a good start for a kind of style guide. Something very specific to Homegrown.

[@clonkex]

Keep the cell shading in the icons IMO. It looks fantastic and gives the interface some charm. For some reason it reminds me of Dragon Quest 8, which is one of my favourite childhood games of all time, so maybe I'm biased.

[@yoouussef]

i compiled a list f really cool features that you may consider adding to the game here it is: *1.* Currently some players will think that making their farm good and look good is useless, so why not make a competition that happens from time to time and its a competition for the best farm, and the rewards may be: ingame coins, etc.. *2.* Make guides for everything because if you're a new player you wouldn't know the mechanics without watching the devlogs *3.* And for the paths getting dirty mechanic make it so that for the dirt paths the thing you clean is fallen leaves instead of dirt because cleaning dirt from dirt paths is kinda stupid and a fun little idea! : make the harvesting sound effects of the game from your irl little garden, record sounds of you harvesting and add it to the game, if it sounds good of course

[@graham42]

something I've always loved the idea of but never really seen implemented in a game (except for Hades, actually!!) is unlockable UI color schemes :) i think it could be really fun to unlock various color schemes through gameplay (maybe tied to an achievement system or some such) and thus allow the user to choose their own game look anyway, here's to another smashing devlog!!

[@igordasunddas3377]

I love the ambient light around your set up. And the video is nice! Also: perhaps a radial menu around wherever the mouse pointer currently is and selecting a tool by moving the mouse into the radial sector of the tool would help the usability.

[@hubertklim2543]

From my experience as a Front-end engineer, If you struggle with creating good looking UI try to add more white space. Generally speaking, giving elements more space to breathe by adding bigger paddings and/or margins makes everything seem less cluttered. It helps a lot with readability and sometimes also with accesability. For example button for buying plot in 7:28 has really tiny padding, which makes it very cramed. Personally I would add more space between text and borders of this button especially on top and bottom. So far I'am enjoying design you come up with, It fits style of the game perfectly!

[@ThinMatrix]

Thanks a lot for the tip!

[@daviddelayat-dnapictures]

Nice ! To speed up your photoshop process of outlining each icon, you might consider using the "outline" effect under "fx" right next to the "new layer" icon.

[@leleboske6881]

looking insane. Must be hard to keep work so consistent for so long and after all that time seeing the end result. Very satisfying feeling i am wondering

[@vvill-ga]

The UI style looks kinda like clouds, which makes sense for being a bunch of stuff hovering over a farm! I like it.

[@devsergio]

The blue colors look great. My favorite is the darker blue palette

[@YouriAckx]

It looks very neat! It is extremely hard to keep your goals straight when you are working solo, and to avoid tweaking endlessly. At some point it becomes hard to keep perspective. Move to the next card on your board. If the need arises, you can come back later to rework these features with a fresh eye. Keep it up! The result is already fantastic.

[@cleo8815]

If you are going to redraw over some icons, the brush tool for most art programs has a smoothing function that lets you freehand your lines without the jitter one would get from drawing with a mouse. You could give that a go. Wonderful video, amazing to see how the game is coming along!

[@JezzGT]

Looks really nice and fits the theme nicely!