Excellent HTML layout and design needed for a single page

no javascript/coding reqd

Contest Holder
csmedley
Designs
14
Designers
4
Design Category
Website and App
Status
Winner(s) Selected

1st Prize
$212

Winning design by creativespoiler for Contest: Excellent HTML layout and design needed for a single page

Contest: Excellent HTML layout and design needed for a single page
Category: Website and App
Launched: Wed, 24 Jul 2013 08:37:34 +0000
Received: 14 designs from 4 designers
1st Winning Design by: creativespoiler
Closed: Wed, 31 Jul 2013 08:37:34 +0000

Start Contest Like This

Contest Designs

Creative Brief

Contest title: Excellent HTML layout and design needed for a single page
Sub title: no javascript/coding reqd
Category: Website and App
Brand Name: AstroSummaries
Summary:

Check here for latest brief.

Our Need

We need you to take our existing web page that summarises some basic educational information and make it pretty!

The web page is a summary document created by a hypothetical individual who wishes to use it to revise some basic Astronomy concepts. We want you to show us how to layout and markup the various types of content (quotes, videos, images, etc.) in a way that is very beautiful.

Description:

The summary document:

  • must be visually beautiful (this is our most important requirement!)

  • must be in HTML format

    • use of Javascript, CSS, etc is permitted

    • use of Flash is not permitted

  • must predominantly contain educational content about Astronomy

    • you may choose to use as much or as little of the example content as you like

    • you may add alternative content if it makes the overall summary more beautiful

    • don’t worry too much about the content though, we’re more interested in you showing us how we can markup & layout the content to look beautiful

  • must include at least:

    • 2 videos

    • 2 small images

    • 2 large images

    • 1 audio track

    • 2 quotes

    • 1 timeline

      • see the example content for clarification

      • the example timeline is a hack - there are probably better ways to represent a timeline in a web page

    • 2 bullet lists

    • 6 URLs

    • 6 text sections

    • 1 slideshow

    • 1 (word) definition

  • must look beautiful on iPads and laptop/desktop screens

  • does not have to be optimised for small-screen devices (i.e. smartphones)

  • should not be longer than about 10 screens when displayed on an iPad

  • should look great in at least 90% of the most commonly-used web browsers (Safari/Chrome/FireFox/IE)

    • Don’t worry about quirks in uncommon versions of some browsers that might mis-render the summary

  • must display an “AstroSummaries.com” logo near the top of the summary

    • this isn’t a real business logo so don’t worry about improving it
Additional Information:

Here is the existing web page data we need made beautiful:

http://nomoredata.com/example/

Here is a link to the design brief in a single document:

https://docs.google.com/document/d/11jha6bi8WvHnu8q3A_LNPLbGPgjUoBBNXRjrQbYfgpo/edit?usp=sharing
What I want:

Target audience

Someone who:

  • has selected unmarked-up content and wants to view it beautifully

  • loves to learn

  • wants a knowledge document to refer back to regularly

Values, feelings and messages we want the design to communicate

  • Simple

  • Beautiful

  • Personalised

Goals we want the design to achieve

  • Demonstrate in HTML a beautiful summary of information with contrasting emphasis and creative aspects

Colors we do and don’t like

  • We like aesthetically appealing color schemes that are consistent

  • Should look professional, but colourful enough to be interesting

Specific ideas and imagery we like, as a general direction or theme

  • We love Apple design

Examples of other designs we do and don’t like

  • We don’t like text-only articles

  • We don’t like documents crammed full of things - intelligent use of whitespace is important

  • We do like appropriate use of images, video, links to enrich content and make a point

  • WE do like appropriate use of emphasis to enhance memory
What I don't Want:

What We Don't Want

We don't want a full web site. This is one beautiful page with excellently laid out content and extra images and other media as appropriate in order to make it beautiful, functional and interesting.

Contest Material

Contest material, sample files and attachments for the contest uploaded by Contest Holder.

Contest Holder has not uploaded any file(s).

Discussion

Showing last 10 comments - View All

user avatar Rooni Designer
Wed, 31 Jul 2013 12:23:14 +0000

CH
The contest took so much time and we were waiting for your response daily but now when i open the contest is closed and i can't do the changes
thanks
Rooni

user avatar csmedley Contest Holder
Tue, 30 Jul 2013 19:46:31 +0000

#8 review:
SETI section is better, clearer.
Other notes as per previous reviews.

user avatar csmedley Contest Holder
Tue, 30 Jul 2013 19:45:39 +0000

@droplet: sorry no extra time. Just do your best.

user avatar csmedley Contest Holder
Tue, 30 Jul 2013 19:45:11 +0000

#7 review:
Timeline is better, is it HTML?
Is it possible to popup a larger image of, say, the hubble deep field when the user mouseovers on the thumbnail?
Is there a way to decorate the slide show?
Still good as per previous reviews.

user avatar csmedley Contest Holder
Tue, 30 Jul 2013 19:40:09 +0000

#6 review:
see review for #5

user avatar csmedley Contest Holder
Tue, 30 Jul 2013 19:39:34 +0000

#5 review:
Definition needs to be a part of the document (there may be many definitions).
Timeline is beautiful, but needs to be HTML, not a single image.
Could the author of the quote be marked up differently to the quote?
Still like the columns, and the effective use of whitespace.

user avatar creativespoiler Designer
Tue, 30 Jul 2013 11:57:50 +0000

Please Give Feedback for entry #5,#6,#,7 . Thanks

user avatar droplet Designer
Tue, 30 Jul 2013 08:25:22 +0000

@CH, please extend the contest. the time is too short to come up with the changes. thnx

user avatar csmedley Contest Holder
Mon, 29 Jul 2013 20:37:42 +0000

#4 review:
Good use of space.
Great custom bullet points.
Nice featured section (Moon Landing Facts).
Nice clean fonts.
Doesn't demonstrate enough different elements to be considered: timeline, quotes, image group etc.
Bottom looks like a web site - this is an HTML doc.

user avatar csmedley Contest Holder
Mon, 29 Jul 2013 20:35:20 +0000

#3 review:
Excellent use of whitespace.
Definition needs to a separate part of the page.
Custom bullets are great but need to be general enough to be useable for different topics (i.e. not moon)
Beautiful use of columns!
"Read More" will need to be AJAX to expand (So it doesn't require two HTML pages)
Timeline is getting there.
Quotes should stand alone as there may end up being a dozen or so sprinkled throughout the doc.

About Contest

Contest Information
Held by: csmedley
Category: Website and App
Created on: Wed, 24 Jul 2013 08:37:34 +0000
Ends on: Wed, 31 Jul 2013 08:37:34 +0000
Total designs: 14
Total designers: 4
Status: Winner(s) Selected
Prizes

Following are the prize(s) for contest Excellent HTML layout and design needed for a single page

1st Prize: $212
Contest Result
1st Winner:

Company

Support

Categories

Social