Sketchbook: COPYWHEELEYE
polycounter lvl 2
Hey all.
This is to be my User Interface, with a little 2d art/sketches and whatever else Sketchbook.
All Critique is welcome and any ideas anyone has I'm open to.
Here is a display of my current power level.
(queue self deprecating statements of ones own work)
Artwork in cards is not mine.
Thanks for stopping by, and hope to see you again.
This is to be my User Interface, with a little 2d art/sketches and whatever else Sketchbook.
All Critique is welcome and any ideas anyone has I'm open to.
Here is a display of my current power level.
(queue self deprecating statements of ones own work)
Artwork in cards is not mine.
Thanks for stopping by, and hope to see you again.
Replies
I've created a Game Design Document for this game, and will use this to inform my decisions. I'm terrible at working without confines, and need an overall understanding of what I'm making, and what step should go before and after.
Very Basics from the GDD.
Setting of game is a paused early industrial age.
Game is 3rd person character action game in a sandbox. Character has access to a range of abilities that enhance movement and combat.
Shoot coins as primary fire, and use coins for double jump. Character is superhumanly fast and durable etc.
Metals play heavily in the story, world, and gameplay (as it is the fuel for the magic system, and the two most visual magic abilities deal with pulling and pushing metals)
Funnily enough, in terms of gameplay I think it would be a mix of Dishonored and InFamous, with the visual setting being very siimilar to the former, and the gameplay to the latter.
The goal is to work from the wireframes, all the way up to the the end product of 5-7 screens of UI work backed by UX minded creation, all to the best of my... abilities.
I want to improve my Graphic Design, but I think i'm going to also pay attention to pinning down an effective production flow and sequencing of activities.
Actually starting was harder than anything else, it was mostly reading or looking things up until I decided it's better to do it badly than not at all. I've also realised that a lot of what is displayed isn't "readable" without explanation so I'll work on that in future posts.
As stated in the first post, I've started from the ground up.
This is the mock GDD I made
Firstly, I created the basic User Flow, of the screens I'd predicted a player to traverse through.
I've labelled the screens that I want a FINAL version of for showing. Other screens if created will be basic at most.
To begin. I felt I needed to know how this game was going to play. Since it is completely made up, I wanted a better idea of what things I'd be needing to show. Things like Health Bars are expected, but other things like status effects icons, information displays etc are up in the air.
I realised that a coin counter might be needed on screen since currency is used in game to purchase services and items, but it is also used for the players double jump, and is the main source of firing ammunition.
Resource management is strong in the book, as the "magic" is fuels by ingesting certain metals, which are consumed as the user performs Allomancy. There are 8 metals in the first book + Atium. But having 8 on screen meters is beyond asking for trouble.
To tackle this I've looked at what actions + metals have the most impact on the moment to moment game play.
The combat oriented magics need focus, while the more passive ones such as hiding the use of ones magic is less crucial.
A practice I've used while doing the project so far, is lexical storyboarding (I don't know if this is a real thing but this is what I'm calling it."
Drawing storyboards would be expensive in terms of time to rewards, so i type out a scenario, and imagine I'm playing the game. I'll probably try this with another person in the future to see what they say as well.
Anyway, I found that I wanted to tweak the way items are used, the functions of some buttons, and the game play some.
*I changed "pulling metals" from a dedicated button, [L1] to a secondary function of the A.D.S (Aiming Down Sights) button [L2]. This button would pull the camera in a bit on the character, allowing for finer control such as sidesteps, precise firing, blocking, and the pull metal function.
* I moved the d-pad functions around heavily. The idea was to have little radial meters around the respective d-pad icon on use. This was to lower the number of meters on screen at any one time. I felt it was too much still though, and decided to change it up.
-> Abilities such as being able to sense other allomancers in the area is now a constant meter-less passive. Requiring the player to turn it on feels not only pointless, but also a nuisance, and having the meter on such an ability at this time may dissuade a player from using it.
-> The Tineye ability (boosted Vision and physical senses) is now moved to R3. I figured that since it's used to move the camera ergo "view the world", having it enhance the characters senses of the world seemed natural.
One of the bigger changes was resource management.
* In the book the characters refresh all metals from a single vial. It seemed like a fine idea for the game at first, but I decided that things needed to be switched up. The abilities that are heavy use require resources, and limiting the number of vials each ability uses would could create tension and maybe help balance game play. Stronger techniques require more meter, which burn through reloads, which means finding a metal vendor more often or using abilities with more care if none are near by.
Though it isn't on the screen. either Circle or Triangle would bring up a radial menu with the top portion being weapon selection, and the bottom being vial selection.
Skill trees are a thing in this game.
Natural Improvement: The basic core techniques gets stronger with constant use. The characters double jump will get better, then lead into a weak triple jump, and so on. (to a max of maybe 4-6). Better firing accuracy and ammo count over time etc. Some crossover as well: being able to manipulate more coins in hand for firing is a perquisite for more jumps. Using abilities makes them stronger.
Narrative: Getting a teacher that has mastered a metal unlocks the intermediate and master techniques of that skill tree.
Point system: Standard exp buying system. Higher level techniques like influencing a crowd of people to be drawn towards you or to cause instant panic; a sharp shooting ability that combines the tineye ability and the metal firing ability; and others, are unlocked by defeating NMEs and completing missions.
There are 8 metals that can be broken down into 2 groups of 4, or 4 groups of 2, or even 8/1.
I haven't come reached a fixed layout or look yet.
Some thumbnails of the main menu.
Early rough ideas for layout.
I felt that I wanted to progress into the UI side of things now at least a little. and felt that the Title screen would be a good place while the other screens were still shifting a little.
I looked for some typefaces for the game. I wanted a typeface that encapsulated the feel of an imminent industrial age setting, with the mysteries of a magic and the unknown; it is also a story filled with danger, fighting, and assassins.
Looking for types I find can be like trying to find a perfect pebble on a beach. I gave myself a time limit for now, and focused of types that fit the visuals I had in mind, plus some left field choices.
I started with a few quick rough ideas by hand, and at the same time did some things in photoshop.
This is still a WIP and I'll think up a few more title screen ideas.
At the moment I'm enjoying the idea of trying to make the title screen and main menu screen, feel like a book cover illustration. (Fun fact, that was what I wanted to do as a youth, become a book cover illustrator
I'd like that the Title screen, transitions into the Main menu with minimal changes, but I'll see how that go.
ANY and I mean ANY, crit, feedback, or anything, is beyond welcome. If you actually read any of this, thanks so much for spending your time of my efforts.
Hey, thanks for the input, I'll be going with what you've mentioned. It's an amazing series of books, and the first truly something special.
Life's been nuts. Back on the wagon.
My meager update. Will update more soon.
Not sure yet the best way to display stuff but it'll be figured out. Gameplay is not mine, just for show.
This is full of flaws, but fuck it at this point. Have to be shit before being good.
With the pause since working on the Mistborn project, and realising I put a mountain on my back, I've decided to move on from it.
Tron like game is the new project.
Everything but Apex's Bangalor is mine, though the crappy cloudy background was a cloud photo I edited quickly as a placeholder. Just working it all out.
Still WIP.
What kind of concept process/workflow docs are you reading these days? This kind of stuff might interest you https://material.io/design/
In terms of your question, I've been going through "Know your Onions" and lurking Reddit and Graphic Design Threads, and watching a few designers videos. But it all feels kinda scattered. I think I need to start looking harder.
I think on the first look I confused the Material site as an information resource lol. This is pretty cool though, i can see it coming in handy.
Thanks a lot for this.
Looked at the piece and tried to identify issues and fix things. Will give it another pass, then will create a screen for upgrading stats and weapons. I think I'll try to draw a Tron like character as well to replace bangalor.
The main issues I can see I need to address might be the readability of the text, the strength of the glows (I adjusted them on the time played box), the key card items are kind bad. I'll look at those next.
Second screen from the current project. On pressing "Square", the player can upgrade their equips and increase stats.
The current Overclock section was meant to be a space for all stat info to be displayed at once. This will the main stats including minor stats like RNG (luck).
On the screen it looks pointless as it's reiterating information that already exists. I've decided to use that space for the overclock upgrades, but need to rework how it should look.
With the glow effects off, it's not as 'tacky' I feel, so I have to do something about it.
Got a new PC a few months back, so I can actually use after effects, XD, Premier and other software my 9 year old laptop couldn't handle or even run. Now that I'm not waiting a literal 25 minutes for boot up and Photoshop to open, things have actually been going better, I can push a button and not wait forever for the next thing to happen.
I've done a couple "Master Copies" and minor things during my absence and I've learnt some new stuff, not as much as I'd like, but we take what we can get.
----------
Apex Legend weapon and character HUD Copy. Pretty simple, was the first copy I did. I realized that adding a little texture in the form of the fading dots with the color and opacity gradient add a lot. It's something i'm going to be keeping in mind.
--------
God of War screen Copy. Made everything but Gibraltar character art. Might start drawing characters just for stuff like that. Despite looking simple there were so many cool little details all over the place, but many of the choices the designers made I don't understand yet. There are many things I like about the god of war interface, but a few things I don't like. I haven't played the game so maybe it's the kind of thing one needs to play to truly appreciate.
---------------
Horizon Zero Dawn Copy. Took much longer than expected but learnt a good amount. I made Active and Inactive states for the weapon select, health, and health regen meter. Little things like making a nice coil for the bottom weapon tripped me up strangely. Loads of layer masking, and effects all over the place; the housekeeping in photoshop was a lesson in itself.
I think this game has one of my favorite UIs in general even though the "UX" when it comes to item selection and how items and weapons are sorted drive me insane. Even the way the items scattered in the world are flagged pleases me.
I think I need to do more of these, there were things I didn't know were even a thing to learn until I started doing these copies.
There are other minor things like Wireframes, little tests, sketches, and a few drawings I've done but nothing worth uploading yet I feel.
Also will be more specific when requesting crits from now on so just enjoy the show for now.
That whole begging for indiscriminate crits like a low luck PC facing a final boss was so shameful.
I want to do the whole thing a few times over, but i'll see how I feel over time.
Most of the work in terms of Wireframing, and low level layouts were done. I've used XD to get all the low wireframes into one place and messed with linking the pages together. It's not perfect yet as I'm still adding in screens. I won't make all the pages into high res versions, but I want to know how they'd all fit together at least. I also realize my layout understanding isn't great. I've read some articles on Medium and other places about the subject, but reading and doing are not the same sport sadly, though it does help.
I'm at a tiny bit of a loss when it comes to exactly what to tackle next, so for the time being I'm going to try and create a relatively polished in game combat screen, and I'll figure it out along the way.
(I should rename this sketchbook to Brainfarts 'R' Us)
I know that there are no highlights for what's selected at this time, but I didn't want to get into the details trap.
I'm also realizing that the menu's might need a cursor since the direction buttons are being hogged by moving sub-menus, which I don't prefer, but I get now.
The dots and numbers under and above the vials, are to show quantity, but I haven't decided exactly which display method to go with. (But lets be real, it's going to be the numbers.)
I'll take another pass at the layout of the combat screen, and then it's onto doing the creating. Thinking about it, I should probably decide on proper colors and stuff. I know green for good, and red for bad, but... we'll figure it out.
Allomancy / Skill tree Screen
Inventory screen - Consumables.
Inventory Screen - Accessories. (Need to change the item word to accessories.
Journal / Codex (didn't notice that the "BOOKS" came out of alignment. will fix.)
Journal / Codex (didn't notice that the "BOOKS" came out of alignment. will fix.)
Move List
I've remade the combat screen because the first attempt from last year was a mess file wise.
I sketched up some crosshairs, and then realised the shape of the "magic" ability for shooting metal was conveniently good enough if a few tweaks were made to it. So far the ammo counter has been a pain in my side, but I think I like the solution I've come up with. The gold counters by the crosshair will animate so they move up towards the highest counter, and shoot away with each projectile spent.
I still want to change up the textures on the metal, but I'm also feeling that it's a little bland. The compass looked better in sketch for as well.
Going to have to do something about these under the healthbar stuff. I think I want to go with an deep red animating mist under the health bar. I don't mind the other blue parts, but they don't feel right yet.
I'm getting a little concerned about the menus though. I think translating a similar styling to the combat screen is going to be kinda tricky. Thin metal borders will probably look tacky, but I'll have to experiment and see what I come up with.
Need to get more regular drawing in as well.
I'm going to start of the Inventory screen next, let's see what happens.
I've moved things about just a little bit. I felt the layout was ugly but couldn't exactly explain why, and decided the vial sub screen was pointless. The vials could be counted under regular inventory, or given their own category slot so they've been removed, and things moved about a little.
I decided I wanted the in game model to be in this screen instead of the Journal menu screen, with the journal menu screen now having a portrait of the character instead. This is to give a place for the player to see the PC in a neutral setting and the chance to see things like status effects, accessory equips, and item effect, on the model. Could be a fun little thing for the player to see.
The stat screen is just a copy/paste job out XD with the background colour knocked out and needs to be created.
I also need to create the Header Navigation section, and the circles by the highlighted item is just a placeholder.
The Select / Back words and buttons are not the normal way round, I'm just seeing what it feels like for now and will probably end up switching them about.
(I just realised I'm making up terms as I go along; I will look into proper terminology and stuff for these things in the near future.)
This has been kinda challenging, I'm seeing my shortcomings more, but I'm also pleased that I'm making some sort of progress..
The arrow like thing above and below the main headers are the selection indicator. I have them all on just to see, but only the selected menu screen would be active. I had to adjust each to match the curve, and the curve I think will come back to bite me as I want to animate these things, and I'm now trying to figure out a nice way whilst having no animating skills.
It's still in the works with things such as the bottom info bar, the item type switches, etc. I'm still trying to figure out the "Item or the other" frame design and there are two I'm playing with atm. Nothing fancy but I'm trying not to fall into the trap of fixating on something until I stall completely.
I asked someone what they thought, and they said it's not very colorful, I wanted to through in some color, but i'm going to wait until I have a good idea of where to apply it.
I think I'm going blind to the screen though, so I'll hit the main things, start on another and come back to it.
I guess if anyone has any input it's welcome. I think I don't know enough to know what to ask about lol.
Some figure studies. Digital.
1 Minute poses that I them added detail to. I've been drawing in 0.3 ballpoint, so I'm trying to figure out how to shade with it. I think I'm going to stick with the pen for now as i tend to worry a lot when using pencil and don't commit. Strangely the pen I'm using can be so light that I don't need to worry, and if something goes wrong I just have to accept it.
Trying to go more for the value again, and ways to get it. Pretty much ignoring anatomical accuracy, and just trying to figure out how to boost forms and planes. I can see I need to work my eyes more, and need to figure out a system of separating shadows from highlight without being able to use an eraser.
I need to pull everything up a bit on all the screens, that gap at the top isn't adding much I feel and eats up space at the bottom active usable area. I'm going to do them all at the same time then adjust as needed.
Having falling ash in the background would be cool maybe, but a test I'll leave till the animating stage. Need to decide on a background color.
Feeling a little lost in ways, but I'm going to continue as is. I'll just look back at the end.