Bootstrap design

Status: Closed
Pris: $400
Bidrag mottagna: 8
Vinnare: bahrul221

Winner

Tävlingssammandrag

I have a design from another freelancer I want to convert from drawings to responsive bootstrap. The designs 4 pages is attached, I have also included the image of the mobile version of it. Please look mostly at design.jpg, as it has sligthly more correct colors on icons. By using responsive bootstrap v3, mobile should be supported.

This task is mainly to convert the drawing into 4 bootstrap-html pages with example data.

The header and footer of the page, along with the left sensor-list, should be the same on all pages. Use standard bootstrap code.

IMPORTANT: In two out of maybe 30 projects I have done here this year, the coder has made a bootstrap design in css that is not responsive and hard-coded positions using css instead of using the advantages that responsive bootstrap gives. It kind of works, but it's a nigthmare to maintain. An example of what bootstrap I like, see stemfrem.no for instance. Simple, clean.

Contest rules:
- Post any improvements you would suggest. Note that I'm 90% happy with the current design. I could probably live with it like it is.
- Mention any suggestion or advantages you have on doing this project.
- If you implement a live example of one page I can see, for instance a datatable with refresh, it will be a big advantage so that I know you can do it.
- Improvements in logo is welcome.

If you are awarded, you must follow these rules:
- Deliver ready response bootstrap using datatables in both the left column sensor list and in latest values. 4 pages as attached. Before the handover-limit.

- You can use example data to show that filtering (search) is working in the left sensor list. I prefer if you can use backend-ajax to update it at given intervalls. This can be call to a backend-PHP file (you can use example data in a php-file).

- Implement the main graph so that I can easly update the values. Please note that I don't know javascript/jquery, only html/php, so it must be easy implementable. The graph measures load time in ms and something it will be "0" if the ping/website doesn't respond. I was originally thinking google graph since I have found it easy to user, but the designer suggest the one shown in image.

- Icons should be from font-awesome pack in bootstrap.

- The list of sensors should have a label/badge to the left (of equal width) and the name of the sensor should be clickable (link).

- Same header/fotoer/left sensorlist should be present on all pages. So that should ease the graphics -> html-part.

Rekommenderade kompetenser

Winner

Lägg upp en liknande tävling

Arbetsgivares feedback

“Did an amazing job on my bootstrap contest. Highly reccomended!”

DeltaUser, Norway.

Klargörandetavla

Tävlingsinnehavare
- 7 år sedan
You all have very similar layout, but I feel that user bahrul221 currently has the best entry - based on his live demo and technical advice. So unless something totally unexpected appears, I will go for his design. I'm just saying this to warn users from using to mutch time before they submit example.
- 7 år sedan
SherryMalik786
- 7 år sedan
Please Wait for my entry
- 7 år sedan
Tävlingsinnehavare
- 7 år sedan
A bit rounder content-area would also look better, instead of sharp 90% corders around both the graph and the datable below. Use the same background behind both items.
- 7 år sedan
Tävlingsinnehavare
- 7 år sedan
Both moonmohon and cristisatcovschi have a good design that is close to my drawing. With some minor adjustments, I could probably have used both. The only thing missing is a bit attention to details/colors regarding font-usage (black vs. dark grey) and to make sure text/font's aren't to big. Since there are so little content, the details/spacing/font is really, really important.
- 7 år sedan
1. Tävlingsinnehavare
  - 7 år sedan
  Choice of font is also important: Some kind of smooth Google-font, not completely black and more against grey for the most part. Small change in a hoover on links, but nothing big.
  - 7 år sedan
Tävlingsinnehavare
- 7 år sedan
Also, what I feel maybe is missing (but still better in the design/drawing) is how to connect two boxes of white to eachother. I normally don't like to have three seperated boxes: There is one for the left column (sensorlist). That is a must. There is one for the main area, the graph. I feel the datatable under it, in a third box (with white background) isn't connected to the main area (the graph). Maybe a design with a common color/area behind the table and the graph would make it look more "connected" and not bit and pieces.
- 7 år sedan