Website is Ugly

[PullJosh]

Sorry to whoever designed it. :package:

I hate to break it to all y'alls, but the website looks like it was made by kids (which, admittedly, it was). I feel like my first design looked pretty nice, but I can do better. The other issue is that it didn't really give all of the information we need to give. :P

Before the public beta, I want to overhaul the frontend of the website (hopefully that's okay!) Before I can make anything productive, though, I need to know exactly what information each page needs to communicate. I don't know if we are really to that point yet. If we are, let me know what needs to happen. If not, let me know as soon as we have it figured out.

Hopefully you guys agree!

To-Do List:

• [ ] Make cta buttons align with width of header image
• [x] Hover effect for navigation links
• [ ] Some sort of "branding" image where green Elemental link currently is in navigation
• [ ] Add "carousels"
• [ ] Pop-up sign in box
• [ ] Page footer

[TheInitializer]

Also I like the pocket shadow thingy

[mrjacobbloom]

(please improve on my terrible blue dots) (any ideas for colours to use for the dots?) (lol I feel like I'm typing in a Lisp-like language)

please(improve, on, my, terrible, blue, dots); I was thinking the tooltip text collapses, but that works too :P those blue dots are actually terrible tho haha

[TheInitializer]

Lolyeah. We need a colour that looks good and stands out from the background (or maybe just bigger dots :package: )

[TheInitializer]

Here's an example of something like this: http://komodoide.com/

[PolyEdge]

(please improve on my terrible blue dots)

Make the circles jump every once in a while to give the idea that they're interactive.

(any ideas for colours to use for the dots?)

RRRRAAAAIIIINNNNBBBBOOOWWWW

(lol I feel like I'm typing in a Lisp-like language)

+9000

Here's an example of something like this: http://komodoide.com/

I'll might be able to do it if I had time.

[mrjacobbloom]

Here's an example of something like this: http://komodoide.com/

I like the radar animation. you can probably pull that off with CSS alone if you use animations and the outline property.

[TheInitializer]

http://codepen.io/TheInitializer/pen/MyoVgY Better colour, box-shadow, semi-transparent. I'll look into a radary thing

[TheInitializer]

So I made a radary thing but for some reason it doesn't show the popup when I hover over it (but it does without the radary thing). Probably because I couldn't figure out how to use ::after so I just copied and pasted the div :package: Anyway I'll leave you to debug it: http://codepen.io/TheInitializer/pen/MyoVgY

[PullJosh]

Any ideas on what the UX benefits are for the dots?

And also, is the text going over top of the carousel in the commented out code intentional? I think it's a bit weird tbh.

Things always look awful when they're a work in progress. That's why it was commented out. :stuck_out_tongue_winking_eye:

[mrjacobbloom]

Fixed the dots: http://codepen.io/anon/pen/EKvYpa

Any ideas on what the UX benefits are for the dots?

shrug I'm still rooting for a slideshow-type-thing where only one tooltip is visible/noticeable at a time, so we need a way to hide the other hints while still making them accessible.

[mrjacobbloom]

Ohh the pocket wasn't registering as a pocket for me. I fiddled with the CSS until it did, try this: box-shadow: 0 -17px 20px -13px rgba(68,76,84,0.9), 0 -5px 4px -5px rgba(0,0,0,0.5);

http://codepen.io/anon/pen/vGJEBb (I was also playing with the dots on hover)

[TheInitializer]

Fixed the dots

I already fixed them, just forgot to post here :package: Now I'm trying to get the animation to stop when one of the dots is hovered over :page_facing_up:

Any ideas on what the UX benefits are for the dots?

The tooltips don't cover the image, so you can see more

[rumanti]

Nooo, I design the pages! cries - Actually, just kidding - and I don't design the navigation bar :package:

Personally, I'm not happy with the childishness of the design - I thought that the design was supposed to be child-friendly, probably because of the "cveryone learn computers now!" trend, and I was like, "ugh, you can't just abort just because you don't like the idea! Get on with it!" I am pretty famous in life for almost never getting anything done because of my stress for perfectionism, so I dropped my standard ... So that I get something done.

About the excess border-radius/radii, I just hate sharp corners for no reason. And box-shadows - erm, I'm not coming up with any lame excuse because it does look horrible. Why no dark background, though? I prefer dark honestly because it looks cool (the temperature) for my eyes. My eyes are definitely not perfect - I wear glasses. Sometimes.

---

My conclusion: I got the target audience messed up. I'm not really sure what the team actually want. Professional? Portofolio style? Material design? Flat? I was emotionless and didn't try thinking deeply about the potential users' opinion.

---

My ideas: Discuss an "official" color palette (Scratch is blue and orange; GitHub is white and deep lime green; etc) or at least theme (monochrome, for example) Give the navigation bar a neutral color (white, gray, black) Decide the layout style (compact, for example) Decide the design style (flat, for example) Decide some basic rules (no bright colors, for example)

There :)

[PullJosh]

Discuss an "official" color palette (Scratch is blue and orange; GitHub is white and deep lime green; etc)

https://github.com/ElementalCode/Elemental/wiki/Dev-Notes#ui---user-interface

Give the navigation bar a neutral color (white, gray, black)

Any reason?

Decide the layout style (compact, for example) Decide the design style (flat, for example)

I'm thinking flat w/ subtle shadows and relatively spacious.

---

I haven't been working on this lately because I'm still on vacation. I'll start working on it again when I get back. :)

[quat1024]

Hi guys!

About the excess border-radius/radii, I just hate sharp corners for no reason. And box-shadows - erm, I'm not coming up with any lame excuse because it does look horrible.

A really nice compromise is to use a 3px border-radius. Box shadows also look great when used for a subtle effect (just slightly darker than the background and about 3 pixels long, no blurring).

That type of effect is what Google uses for Cards UI/Google Now stuff - seriously, look at them, they know what they're doing.

Sharp corners and flat-as-a-pancake design is boring, but then again, border-radius: 1000px; might have been cool in 2008. You have to find a medium. That said, whats "in" in design, changes just as often as what's "in" in fashion. It really depends on your audience

[PullJosh]

It might be bad that I only just thought of this, but... Do we have a way to get screenshots of each page like CodePen does?

[matthewr6]

Yeah it's already implemented

[PullJosh]

Yeah it's already implemented

Wow! You're on top of things. Is a square image okay?

[matthewr6]

It's 360x480 (or vice versa, can't remember) but it's pretty easy to change

[PullJosh]

It's 360x480 (or vice versa, can't remember) but it's pretty easy to change

Most likely 480x360. Whatever the case, it shouldn't be too hard to change things around in the design. :)

[matthewr6]

I can work w/pretty much whatever size

[rumanti]

https://github.com/ElementalCode/Elemental/wiki/Dev-Notes#ui---user-interface

But it looks like light backgrounds are winning!

Any reason? (Give the navigation bar a neutral color (white, gray, black))

Bright navigation bars demands too much attention.

Tear it up, please!

1. I don't like the fact that the background and the navigation have the same background color, with only box-shadow to separate them. The navigation bar should be a little darker (try #343C44) in my opinion.
2. The Register button seems too sharp-ish and doesn't fit with the rest of the "fluid" design. I vote 8px box-radius.

Other than that, I like the pocket shadow.

[PullJosh]

But it looks like light backgrounds are winning!

Yeah, I just grabbed a few light grays (white and #ddd, iirc)

Bright navigation bars demands too much attention.

That's fine! But I think we can still have some color to it.

I don't like the fact that the background and the navigation have the same background color, with only box-shadow to separate them. The navigation bar should be a little darker (try #343C44) in my opinion.

I'm not feeling it.

The Register button seems too sharp-ish and doesn't fit with the rest of the "fluid" design. I vote 8px box-radius.

Again, I'm not sure I'm a fan. You say it fits in better, but most things on the page have a 4px border-radius.

[towerofnix]

I vote.. 6px border-radius? :P

I can't stand when the navigation bar is the exact same color as the main background. It makes it hard to distinguish between the nav and the content. So I'd go for something a bit lighter (but not much lighter) than the nav in the demo above.

Just my opinion..

[PullJosh]

I can't stand when the navigation bar is the exact same color as the main background.

Bear in mind that the showcase image will only appear when the user is signed out. :)

[iamunknown2]

Why doesn't @PullJosh fork master and put changes and issues/suggestions there instead of one big thread?

[matthewr6]

Issues are for discussion, but branches aren't.

4px border-radius is what bootstrap uses, if that matters...

[iamunknown2]

The problem here is that ALL the issues are put in one big thread.

It would be much better if we had a dedicated branch to overhauling the UI.

[towerofnix]

afaik issues are linked to the repository, not branches. You'd need a new repo for a new set of issues. Or you could have a label saying something along the lines of "new design" or whatever that all website-is-ugly issues/pull requests would get.

[matthewr6]

+1 for labeling issues, since that's what labels are for

[iamunknown2]

Whoops I forgot :package: but it's better to keep the changes on a separate branch, rather than on a CodePen.

[matthewr6]

👍🏽

[PullJosh]

It's better to keep the changes on a separate branch, rather than on a CodePen.

You're probably right. I'm using Codepen because I'm lazy. How about I create a branch once we have a first full homepage draft?

👍🏽

You do realize there's literally a button for that now... :package:

[matthewr6]

Commits don't have to be for complete things... It'd be nice to be able to see how far you are in the same place as everything else

Not on mobile :P

[PullJosh]

Not on mobile :P

MOBILE!? O_o

[matthewr6]

I meant when I use my iPhone to go on github issues xD

[PullJosh]

I meant when I use my iPhone to go on github issues xD

I feel like somehow using a phone to access github is morally wrong.

[iamunknown2]

I feel like somehow using a phone to access github is morally wrong.

PC master race :package:

[mrjacobbloom]

I feel like somehow using a phone to access github is morally wrong.

PC master race :package:

:iphone: :iphone: :iphone: :phone: :iphone: :iphone:

[iamunknown2]

Wait... You can only assign one person at a time!??

[mrjacobbloom]

Before I saw that it was an accident I was like "ohhhh shade thrown"

Sent from my iPhone.

[matthewr6]

@iamunknown2 yeah

[PullJosh]

As tends to happen when I work on things, I've hit a burnout point where I don't really have much more energy to give on this one.

I took a break once I got to here, and didn't really get going again: http://codepen.io/PullJosh/pen/PNjQmO

If someone else wants to take over that'd be great. ^{I'm terrible}

[matthewr6]

someone else takes over

a while later...

let's redo it again

I like it - only thing I'd suggest is some sort of text/background color change for the navbar when you hover over create/explore/sign in

[BookOwl]

Me too. The only thing that I would change is to center the footer links.

[iamunknown2]

Uh oh, it looks like Elemental is about to go dormant...

Anyway, can anybody fork master and push?

[TheInitializer]

I don't like the T-shaped things around the "or" and the big green buttons. I liked it before

[matthewr6]

I don't mind the green buttons but I don't like the T things and the "or" should be bigger, IMO

[TheInitializer]

I meant just the T things, not the buttons. Lol

[TheInitializer]

from a comment in the css:

Is it possible to only serve these when the user is logged out?

yes