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
| File name/URL | File size | Date submitted | |
|---|---|---|---|
| BRL-CAD Landing Page.zip | 1.2 MB | December 05 2014 16:26 UTC | |
| http://i.imgur.com/A3O3YLV.jpg | n/a | December 05 2014 16:40 UTC | |
| version2.rar | 1.2 MB | December 05 2014 17:57 UTC |
I would like to work on this task.
This task has been assigned to Marc Tannous. You have 96 hours to complete this task, good luck!
My design style is minimalist, simple and flat. I find it beautiful, and this is how all my designs are done. The color scheme for this project consists of the two colors off the BRL-CAD logo, the black and the pink. Your first observation of this landing page is that the logo is not positioned anywhere and that there is no navigation bar :
1) The logo ( Or in this case, the missing logo )
I preferred keeping literally everything as simple as possible. I thought about possible places for introducing the logo, but anywhere I'd add it it would just take away the entire beauty of the page : its simplicity. In my country we call these "ghost pages", pages where there is a maximum of 1-2 graphical elements per page and the focus of the user navigating it is placed on the text. It HEAVILY adds to the page's responsiveness and to its UX. Basically, I am taking the user's attention and directing it at the text.
2) The no navigation bar "issue"
But every website has a navigation bar, right? Well, that's one way to put it. Navigation bars came around when people asked for "quick navigation". This was heavily implemented in huge web pages, as you had to go through 3 pages of buttons before finally getting to your intended URL, but small websites borrowed this technique and added it. I find no purpose in adding a navigation bar if the user can navigate through my design in 1 second and get to the place he initially wanted. It does not look like a basic web page, and this makes it special, in my opinion. All the links could be added under the "reasons" column I set up on the landing page.
3) The full screen vertices+segment effect
This is my favorite part of the web page, and will probably also be yours. It fits the purpose of the web site, it's lightweight in terms of code and introduces a new technology I've been dying to implement in one of my designs ( the html 5 canvas element ).
This is the graphic element I centered the page around, looks really good in my opinion and modern. I love it.
4) "Add a gallery or some testimonials or etc."
I'd rather not. The main purpose of the landing page is informing the user of WHAT he's looking at. I am not assaulting him with a catastrophic amount of knowledge, I'm giving him 2-3 lines of text and the option of looking into each of these in detail. He can navigate the web page and he understands what it's about, so I fulfilled my role.
5) Why is there only one HTML document?
You requested two documents, one for desktop view and one for mobile view. I did it all responsive, tested it on my phone, 1920x1080 screen and 1360x1024 screen. Works perfectly, loads quickly and does not have any bugs. I really like it, hope you do too.
The work on this task is ready to be reviewed.
Congratulations, this task has been completed successfully.