ASU Applied Project: Refined Comp and Testing

Here’s is a update to the interactive application portion of my ASU applied project. I’ve code named it RGB123, because I’m a nerd lol.

First Test: http://asteriskloftis.com/gitasu/appliedproject/test01.html  – the purpose of this test was to get something on a website to use the WebGL and  Canvas.

Second Test: http://asteriskloftis.com/gitasu/appliedproject/test02Planes.html – this tests goal was to make some dynamic 3D planes randomly on screen and make a simple camera movement that could be used in further testing.

Third Test/Comp : http://asteriskloftis.com/gitasu/appliedproject/test03Comp.html – this test dealt with the randomization of colors and began adding UI elements from the designed comps. All elements utilized responsive design.

So far so good, I am really enjoying Three JS and will finalize the design while adding actual functionality to the next phase of iterations.

 

ASU Applied Project: Application Requirements

The list below is a simple write up of the functionality that I will be developing into my applied project web-based application. There are also some extra features listed as well that I will try to implement if I have time. This list is mostly derived from the results of a survey I prepared last month.

1)    Device detection:

i)        Detect screen size for scale-ability.

ii)       Detect if tablet are horizontal or vertical.

2)    Customized Feedback Error Handling:

i)        Custom error pages/messages for older browsers.

ii)       Customized error/feedback messages that describe actions a user can complete to overcome problem/error.

iii)     Loading animation to show loading progress.

3)    Application compatible with touch devices:

i)        No hover states for menu and items.

ii)       Utilize touch actions (pinch and zoom etc.) when touch enable device is detected.

4)    Design and Aesthetic:

i)        Flat design will be utilized. Examples and more examples.

ii)       Font will be sans serif to provide a new and fresh look.

5)    Must-Have Application Features:

i)        Users can explore colors in a 2D gallery of swatches or change to a 3D view that mirrors a RGB color cube. The 3D feature is probably the paramount feature of this project!

ii)       Color builds displayed in RGB, Hex, and HSV/HSL.

iii)     5 or more colors can be picked and added to a custom palette.

iv)    Custom palette can be exported/save in HTML/CSS format for future use.

v)     Color slider and text input interface to choose color.

6)    Nice-to-Have Application Features:

i)        Implementation of color rules (Analogous, Monochromatic etc).

ii)       Color wheel to choose color.

iii)     Eye dropper capability.

iv)    Additional option to explore colors in 3D HSL cylindrical model.

v)     Ability to export color data into Adobe acceptable file format (ASE).

Survey Data

All data collection for my surveys has come to an end and I am pleased with my results. I received 46 unique digital designer responses and completed 3 interviews with seasoned digital designers.

From this data I learned/affirmed a few important things:

  • The devices I should target are desktop PC, Laptop, and Tablet.
  • Adobe Programs and Adobe Kuler should be referenced and emulated when possible because most designers are used to it.
  • Most digital designers prefer either a myriad of 2D swatches or a 3D color cube.

Click on the thumbnails below to see full sized survey question results in the form of charts.

Q1Column

Q2Pie

Q3Pie

Q4Pie

Q5Pie

Q6Column

Q7Pie