search

zeroclipboard / zeroclipboard.github.io

The ZeroClipboard demo website.
http://zeroclipboard.github.io/
10 stars 16 forks source link

Needs some design love #9

Closed JamesMGreene closed 10 years ago

JamesMGreene commented 10 years ago

Note: This issue was originally zeroclipboard/zeroclipboard#218.

The website needs some design love. The demo is functional and has gotten us far (i.e. lots of stargazers on the main zeroclipboard/zeroclipboard repo) but it definitely could stand for some improvement. Unstyled HTML buttons give me the willies! :grimacing:

Even a little Bootstrap would be OK but it might hurt @jonrohan's pride. :stuck_out_tongue:

Also would be nice to integrate the new logo (from https://github.com/zeroclipboard/zeroclipboard/issues/201).

JamesMGreene commented 10 years ago

Moving my groveling to this issue. :grin:

@jonrohan: Can you pretty-please take this one for v2.0.0? :pray:

jonrohan commented 10 years ago

I may bootstrap it

JamesMGreene commented 10 years ago

I know Bootstrap has a stigma among you designer types... but we developers love it cuz it's waaaay better than anything we can put together on short notice. :smile:

msh141180 commented 10 years ago

Hi

I'm currently learning design in my spare time and would love to help you with a new layout/design for your website. I'm not proficient enough in HTML & CSS to code the design into a website so it would just be a mockup for now. I have a porfolio on behance with 3 designs I've made in the past and I'm quite proud of the latest one. If you are interested in letting me have a go at designing the layout let me know and also any specific details pertaining to the design you would want included such as color palette etc.

https://www.behance.net/mshanda

Thanks, Marcus

jonrohan commented 10 years ago

@mug2k that's very kind of you. We're open to whatever you want to do colors wise. If you get a good design going, I'll gladly code it up.

msh141180 commented 10 years ago

Do you have any elements you want added to the design such as an image or something else?, images always make a design more pleasing to the eye. Or is it more of a case of reorganizing the information you currently have on the page?

jonrohan commented 10 years ago

Nothing in particular, the logo I made is not great, so if you have ideas other than that feel free. You can use solid colors or patterns. Whatever you think might be clever or nice.

msh141180 commented 10 years ago

Any good?

zp-blue

jonrohan commented 10 years ago

Nice! I like it, @JamesMGreene what you think?

msh141180 commented 10 years ago

I can probably improve on it at a later date, as I've mentioned I'm a newbie to design so I should get better over time.

HaNdTriX commented 10 years ago

:+1: Like it!

JamesMGreene commented 10 years ago

Likes:

Suggestions:

msh141180 commented 10 years ago

Here's a purple version, with a redesigned logo (which took 3mins lol).

zp-purple

msh141180 commented 10 years ago

One more, a bit minimal in terms of style and not as loud as the other 2 designs.

zp-minimal

JamesMGreene commented 10 years ago

I like the minimal design in that it's not quite so loud/harsh in its color transitions. I'm thinking it's a bit too white, though... perhaps some complementary light purple (lavendar?) background colors for the buttons and/or certain subsections of the page?

JamesMGreene commented 10 years ago

@jonrohan @isaacdurazo Any design advice you can share with our budding volunteer designer (@mug2k)?

isaacdurazo commented 10 years ago

@mug2k I really like the direction you where taking in the first option. I have a couple of suggestions:

  1. What if the background is flat instead of having the lines?
  2. I would add a background color to buttons so they can stand out a little bit more. I'm thinking maybe orange/yellow.

These are my 2 cents :)

msh141180 commented 10 years ago

@JamesMGreene I'm not too sure about how this turned out, I agree the minimal one looks a little plain and needs some work and I like how these colors give the buttons more of a tactile feel but not too sure the color is the right one. I think it gives the design a slight feminine feel which isn't necessarily a bad thing but I doubt thats what your going for ;-)

zp-lavender

@isaacdurazo I personally like the blue one too and it does look a little better now with backgrounded buttons. I tried both orange and yellow but they didin't look right and didn't fit the colour scheme. I guess they would be a better fit if the entire color scheme was geared towards one of those two colours you suggested. In the end I just choose white for the backgrounds as it's more inline with the current scheme in this design. Also I just took a look at your logo's on dribbble, one word....Wow

zp-blue-newer

msh141180 commented 10 years ago

I thought I better post the latest mockup in the correct section as the last few iterations have been posted in the logo thread. I've ever so slightly changed the buttons in the 'choose config' so that the boot button is solid and the previous two are outlines which are a tad darker than the background color so they stand out somewhat. I think it's more inline with the rest of the design in that the important buttons have the white background.

desktop hd7

One more with 4px of shadows at the bottom of each section and 15px gap rather than 10px used in the mockup above (I think it enables you to see the shadow more clearly).

desktop hd5

JamesMGreene commented 10 years ago

All looks fantastic to me but I'm a design poser at best. :+1:

msh141180 commented 10 years ago

@JamesMGreene I'm quite proud of how the design has come along since the beginning, the logo helps hugely in that it starts the whole thing off beautifully and the design decisions lately were inspired by @isaacdurazo's logo. Not bad for a fledgling designer aye?

I'm a poser too, fake it till you make it lol

JamesMGreene commented 10 years ago

Aye, not bad at all. :)

I'm a poser too, fake it till you make it lol

I think that has to be true of designers as I can't imagine anyone being amazing at proper web design right out of the gate. Definitely takes time and experience, as far as I can see.

isaacdurazo commented 10 years ago

All this thread is why I love Open Source :+1: Great job @mug2k

msh141180 commented 10 years ago

Which one do you guys prefer?, the one with the drop shadows or the one without?

isaacdurazo commented 10 years ago

I prefer the one without the drop shadow

HaNdTriX commented 10 years ago

I like the drop shadow :+1:

JamesMGreene commented 10 years ago

They're pretty equal to me but... after viewing them at 100% magnification, I prefer the one without drop shadows.

msh141180 commented 10 years ago

I'll go for the one with the drop shadow. It's tied at 2 a piece, @jonrohan you have the casting vote. No pressure ;)

JamesMGreene commented 10 years ago

Quoting @mug2k from zeroclipboard/zeroclipboard#431:

@JamesMGreene What would you like from me?, if you have a Mac and Sketch that would be the easiest route because you would be able to get all the fonts, measurements, colors etc from with the actual Sketch file. Otherwise I'll try and make a descriptive image file with all the information you need.

I personally do not have Sketch. @jonrohan, do you?

Otherwise, would exporting your Sketch to SVG maintain all of the color and font properties? I'm guessing so.

JamesMGreene commented 10 years ago

@myitcv can also have a vote if he shows up. :stuck_out_tongue_winking_eye:

msh141180 commented 10 years ago

@JamesMGreene If you have a Mac you can get a free 14 days trial for Sketch, not sure how useful that would be though.

I'm not knowledgeable about SVG's but I can definitely it export it to an SVG if you want.

jonrohan commented 10 years ago

I have sketch

jonrohan commented 10 years ago

Also :-1: on drop shadow

msh141180 commented 10 years ago

@jonrohan How should I send the assets to you ?

jonrohan commented 10 years ago

whatever you have with layers is good, (psd, sketch)

msh141180 commented 10 years ago

@jonrohan I have the Sketch file, 3 SVG's and 2 fonts all rar'd up a ready to be sent. Can I have your email address?

jonrohan commented 10 years ago

jon @ jonrohan.me

msh141180 commented 10 years ago

@jonrohan Sent

I just had a look at yours and @JamesMGreene websites, I noticed one of you works for Github and the other is a member of the jQuery team, wow. I've been collaborating with some web development heavyweights.

If either of you guys want your websites redesigned at some time in the future I'll be happy to do them for free as it would be something to put in my portfolio. I think I need a lot more practice though so in a few months time if you guys are interested and I'll probably be able to code them up too.

jonrohan commented 10 years ago

we only pretend to be cool :wink: :wine_glass:

myitcv commented 10 years ago

@JamesMGreene - when it comes to design prowess, I don't even register on the scale

JamesMGreene commented 10 years ago

Speak for yourself, @jonrohan! :stuck_out_tongue_winking_eye: j/k

Like you say, @mug2k, we just fake it till we make it. :metal: Thanks for the compliments, though! I'd be happy to have someone redesign my site whenever. As you can see, it's currently not much more than a stock gh-pages theme plus Jekyll markdown-to-HTML generation.

@myitcv Fine, you are no longer allowed to vote then. :wink:

msh141180 commented 10 years ago

@JamesMGreene I'll message you on here when I think I'm good enough to take on the task. I'm hoping I'll be able to code it up too. Right now though I'm going to go back to basics and learn some more graphic design fundamentals before I brush up on HTML & CSS.

@jonrohan The offer is open to you too and anyone else in this project.