#ui dev

[dionysios-chalikias]

[shadowsprints]

Started on the weapons/ammo display which will be next to the health/stats module. Experimenting with layouts/info first then will be moving onto colour variations (or may even stay black and white).

[melsidian]

After some feedback I did some more iteration of the health bar (top left is the final, bottom is old look) so having the health in the middle and resource bars around it. Started on the minimap design (top right). Also available for freelance work just pm me! And forever looking for that studio job of course!

[melsidian]

Began making a sci-fi UI set, starting with the health bar.

[melsidian]

Here’s a UI mockup I made of a mobile cooking game! I included the start screen and various menus, an example of a mixing bowl activity and a flowchart of how it all links together. Any feedback would be appreciated.

[nanchu]

Do you have a hard time delivering design?

Are you a designer on a project, battling a dev / BA team?

Do you feel like your team is moving too fast and you're falling behind? 

Does working on design often feel like this?

Or even this?

Do your developers and product owners constantly feel unsatisfied with all those PSDs getting emailed to them?

Well we've got a solution for you! Introducing a NEW more collaborative way to do design!

That's RIGHT! If you learn how to be a bit more technical as a designer, you can create a smoother design process for your agile/lean delivery team! By switching to prototyping and and learning front end code, you can work more closely with developers and product owners. 

Just use these tools and processes together:

Agile - a methodology to delivering software

Get-Serve - quick scaffolding prototyping tool

Haml / Sass / JQuery - the essentials of prototyping (you can also use HTML / CSS, but they will slow you down like a Chipotle burrito slows down a person with a food coma.)

Github - where you and developers can store your work

Heroku - where you can deploy your prototype live to a URL

And you can throw away all those thousands of layers of photoshop files and documentation your team doesn't need! This process will give your team the collaboration and tight feedback loops to deliver faster and more iteratively.

All this for an AMAZING PRICE OF... FREE!

That's right folks! All you need is some time and energy, and maybe someone to help show you the ropes to this new way of working. You too can learn how to navigate front end code and create your own prototype!

Don't believe me? Here is an example of how this process can change your conversations.

Before

Designer: So I sent you an email with the PSD attached, version 204 and 205. You can find the revised color set for those buttons in it. 204 is for the brand palette blue and 205 is for a lighter blue. I think the business folks are still deciding on some colors though, so keep on the lookout for PSD version 206!

Developer: Sorry it took me an hour to figure out which layers those assets were on and I had to borrow a computer with photoshop on it. Also I think the color pickers are showing me different hex values on different parts of the button. I will need to spend like 10 days to refactor all the color codes if we try to implement them now. I think I will wait to work on this feature until you've got your colors finalized.

After

Designer: Hey, the hex values for these buttons are an estimate and stated in this variable.sass file in the prototype. Can you stick with using those variables for now so I don't stop you from developing this feature? We are deciding between using the brand palette blue and this lighter blue. I'll work with you later when we've confirmed and we can update the color variables together. 

Developer: Cool thanks. I'll just inspect the code you pushed to github and work from that. If you've got new versions, just push those to github as well. Let's look at it together when you're ready!

Is this for real?

Yes.

I recently had the pleasure of successfully pushing for this process on a project in Australia. Due to tighter collaboration with developers and product owners, we were able to do a complete site redesign in 3 months, and implement responsive design in 2 months. Because I could understand the implications of my design as code, I was able to be much more efficient in pushing design concepts to the team.

And the great thing about having a prototype to help facilitate all the conversations, we easily created a living style guide that showed all the UI patterns. This was consistently updated as we made changes to the prototype so no need for extra documentation.

And to all those folks who say that designers who know how to code aren't as great or specialized as designers who spend all their time doing design - I say those are the folks who actually have failed at coding themselves or have never done this design process successfully. 

Code is just like photoshop or illustrator. It is merely another tool you can learn to use to create great designs. The difference is, you will be working in a medium that is closer to your actual final product - code! 

[nanchu]

Surprise...Stylesheets!

Since discovering the magic of forks and pull requests, I've found a fun way to help with UI cleanup on the internets. Here's one I did recently for the JS Cover landing page. 

http://tntim96.github.com/JSCover/

Before:

After:

In working with this, I discovered a fun gem, Haml-server which gives you a fast and easy way to get a server up and running in the project folder.