8.2.11

Nuli! Nuli! Project: Logo Conception - Asian Icons

The premise of our design solution is to incorporate a popular Chinese cultural icon with the Nuli! Nuli! text. I feel the symmetry of the repetition in the site name points to a symmetrical configuration of  the logo/text with the icon in the center.

Nuli! (icon) Nuli!

Since first considering this project I have spent a lot of time researching Chinese culture and doing rough sketches on paper. Out of the many iconic objects I discovered, I felt the objects listed below might have potential to be abstracted into silhouettes for a suitable vector image for our symmetrical logo:
Pagoda, gong, Great wall, ying –yang, Buddha, lotus, lantern, Chinese coin, fan
A silhouette of the pagoda immediately conveys CHINESE.  It’s symmetrical.  I can imagine several ways to render; a simple outline; a solid silhouette of 1 color, 2-3 colors used for each roof layer (your bright color scheme.

The lotus and lantern are also very suitable symmetrical icons, with opportunities for many graphic design techniques using your bright palette of colors.

I imagined incorporating your alternate title, N!N!  in a circular icon inspired by this Chinese coin. The duality of the N!N! could be expressed in the two halves of the ying-yang shape. N! in each half.



The wushu martial artist came up as a potential icon; It says “work hard.” I saw this photo (below) and imagined a vector of an abstract silhouette with arms stretch out to juxtapose the 2 Nuli!'s A suitable image of this complexity would be more challenging to render and take more time.

As I said the red paper cut outs really intrigued me. I have a techniques for rendering a vector image that’s a floral conglomerate similar to the nciku example (below), but it might prove quite time consuming to come up with visually satisfying arrangement and replicate a style that signifies the Chinese technique. I also imagined using a cutout (stencil) text effect --  nuli!  text cut out of red a background -- suggesting Chinese red paper cutouts
The possibilities for creating a logo are always infinite. It’s important to get the client to think about their target audience and the perceptions they wish to convey. And more importantly it’s important for the designer to facilitate communication to arrive at the most appropriate design solution. Although I may favor certain choices due to my ideas for toward rendering them it’s most important that the image fulfills clients expectation of the visual identity for the web site.

7.2.11

Nuli! Nuli! Project: Color Palette - Mobile Design Consideration


 One of the first steps for design conception was getting color preferences from the client.

Legend for color palette
flickr pink       smashing mag orange        nciku green   yahoo purple
flickr blue       twitter blue                 nckiku red paper cut            black
gradient color - minimalist background shading
 
More than likely the final design would use no more than 1- 3 colors. I will be picking from this palette for sketching ideas for graphics and text.
 
Moblie Device Considerations
The W3 Mobile Best Practices USE_OF_COLOR - states that you should make sure that information conveyed with color is also available without color.

Should use contrasting foreground and background colors means for a readable page that does not use colors for the background color and the text color that are too similar.


4.2.11

Designing for Mobile Device Usability

Image representing iPhone as depicted in Crunc...Image via CrunchBase
The Nuli Nuli website needed to display as a "full" website on monitors as well as comfortably in mobile devices, I had to research mobile device usability

3 categories mobile devices

   1. Devices with screens that have widths between 320 and 480 pixels, that support CSS, and that support screen media types and media queries. This includes the iPhone, the G1 and many Android devices.These devices will be able to support all of the optimizations we put in place.
   2. Devices that support CSS and that either support the handheld media type or support the screen media type and media queries and have screens smaller than 320px wide. We'll create separate, simplified CSS rules for these devices since their screen size will limit what they are able to display.
   3. Devices that don't support CSS.


240 x 320 (a.k.a. QVGA) should be the standard for mobile development. Use 320 pixels wide mock-up.
Lucky for me the client was only targeting the newer mobile screens, Android and iPhone, so I didn't have to contrain my design for small screen devices. 

My primary referance was the W3 Mobile Best Practices. I made notes of the items to consider for visual design such as images and stylesheets. Here are some mobile device usability considerations from various sources. 

    * The site logo should be replaced (or adapted) for each device grouping to ensure image clarity.
    * Headers should stretch to 100% of the screen width using the supplied background image where possible.
    * Content images should be no larger than 200px wide for the 'default grouping' (or 80% of the device's screen width).
    * Content images should be automatically scaled and optimized to screen width if an alternate does not exit.
    * List icons are not to be used on displays smaller than the 'default grouping' in order to make as much space available for the actual content.
    * A dynamic style sheet is to be used in order to set many values on-the-fly for each device, and cached appropriately.

most sites designed for mobile website are aligned to the left with content in  vertical stacked fluid containers  (no floats). Good examples of mobile websites:
http://mobile.fandango.com/ good example for CSS styling w/ client colors orange and green -- also like the black outline on red-orage logo
http://mobile.theonion.com/
http://home.mobile.msn.com/en-us/default.aspx
https://ssl.m.bestbuy.com/m/b/registration/signin.jsp note vertical placement of form labels
[ check bookmarks for citations] 

1.2.11

Starting for New Project: Nuli! Nuli! A web service for learning Chinese


I finally submitted my first proposal and bid on Elance. The client has already has a functional website but asked for someone to give it visual identity. The Elance provider must 1) Design a creative graphical mock-up for the website: back-and-forth exchanges with ourselves will be expected in this phase. 2) Implement the design using standard CSS

I submitted a lower bid than the lowest, based on proposal to provide style sheet with web graphic limited to simple text effect for the site name. Because of my limited portfolio, I was surprised to be chosen. The client was motivated by the Natural Solutions Hair Salon web design.

According to their Client Worksheet, Nuli! Nuli! (abbreviated N!N!) is a simple web service designed to accelerate the learning curve of Chinese characters for students of Chinese. The target audience is composed of dorks and geeks. People who are investing time, energy and money in getting
better at speaking and writing Chinese. Many of them are people who actually live in China or want to go travel, study or work there.

http://chinesepod.com/ is is the only competition listed. They are fans of the Gmail and Flickr interfaces.

The site should convey focus, calm, silence, reliability, efficiency. They desire a look and feel that's lightweight, contrasted, with smooth effects.

In the clients own words it is a lightweight web site of “one 140-character article, one 5-item menu, a couple navigation links and two unordered lists.” The client expressed the potential for evolution into something more sophisticated.

Not including the simple log-in page, the website is basically one dynamic html page with thousands of instances. But the unlimited instances these are the primary states to consider for designing.

Before Login - login fields displayed in header
After Login - user name displayed in header, login fields no longer displayed


Help link unclicked - help information not displayed
Help link clicked - help information displayed (remains displayed until page refreshed)


Dictionary Lookup and Tweet Search - results displayed below fields- new results accumulate on top of previous (remains displayed until page refreshed)

Each dynamic web page easily fits in a 1024x800 screen.





19.1.11

CBC Logo Development: 3D concept inspiration

Related Posts with Thumbnails