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.