{"assets":[],"author_link":"author\/cakencode\/","author_name":"Cake&Code","cat":"LD #24","categories":["LD #24"],"comments":[],"epoch":1347146040,"event":"LD24","likes":16,"metadata":{"p_key":"77066","p_author":"Cake&Code","p_authorkey":"0","p_urlkey":"285611","p_title":"Art and Usability Tips","p_cat":"LD #24","p_event":"LD24","p_time":"1347146040","p_likes":"16","p_comments":"0","p_status":"WAYBACK","us_key":null,"us_name":null,"us_username":null,"event_start":"1345766400","event_key":"12","event_name":"LD24"},"source_url":"2012\/09\/08\/art-and-usability-tips\/","text":"<p>Hey guys! This is Cake, the artist of the Cake&amp;Code. <img alt=\":D\" class=\"wp-smiley\" src=\"http:\/\/www.ludumdare.com\/compo\/wp-includes\/images\/smilies\/icon_biggrin.gif\"\/>  Now that voting has begun to wind down, I thought I would chirp in with my own personal art and usability tips so that YOU guys might be able to use them for the next Ludum Dare! (Because you guys are totally in, right? RIGHT?! I know we are. :D)<\/p>\n<p><strong>Visual Design Tips<\/strong><br\/>\n- Gather your inspiration early on! You waste time by trying to decide how to make your game look during the jam, so take the time a week or so beforehand to just go around the internet and collect things you think are visually pleasing. Not just images from games you think are nice. Anything! You like the colors on that one website? Save it! You like the way the colors complement each other in that magazine ad? Save that too! Anything can be inspiration, and it helps to keep your mind in gear when the jam starts. (Note: Pinterest is GREAT for keeping your inspirations together.) Below is a mashup of the different inspiration sources I used for AvRvE. Some have more obvious components than others, but I\u2019ve picked and pulled through bits and pieces of all of these.<\/p>\n<p><img alt=\"\" src=\"http:\/\/img.photobucket.com\/albums\/v616\/apple-chan\/inspirations.png\"\/><\/p>\n<p><span id=\"more-181873\"><\/span><\/p>\n<p>- In terms of colors, pair something Bold with Neutral, or Neutral with Neutral. NEVER Bold on Bold. In this case, neutral colors are generally grey, white, off-white, and SOMETIMES light soft colors. So if you have a button that\u2019s Teal, DON\u2019T put Red or Yellow on it. It\u2019s harsh on the eyes.<\/p>\n<p><img alt=\"\" src=\"http:\/\/img.photobucket.com\/albums\/v616\/apple-chan\/colors-1.png\"\/><\/p>\n<p>- Make sure your colors and those \u201ctouches\u201d help tell the story of your game. I know, vague and weird tip, but it\u2019s something that I think is really essential. If your game has that sort of dappper-man-victorian feel, do your research and see what other games, books, and works of art execute in order to pull of that same feel. It seems like extra work, but it REALLY helps draw players in.<\/p>\n<p><img alt=\"\" src=\"http:\/\/img.photobucket.com\/albums\/v616\/apple-chan\/styles-aesthetics.png\"\/><\/p>\n<p><strong>Usability Tips<\/strong><br\/>\n- Always ALWAYS ALWAYS add these in to your game if you\u2019re able to: A pause screen and a skip button during cutscenes. Everyone and their mothers will thank you and love you. Nothing is more irritating to your users than the inability to pause or having to sit through cut scenes that they really don\u2019t care about.<br\/>\n- Do your users a favor and provide feedback mechanisms for different parts of your interface. Buttons? Add hover and active states. (See diagram if you\u2019re not sure what that means.) Provide sound blips to let players know that what they\u2019re doing is right and that it\u2019s happening at all.<\/p>\n<p><img alt=\"\" src=\"http:\/\/img.photobucket.com\/albums\/v616\/apple-chan\/button-states.png\"\/><br\/>\n- Don\u2019t forget your players who are coorblind! Although AvRvE is slightly guilty of this, if your game is dependent on colors\u2026be sure to provide a feature that helps those who are colorblind to make it through the game.<\/p>\n<p><img alt=\"\" src=\"http:\/\/img.photobucket.com\/albums\/v616\/apple-chan\/colorblind.png\"\/><\/p>\n<p>- Keep in mind the keys you make available for players to use! If they can use WASD, it might help to also map the same keys to the arrow keys. Also, some international keyboards have placed keys in a different location than you may expect. ie; the German keyboard has placed the \u201cz\u201d key where the US \u201cy\u201d key is.<\/p>\n<p>\u00a0<\/p>\n<p>That\u2019s it for now! Feel free to add in your other tips and tricks for art and usability. <img alt=\":D\" class=\"wp-smiley\" src=\"http:\/\/www.ludumdare.com\/compo\/wp-includes\/images\/smilies\/icon_biggrin.gif\"\/> <\/p>\n<p><strong>Helpful Resources<\/strong><\/p>\n<p>-\u00a0<a href=\"http:\/\/colororacle.org\/\">http:\/\/colororacle.org\/<\/a>\u00a0(For color blindness testing)<\/p>\n<p>-\u00a0<a href=\"http:\/\/www.colourlovers.com\/\">http:\/\/www.colourlovers.com\/<\/a>\u00a0(Colour palettes and combinations for you to take inspiration from)<\/p>\n<p>And if you can, please do play and rate our game, AvRvE!<br\/>\n<a href=\"http:\/\/www.ludumdare.com\/compo\/ludum-dare-24\/?action=preview&amp;uid=10976\">http:\/\/www.ludumdare.com\/compo\/ludum-dare-24\/?action=preview&amp;uid=10976<\/a><\/p>\n<div style=\"float: right;border: 1px solid #eee;padding: 2px;background: #fff;\"><div class=\"iLikeThis\" id=\"iLikeThis-181873\"><span class=\"counter\"><a class=\"image\" onclick=\"likeThis(181873);\">16<\/a><\/span><\/div><\/div>\n<p class=\"postmetadata\">\n<small>\n\t\t\t\t\t\tThis entry was posted\n\t\t\t\t\t\t\t\t\t\t\t\ton Saturday, September 8th, 2012 at 11:14 pm\t\t\t\t\t\tand is filed under <a href=\"http:\/\/www.ludumdare.com\/compo\/category\/ld-24\/\" rel=\"category tag\" title=\"View all posts in LD #24\">LD #24<\/a>.\n\t\t\t\t\t\tYou can follow any responses to this entry through the <a href=\"http:\/\/www.ludumdare.com\/compo\/2012\/09\/08\/art-and-usability-tips\/feed\/\">RSS 2.0<\/a> feed.\n\n\t\t\t\t\t\t\t\t\t\t\t\t\tYou can <a href=\"#respond\">leave a response<\/a>, or <a href=\"http:\/\/www.ludumdare.com\/compo\/2012\/09\/08\/art-and-usability-tips\/trackback\/\" rel=\"trackback\">trackback<\/a> from your own site.\n\n\t\t\t\t\t\t\n\t\t\t\t\t<\/small>\n<\/p>","time":"September 8th, 2012 11:14 pm","title":"Art and Usability Tips"}