For game to work, download index.html, styles.css and designs.js. Additional images may need to be downloaded (called in index.html) for branding/app experience to be complete.
Select a grid size, then, 'paint' the pixel canvas given to you in either suggested colors or via color picker. Make pixel art! Want to redo? Click 'Make Grid' button again.
- Student submisstion for Udacity's Front End Web Development
- Demo Game
Project Goal: to build the basic required app functionality of Pixel Art Maker, and include improved UX/UI.
Basic required app functionality: Use javaScript to allow user to create a grid of squares that can be filled by user selected colors.
Additional app functionality: give the user a creative Pixel Art Maker brand experience that is fun, visually stimulating, colorful, with delightful UX/UI. This will be achieved by
- branding type and logo using a sophisticated, modern, universal font type (Lato chosen over Roboto)
- arranging the UI into 2 panels, 1. the canvas and 2. the console.
- giving the user the option of having the console either on the left or right side depending on their left-right handedness workflow preference (great for Wacom UI)
- clearly dilineate areas of the of UI: for the canvas, the grid is colored in non-overpowering light gray, so the pixels themselves will stand out. for the console, dilineate into sections according to purpose - selecting dimensions and selecting colors is clearly sectionalized in the console.
- create effects that hint to the user that an element is a clickable "call-to-action" element via app intrinsic/branded hover effect (they all turn or are bordered by a specific yellow when a button is in focus for example)
- design the app to be fluid and responsive (though admittedly app is still most optimized for 1020px width screen)
- giving the user multiple ways of choosing color other than the color picker by adding a "quick swatch" functionality using jQuery. Via the quick swatch, a user has at their disposal pre-selected Adobe Kuler optimized set of color swatches that they can pick from. These colors were selected for their versatility, while giving the user art that is vibrant, hinting at vintage/retro mid-century colors and FUN!