Design a new website landing page for BRL-CAD #6BRL-CAD
Status: ClosedTime to complete: 100 hrs Mentors: Kesha Shah, IshwerdasTags: web, javascript, js, html, design, cssBeginner

The website of BRL-CAD is undergoing significant changes. We have a design mockup at http://cpp-tricks.com/brlcad/ and http://beta.brlcad.org but there are various aspects that we know could use improvement. One of those is the main page that will be presented when someone goes to http://brlcad.org

This style guide can be use for consistency or you can try to impress us with something different: http://www.google-melange.com/gci/work/download/google/gci2013/5844328496758784?id=5649050225344512

Redesign the front page of our web site. The only requirement is to adhere to a consistent visual style and make it impressive. Be creative. The output should be 2 design files, one for large screen, and one for small screens (e.g., mobile). The format can be images or html/css/javascript mockup.

Submit your design in whatever raw editable format you used along with a screenshot in png format. Also submit a brief write-up (this can be a txt file upload or detailed in a comment) telling us why is it an improvement over existing design.

References:
  • Existing/old site design: http://brlcad.org
  • Updated/proposed new site: http://cpp-tricks.com/brlcad/ and http://beta.brlcad.org
Uploaded Work
File name/URLFile sizeDate submitted
Improved Design.rar3.4 MBDecember 09 2014 14:33 UTC
Comments
Akshat Tripathion December 5 2014 14:27 UTCTask Claimed

I would like to work on this task.

Deepak on December 5 2014 14:30 UTCTask Assigned

This task has been assigned to Akshat Tripathi. You have 100 hours to complete this task, good luck!

Akshat Tripathion December 7 2014 07:54 UTCQuery Regarding The Design

I had a few clarifications:


1) Do also require the functionality of the website (the login and the signup)?


2) You need only the front pages, yes? No other pages?


3) I'm supposed to submit 5 files: the mobile design's screenshot (along with the actual .html file), the large screen design's screenshot (along with the actual .html file) and a text document describing why the design is better than the last one-- am I correct?


Thanks.

Ishwerdas on December 7 2014 08:11 UTC

You do not require to have any functionality, we just need design. Forms can be there (which I would suggest to avoid on first page) but they need not to work.

Yes, just the front page.

You can either submit images for 3 form factors (mobile, tablet and desktop) or you can submit one responsive  design using Html, JS and CSS files. 

Akshat Tripathion December 7 2014 08:13 UTC

All right, thanks, and no actual '.html' file is required?

Ishwerdas on December 7 2014 08:17 UTC

You have a choice between following

a) submit different images for different form factors


or


 


b) submit html files for a responsive design

Akshat Tripathion December 7 2014 08:19 UTC

All right, thanks.

Akshat Tripathion December 7 2014 19:11 UTCOne Last Query

Is it a compulsion that I make another design or I should be fine with the proposed design as well?

Ishwerdas on December 8 2014 06:02 UTC

You have to improve over it. Make the proposed design better.

Akshat Tripathion December 8 2014 06:27 UTC

So I'm allowed to use the current source code and improve on it as well, yes?


Thanks for your response.

Ishwerdas on December 8 2014 06:28 UTC

Yes, that would be ideal! 

Akshat Tripathion December 8 2014 06:41 UTC

Okay...


Though, I seem to be having a problem: when I downloaded the website on my computer and then resized it (to get the mobile version), I actually am getting two menu bars on the top, any idea why?


http://postimg.com/image/181000/capture-180149.jpg

Ishwerdas on December 8 2014 06:49 UTC

It seems you haven't downloaded it correctly and some files are missing. If using chrome, then make sure while saving you have "webpage complete" selected. 

Akshat Tripathion December 8 2014 06:54 UTC

I did save it as "webpage complete" still I get the same error.

Akshat Tripathion December 8 2014 06:55 UTC

I have 12 items downloaded in the folder (which is mostly images, 2 '.js' files and  CSS file) and one '.html' file.

Ishwerdas on December 8 2014 07:10 UTC

Just wait for few minutes and I'll get you the actual code hosted in a zip file. 

Akshat Tripathion December 8 2014 07:11 UTC

All right, thanks ton. 

Ishwerdas on December 8 2014 07:18 UTC

http://cpp-tricks.com/brlcad.zip is the zipped code.

Akshat Tripathion December 8 2014 07:26 UTC

Okay, I downloaded the file and when I extract it, I get a file 'brlcad' and its file type is 'File'. How do I get the source from this?

Mihai Neacsu on December 8 2014 07:44 UTC

I think you did not extract it the right way. 


Added the files on Dropbox, maybe you can get them this way. https://www.dropbox.com/sh/ob1j95q8rrnfjaz/AACE1KOrBH3U2mLbWIOVnc5Ra?dl=0#

Akshat Tripathion December 8 2014 08:13 UTC

Okay, now I got it, thanks for taking out the time to get me the source.

Akshat Tripathion December 8 2014 16:58 UTC

Okay, again a problem, when I zoom in, the tinynav plugin is not working and rather than seeing a drop-down menu, I get a black bar!

Melange on December 8 2014 18:30 UTCTask due soon

There are less than 24 hours left until the deadline, please submit your work soon.

Akshat Tripathion December 9 2014 06:06 UTC

Found the bug, wasn't able to properly load jQuery, got the correct link now.

Akshat Tripathion December 9 2014 14:34 UTCReady for review

The work on this task is ready to be reviewed.

Akshat Tripathion December 9 2014 14:39 UTCWhy It Is An Improvement


  • When viewed in the mobile version, the drop down menu appeared too mechanical. That has been fixed.

  • When hovered over the button, the color change was not too apparent to be noticed. That has been fixed.

  • When the user gets to the bottom of the page, a button has been added to allow him/her to go to the top again.

  • The form from the main page has been removed.

  • There is a login option, instead, in the top menu bar for logging in.

  • The main background of the 'welcome' div looked a bit dull, replaced that with an attractive image to make the purpose of the website more apparent.

  • Reduced the amount of text in the 'Powerful' section at it appeared too cluttered in the main page.

  • Finally, added distinct colors in the content sections to make the users properly distinguish them.

Ch3ck on December 9 2014 15:48 UTClooks good

will leave this for the mentors to approve

Melange on December 9 2014 18:30 UTCNo more Work can be submitted

Melange has detected that the deadline has passed and no more work can be submitted. The submitted work should be reviewed.

Sean on December 10 2014 05:00 UTCTask Closed

Congratulations, this task has been completed successfully.

Sean on December 10 2014 05:04 UTCoutstanding work

Outstanding attention to detail, Akshat.  Thank you for your efforts and especially for the details on the improvements you made.  Our website is an active point of attention for us right now as we're setting up a completely redesigned site.  Your landing page gives us a lot to think about and a design we can work with.  Thank you again!

Akshat Tripathion December 10 2014 09:43 UTC

It was my pleasure, sir, thanks for the project! :)

Akshat Tripathion December 10 2014 09:44 UTC

One last suggestion I wanted to make: there is no logo in the title bar, changing that may make the UX a little bit better.