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.


  • CopyWheelEye
    The current Project which I've created a brief for is for a game adaptation of the "Mistborn: Final Empire" book, written by Brandon Sanderson.

    See the source image

    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.
  • CopyWheelEye
    Okay. First proper update.
    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.

    Image result for allomancy table

    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.

  • CopyWheelEye
    quick mini update of a couple more thumbnails.

  • jaciedraws
    Offline / Send Message
    jaciedraws triangle
    This is one of my favourite books! For the title screen, I love the top left one two posts ago - the mist and ash really come through. I also love the bottom left one - it might be a good transition screen. The bottom/middle right one's title is a bit difficult to read though. 
  • CopyWheelEye
    This is one of my favourite books! For the title screen, I love the top left one two posts ago - the mist and ash really come through. I also love the bottom left one - it might be a good transition screen. The bottom/middle right one's title is a bit difficult to read though. 

     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.
  • CopyWheelEye

    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.

  • CopyWheelEye

    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.

  • Eric Chadwick
    Keep going! Great to see your progress.

    What kind of concept process/workflow docs are you reading these days? This kind of stuff might interest you
  • CopyWheelEye
    Thanks Eric. I'm going with the mindset of Pace over everything.

    In terms of your question, I've been going through "Know your Onions" and lurking Reddit and 4chan 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.
  • CopyWheelEye
    Todays update.
    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.

  • CopyWheelEye
    Update time again.

    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. 

Sign In or Register to comment.