1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Contest $250 Design for a Dashboard Mockup. Guaranteed winner by Monday

Discussion in 'Design Contests' started by DustinOverbeck, Sep 18, 2016.

  1. #1
    This is a project for the design of a new and custom Dashboard for the WordPress Admin area. It is just one page in size based on the attached Wireframe Mockup. The goal is to make this dashboard appear very elegant and professional. Make it look like a design that would be a Featured App in the iTunes store :)

    I will choose a winner by Monday, September 26 at the latest. Winning bidder will receive $250.

    Payment will be sent by PayPal. If I really love a particular design, I will end the contest early and send payment right away.

    The winning bidder would need to send a file in a layered format (e.g. PSD, AI, and EPS)

    Attached is a PNG of the Wireframe mockup for the design that we want to look professional and elegant:
    https://www.dropbox.com/s/r4px64em8nzfmbr/Admin Dashboard for Town Web.png?dl=0

    Project Constraints & Ideas:
    • 1600x1200 maximum resolution
    • It will not be a scrolling website, so everything needs to fit on the screen
    • Use fonts with 15 pixels or higher sizes for readability
    • Use the same text used in the wireframe mockup
    • Use the card design for the different elements, but do not feel that they should all be same size and dimensions. It is better if the card designs are different sizes, sort of like Pinterest.com.
    • The card designs should not all look equal in style or in size. Some are more important than others. The most important ones are: "Quick Links" and "Requires Your Attention"
    • Please do not submit examples that show the design at an angle.
    • Please do not submit examples that show the design with a border
    • Only submit examples that are viewed straight on
    • Please do not DM your entries. You should post them in the forum.
    • If anybody posts a quality of work that is not does not follow the rules of this contest, I will kindly ask that you not keep posting, since this takes away focus from other designers who put in greater effort.
    Color Design Suggestions:
    Consideration should be to use the branding colors in the design as accent colors.

    Download branding guidebook here:
    https://www.dropbox.com/s/hr2alejrb6mhy15/TOWNWEB_BRANDBOOK.pdf?dl=0

    Attached is are various copies of our logo:
    https://www.dropbox.com/sh/du32kl6a684hnmf/AAA3-iMjqs73pBq3pxbLapDCa?dl=0

    Google Material Design standards should be used as a guideline for optimal UI/UX:
    https://material.google.com/

    UI Kit
    We will be using this UI Kit here as the base style guideline for the UI:
    http://market.designmodo.com/module-01/

    If you're serious about working on this project, send me a DM with a link to your portfolio and I'll grant access to the UI Kit. The link will only be shared with those who already have UI samples in their portfolio.

    If you have any questions, please do not hesitate to post.

    Good luck to everybody!
     
    DustinOverbeck, Sep 18, 2016 IP
  2. Miheiz

    Miheiz Greenhorn

    Messages:
    21
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    13
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #2
    Working on it. Folio: https://dribbble.com/miheiz
     
    Miheiz, Sep 19, 2016 IP
  3. Louis Philippe Facun

    Louis Philippe Facun Active Member

    Messages:
    90
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    68
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #3
    Epic designs mate!
     
    Louis Philippe Facun, Sep 19, 2016 IP
  4. Miheiz

    Miheiz Greenhorn

    Messages:
    21
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    13
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #4
    Thank you so much my friend. :)
     
    Miheiz, Sep 19, 2016 IP
  5. Miheiz

    Miheiz Greenhorn

    Messages:
    21
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    13
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #5
    Hey,
    Look at this. Good the way?

    [​IMG]

    Kind regards
     
    Last edited: Sep 20, 2016
    Miheiz, Sep 20, 2016 IP
  6. DustinOverbeck

    DustinOverbeck Active Member

    Messages:
    170
    Likes Received:
    34
    Best Answers:
    0
    Trophy Points:
    78
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #6
    @Miheiz:

    Hi, are you using the UI Kit? That should be the baseline for the elements.

    The dashboard tab color you used is blue and the notifications color you used is green. Those elements should follow the accent colors (or shades of them) based in the design guidelines from the branding booklet here: https://www.dropbox.com/s/hr2alejrb6mhy15/TOWNWEB_BRANDBOOK.pdf?dl=0

    If you have specific questions, please post them here and I'll try to answer them as quickly as possible.
    Thanks!

     
    DustinOverbeck, Sep 20, 2016 IP
  7. Miheiz

    Miheiz Greenhorn

    Messages:
    21
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    13
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #7
    @DustinOverbeck, thanks for your reply.

    Sure. I'm using UI Kit as much as possible. Each interface needs additional colors for selected/active elements and others. Do you know about it? We can't use only brand colors. It's not a website, it's an app.
    However I will provide some small changes.

    Kind regards.

    PS: If you want I can prepare special version with only brand colors.

     
    Last edited: Sep 20, 2016
    Miheiz, Sep 20, 2016 IP
  8. DustinOverbeck

    DustinOverbeck Active Member

    Messages:
    170
    Likes Received:
    34
    Best Answers:
    0
    Trophy Points:
    78
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #8
    @Mheiz
    You're definitely on the right track. What I'd like to clarify is that the design should looks branded. So if the colors are the red/gray/off-white, it should be possible to use these colors (or darker/lighter shades of them) for the various elements, such as highlights, mouse-overs, background overlays, etc.

    If you start adding blue and green to the mix, then it might appear too busy looking from a color standpoint.

    So although you should not only want to use red/gray/off-white, you should use shades of them.. :) Hopefully this helps!

    Also, you do not have to make the layout exactly even. Some element/boxes can be taller (like in Pinterest). The wireframe just shows them as the same size/dimensions.

     
    DustinOverbeck, Sep 20, 2016 IP
  9. outwork69

    outwork69 Well-Known Member

    Messages:
    232
    Likes Received:
    72
    Best Answers:
    0
    Trophy Points:
    150
    Digital Goods:
    1
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #9
    Hi. I have tried to follow the UI kit as much as possible while I have tried to respect your branding.

    [​IMG]


    Colored visitors widget:
    [​IMG]
     
    outwork69, Sep 20, 2016 IP
  10. outwork69

    outwork69 Well-Known Member

    Messages:
    232
    Likes Received:
    72
    Best Answers:
    0
    Trophy Points:
    150
    Digital Goods:
    1
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #10
    I have created a third version with your brand colors in the header section:

    [​IMG]
     
    outwork69, Sep 20, 2016 IP
  11. DustinOverbeck

    DustinOverbeck Active Member

    Messages:
    170
    Likes Received:
    34
    Best Answers:
    0
    Trophy Points:
    78
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #11
    @outwork69
    This is in the right direction. Here are some suggestions for you and @Miheiz :

    Try experimenting where most of the cards are white. In some instances, maybe use a branded & colored background for a card...perhaps something like this (http://i.stack.imgur.com/u8zst.jpg).

    Here are some stock photos from a client shoot that you could experiment to add some relevant design to the dashboard:
    https://www.dropbox.com/sh/3g5nqnyc6eei34u/AADNM8LWg1tFlXrSJKXsutuga?dl=0

     
    DustinOverbeck, Sep 20, 2016 IP
  12. outwork69

    outwork69 Well-Known Member

    Messages:
    232
    Likes Received:
    72
    Best Answers:
    0
    Trophy Points:
    150
    Digital Goods:
    1
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #12
    Great. Can you tell me which version do you like the most?
     
    outwork69, Sep 20, 2016 IP
  13. DustinOverbeck

    DustinOverbeck Active Member

    Messages:
    170
    Likes Received:
    34
    Best Answers:
    0
    Trophy Points:
    78
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #13
    @outwork69 The differences are too small among the three examples. There is still a bunch of work to do though :)
    However the example with the colored graph is nice, only because there is some color to it.

    Imagine this were an app that would get submitted to the iTunes App store. What could you do with the design to make it look like it would be chosen as a Featured App? What are ways that you can make this Dashboard look exceptionally professional and elegant? Those are the things I'm looking for. :)

     
    DustinOverbeck, Sep 20, 2016 IP
  14. outwork69

    outwork69 Well-Known Member

    Messages:
    232
    Likes Received:
    72
    Best Answers:
    0
    Trophy Points:
    150
    Digital Goods:
    1
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #14
    I have created two versions. Personaly I like without image because it looks much more cleaner and professional. But feel free to decide, which you love the most.

    With image in the background:
    [​IMG]


    Without image:
    [​IMG]
     
    outwork69, Sep 20, 2016 IP
  15. DustinOverbeck

    DustinOverbeck Active Member

    Messages:
    170
    Likes Received:
    34
    Best Answers:
    0
    Trophy Points:
    78
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #15
    @outwork69:

    1. The image is okay. Maybe use it for support (bottom-right card).
    2. Make most of the other cards with white background
    3. For the card title and description, please remove the line break. it's wasted space. It should be in the same field area.
    4. Try experimenting the layout using the Masonry grid style: http://masonry.desandro.com/
      This is what Pinterest uses.

     
    DustinOverbeck, Sep 20, 2016 IP
  16. DustinOverbeck

    DustinOverbeck Active Member

    Messages:
    170
    Likes Received:
    34
    Best Answers:
    0
    Trophy Points:
    78
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #16
    @outwork69
    I thought I'd post an example from one of the Elements from the UI kit. You can see how it was used in the Support Area with little modification from the UI kit element. It was given a branded color and also an appropriate image overlay.

    This is the stuff I'm looking for with the design.

    dashboard example1.jpg
     
    DustinOverbeck, Sep 20, 2016 IP
  17. outwork69

    outwork69 Well-Known Member

    Messages:
    232
    Likes Received:
    72
    Best Answers:
    0
    Trophy Points:
    150
    Digital Goods:
    1
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #17
    Hi. I have completed the changes.

    [​IMG]
     
    outwork69, Sep 20, 2016 IP
  18. DustinOverbeck

    DustinOverbeck Active Member

    Messages:
    170
    Likes Received:
    34
    Best Answers:
    0
    Trophy Points:
    78
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #18
    @outwork69
    Look'n good!
    1. Make the non-colored cards with a white background (not just for the header, but also the body)
    2. In the "Requires your Attention", please make the rest of the "Click to Add" text be red in color like you did for the first row
    3. Let's see what it would look like if the table's horizontal lines did not extend the full width of the cards. Keep the horizontal line separating the title and the row columns the same as it is now, but just adjust the line with to the parts below it. lines_to_not_extend_full_width.jpg


     
    DustinOverbeck, Sep 20, 2016 IP
  19. outwork69

    outwork69 Well-Known Member

    Messages:
    232
    Likes Received:
    72
    Best Answers:
    0
    Trophy Points:
    150
    Digital Goods:
    1
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #19
    Please check the screenshot. 3. requirement: I am not sure if I understand you correctly. If i am misunderstanding you, please reexplain your requirement. Thank you.

    [​IMG]
     
    outwork69, Sep 20, 2016 IP
  20. outwork69

    outwork69 Well-Known Member

    Messages:
    232
    Likes Received:
    72
    Best Answers:
    0
    Trophy Points:
    150
    Digital Goods:
    1
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #20
    Good morning! i have completed a couple of small changes. Nothing fancy, just a few small adjustments which makes the design more polished.

    [​IMG]
     
    outwork69, Sep 20, 2016 IP