How Ryan564 started their web page design journey

Summary

WebNotes.net is a soon-to-launch web startup offering tools to help annotate, organize, and share online content. We are updating our site’s design (which was originally conceived on 99designs!) in preparation for a major launch, and would like to (1) polish up our general site template, and (2) create a new landing page template. See our brief for detailed guidelines.

We will be VERY RESPONSIVE to questions/feedback from designers!

Note: We are currently running a second contest on 99designs to update our site’s homepage -- see http://99designs.com/contests/20113. The total prize for these two contests is $1,000.

**UPDATE**: We have extended this contest in order to give designers a bit more time to submit their entries.

Company name

WebNotes

What inspires you and how do you envision the design for your business?

General notes: - At a high level, our goal is to polish up our designs to make our company’s image a bit more professional. Some words that best describe the look we are going for: “professional”, “high-end”, “innovative”, “clean” and “polished”. - For our site template design, we have attached two mockups. One is a dummy page illustrating the various types of controls we would like designs for (e.g. headings, side boxes, titles, etc.). The other is our current “Support and Feedback” page, which illustrates a single control that needs redesign: the gray rectangular box containing our support form. - For our landing page template design, we have attached a wireframe showing the desired layout. This layout is approximate, so feel free to be creative and take liberties as you see fit. Mockups: - http://www.webnotes.net/images/99d/…mockup.png - http://www.webnotes.net/images/99d/…xample.png - http://www.webnotes.net/images/99d/…eframe.png Deliverables: - We would like the dummy page redesigned to show off a new template for the inner pages on our site (see guidelines below). - On the “support and feedback” page, we ONLY want to see a new container design to replace the gray rectangular box containing the support form. All other parts of this page DO NOT require any redesign (we’ll do that ourselves based on the dummy page redesign). - We would like to see a fully designed version of the landing page template. Site template notes: - Header and navigation bar: We like how these look, but are open to improvements (e.g. shading, color scheme, etc.). Since these contribute greatly to the overall look and feel of the site (which we want to make less “Web 2.0” and more towards “professional”), we want these to be very polished if any changes are made. - We would like to redesign the following components of our site template: - Yellow box containing the page title. We’re not crazy about its current look, and are very open to new ideas. - Inner page background (gray): We think that the gray background (#F5F5F5) is not ideal. We would prefer to try a white background instead. - Blue section headings (e.g. “Heading 1”) and black sub-headings (e.g. “Subheading 1”): These are not particularly inspiring! We are definitely open to new ideas (just make sure that fonts are web-safe). - Right-hand side boxes (for lack of better words): We want these to be completely redesigned! We’d love to have something that looks a lot more clean, and can be used to contain either small or large amounts of content (i.e. something that will look good whether its 100px tall or 600px tall). Note that these don’t actually need to be boxes – some kind of vertical divider might do the trick too. - Red side box: This type of panel would be used to contain an important call to action. We would like the entire box to be one large button that users can click on to perform some kind of action (sorry to be a bit vague about this). This type of side box should be noticeably different than the other types below. - Middle side box: This type of panel would be used to contain supplemental information about the current page, and needs to contain one or more headings as well as blocks of text. - “Related page” side box: This type of panel would be used to link to similar pages. - Large gray rectangular box on “support and feedback” page: We tend to use this type of box to improve the appearance of forms inside our pages, but don’t necessarily have a rhyme or reason beyond that. Like the right-hand side boxes, we’d like something that is clean and robust. Note that we probably won’t use these boxes on all our pages – just the ones that contain forms of some kind. Landing page template notes: - The attached wireframe is just a starting point, so feel free to be creative and take liberties as you see fit. - The main goal of the landing pages will be to get users to click on the “Sign Up” button. - Landing pages probably shouldn’t follow the exact same format as the generic page template above (e.g. landing pages may have a very different looking title heading), though they shouldn’t clash with it either. - The gray boxes are placeholders for screenshots or other images – make sure to specify how these might be presented (e.g. border, drop shadow, perspective warp, etc.). - We’d like to keep the landing pages fairly clean, with a good amount of emphasis on white space and typesetting. Note: If we need to display the headings as images in order to use non-standard fonts, styles, etc., that’s okay.