Concours terminé

Cognation Consulting Company web design - hyper realistic / glossy 2.0

Dean @ Cognation avait besoin d'un nouveau design de page web et a lancé un concours sur 99designs.

Un gagnant a été sélectionné de 22 designs proposés par 10 designers freelance.

22
participations
10
designer graphistes
1
gagnant

Voici comment Dean @ Cognation a commencé son expérience web page design

Récapitulatif

I need a very basic but specific website built for my consulting company.

Must be done in CSS with ability for me to post edit/expand at a later date (eg clear css documentation).

I dont care if it is a template or you have sold the design to 100 other people I just need it to meet my very specific guidelines.

This is more an 'artistic' challenge than a coding challenge but I have a few 'tricky' optional elements I'd like to see though not 'essential' to the submission.

Although I've fixed the price at $250 I've overpaid bonuses in the past

Qu'est-ce qui vous inspire et comment imaginez-vous le design de votre entreprise?

Desired Color Scheme:
Blue markings-icons etc, White sheet with Black text, silver backing gradient

Desired Style:
web 2.0 glossy icons, silver background gradients, rounded corners

Accepted File Formats:
CSS and images / icons in Layered Formats (.psd or .tiff)

I want to keep my existing single logo on a white landing page (see it at http://www.cognation.net) but the simple 4 page site I want built in CSS is to sit behind this. (though I may  change this to the logo on the silver gradient depending on the effect - see below)

I have loaded a box layout guideline at http://www.cognation.net/webdesign gives you a good idea as I cant upload the picture here.

My desired design is really simple - to have a hyper realistic looking single white 'sheet' that appears to be sitting/floating on silver web 2.0 gradient that tapers off to a little over half height (eg appears to be on a physical plane). (soemthing like this link http://99designs.com/contests/5766/…es/374221 deisgner is fantastic)

Basically the optimum size is 1280x1024 and as you can see in the box layout most of the margins will be fixed with only the body content being variable (though I want left/right and nav tabs post installation modifiable so if I want to make them smaller/bigger I can).

With a top and bottom margin of 20% it will appear to 'float' or rest on the gradient (your artistic choice here) to allow for larger screen resolutions the gradient will have horizontal repeat -  NOTE Optional requirement - would like to have the ability to turn on or off a glossy reflection for the bottom appearing on the silver gradient. i've also seen a script that allowed for the 'amount' of relection so would like to see this incorporated if possible - though again totally optional.

With the body content squeezing in or out depending on screen resolution I would like to be able to control minimum amount of size - as at ideal ratios it's going to be 55% but no less than 40% for smaller screen res.
Once it gets lower than this res the body content should just extend out lower.

On the right hand side of the content i'd like some really subtle scroll bars. You might want to have a connecting line between the top and bottom that has a 'control box' eg something that shows how far down the content you have scrolled or possibly not - totally your artistic choice here. Basically it is just going to scroll the body content exactly where it is eg the top will move up and dissapear under the logo and the bottom text will appear from 'under' the border.
      (if this description isn't clear enough let me now)

I think I want rounded corners on the 'sheet' though may change my mind - it's up to your artistic choice here.

I'd like to have my logo at the top of each page but a smaller version of it than used on the landing page. And possibly just the company name instead of the tag line.

I've included my logo in the media page at http://www.cognation.net/webdesign you can resize, change it etc. A few people have commented they want to modify the log slightly you - can add gloss/jazz it up etc if you want but this isn't a seperate competition, just resizing it is fine as long as the concept of the white light coming out of the box isn't changed.

Also possible for you to move it to the top left as indicated in the dotted lines above the nav tabs - your artistic choice. If doing this I assume body content will be raised but flexible here.

The Nav tabs are to be hyper glossy blue black with white type. try and stay with the existing colours on the site as I have business cards/shirts etc and would prefer not to vary from these too much.

I'm not sure I need these in a seperate box just stacking them on top of each other should be sufficient to delineate the area - likewise with the body.

Nav icons for each page I need included are;
Home - this isn't the landing page but page 1 as on my current website
Profile
PGP
Contact
I also require the following nav icons that are used on other pages elsewhere on the site;
Up
Press
Blog
I need the photoshop files to make additional icons when I need to add other pages in the future.

There are no secondary nav tabs etc or anything like that and each page just opens a new body content section with the rest of the framework staying exactly the same.

Note Optional requirement - I've seen a number of scripts where the body content changes from page to page with a scrolling/jumping motion in a vertical movement and I'd like to incorporate this as long as I can control the speed it transitions.
In addition I also saw (and no i cant remember where i saw this) a similar framework where when you clicked a new page the body content section appeared to 'flip' horizontally so this is an option. it looked really effective almost 3d like.

 As stated these are optional and the winner will be selected more on artistic quality and clear css documentation so i can make changes etc in the future.

Note all 4 pages look pretty much the same. the only concern I have is there are a lot of hyperlinks out on the web that link to just

http://www.cognation.net/profile
or
http://www.cognation.net/contact

As this is my first CSS website my question is will these links still resolve correctly? with frontpage I just build a new html page in a seperate folder www.cognation.net/profile/index.html so http://www.cognation.net/profile resolves fine.
As this is a major issue when setting up the css framework make sure these still work correctly and for any other pages I'm going to copy at a later date (eg http://www.cognation.net/asterisk )

Also please check the media page for existing favicon details and incorporate these into your css.

The contest is 10 days so hopefully someone has the majority of this already in place and it's just modifying colours/buttons etc. Delivering early is better than later so I can give feedback asap.

You dont need to worry about importing content into the 'body content' section as I'm going to be editing some of the text but you can get an idea on the layout etc (eg checkout http://www.cognation.net/profile) and I'm pretty much going to keep it the same. 

Good luck and feel free to post questions or suggestion links to comparison design ideas.

Pack personnalisé

250 $US

Mises en avant gratuites

  • Concours ouvert
  • Concours rapide

Produits livrables

PSD
PDF
PNG
JPG

Nous avons trouvé des concours similaires qui pourraient vous intéresser

3 299 $AU
We are a deals website which focuses on family activities. Think Groupon for family with kids...
design réalisé par j u s t e design réalisé par set4net design réalisé par Mithum
45
entries
12
designer graphistes
599 $US
Private label skin care and beauty products manufacturing. Our target audience is online and storefront retail busine...
design réalisé par WEBGATEWAY design réalisé par WEBGATEWAY design réalisé par Jasmin_VA
106
entries
38
designer graphistes
1 916 €
I am an international business lawyer based in Switzerland and Monaco. I advise individual and companies for their pr...
design réalisé par George Will design réalisé par Tommi K design réalisé par Tommi K
102
entries
38
designer graphistes
549 €
We design and deliver IoT solutions to customers in industry and retail.
design réalisé par Hamdi Rizal design réalisé par Hamdi Rizal design réalisé par CreativeBerry
37
entries
13
designer graphistes
789 $AU
My client owns a cost reduction analysis company that performs this service for medium to large companies. Cost reduc...
design réalisé par Jasmin_VA design réalisé par Perfectionist. design réalisé par Perfectionist.
46
entries
14
designer graphistes
1 204 £GB
Online casino...
design réalisé par Fenixo design réalisé par lakshmi.tammisetti99 design réalisé par lakshmi.tammisetti99
146
entries
38
designer graphistes

Nous avons gardé une place pour votre concours deweb page design.

C'est parti!
1 749 $US
design réalisé par joanasm design réalisé par andy.g design réalisé par joanasm
122
entries
36
designer graphistes
2 199 $US
Products for quantitative portfolio managers, optimize portfolios, manage risk and advance re-balancing.
design réalisé par Anton Siribaddana design réalisé par Anton Siribaddana design réalisé par Anton Siribaddana
141
entries
26
designer graphistes
1 199 $AU
My Watt Power enables cyclists to compare their power output to other cyclists.
design réalisé par lards design réalisé par George Will design réalisé par lards
49
entries
21
designer graphistes
1 400 $US
QckShot is targeting anyone that wants to create highlights for a youtube video but primarily gamers....
design réalisé par JVM design réalisé par JVM design réalisé par MercClass
103
entries
15
designer graphistes
1 049 $US
TNY is an app publishing company. Our target is apps and app developers for the mobile market....
design réalisé par simplest™ design réalisé par simplest™ design réalisé par simplest™
192
entries
12
designer graphistes
749 $US
I sell outdoor gear online. Products for hiking, camping, kayaking, climbing and exploring. Targeting all people be...
design réalisé par Dezinex15 design réalisé par A7DStudio design réalisé par create4life
42
entries
17
designer graphistes