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

[matthewr6]

Any pages in specific you want to change, or just everything? Also any specific things about the design that you don't like? I personally like it (though having no border-radius might be better, and with less shadow)

Also, two things. First - NO DARK BACKGROUNDS please Second - as we said about that design, remember that none of the pages are simply static cover pages

[PullJosh]

Everything.

1) That's fine 2) Yup! That's why I need everyone to let me know what content goes where.

[matthewr6]

For 2, basically see the pages as they stand right now - they have all the information that they'll probably have (although make sure to make it flexible w/adding or removing sections/info)

[PullJosh]

Okay! I'm assuming that w/ python it's relatively easy to insert content which follows a specific format? (eg. if we have carousels like on the scratch homepage, you can fill in images & text where I just put placeholders)

[matthewr6]

Yeah.

Also

Also any specific things about the design that you don't like? I personally like it (though having no border-radius might be better, and with less shadow)

[BookOwl]

I like what we have now.

[PullJosh]

I like what we have now.

I dislike what we have right now so much that I'm going to make the executive decision that we need a new design. I know this is a group project, but I can't stand what we've got. :package:

[matthewr6]

I'm going to veto that because you need to at least explain why first and propose actual changes instead of just saying you'll redo it because you personally dislike it without explaining anything else

[BookOwl]

What exactly is wrong with what we have now?

[matthewr6]

That's been asked three times so far :P

[BookOwl]

the website looks like it was made by kids

What makes you say that?

[PullJosh]

Compare our website to something more professional like Scratch. We have massive border-radiuses (radii?) and box-shadows, both of which are very 2004. The navigation bar, on hover, is a terrible off-green, and there is a bunch of unused space.

Take a look at the site from the eyes of a potential user. Nothing about it appears professional. Even on a subconscious level, the site as it stands will turn away users. ... How about I just cook something up and then you guys can vote on which is better?

[PullJosh]

Looking back on what I wrote, it's clear that you guys are taking the brunt of my perfectionism. I'll try to tone it down. :package:

[BookOwl]

We have massive border-radiuses (radii?) and box-shadows

I personally like both of those.

The navigation bar, on hover, is a terrible off-green

I agree with you on that.

there is a bunch of unused space.

Again, I agree with you.

Take a look at the site from the eyes of a potential user. Nothing about it appears professional. Even on a subconscious level, the site as it stands will turn away users.

I'm not sure about that. While the site could be better, I don't think it's that bad.

How about I just cook something up and then you guys can vote on which is better?

Sounds like a good plan to me.

[towerofnix]

I like the box shadows but maybe more transparent / less thick, same for the border-radiuses but maybe less round.

[PullJosh]

I like the box shadows but maybe more transparent / less thick, same for the border-radiuses but maybe less round.

Agreed. I like very subtle doses of each (4-6px border radius, extremely small and subtle box shadow).

[matthewr6]

Agreed with the border-radius and box-shadow properties.

Not sure what color green we want/have been using for the nav bar and other parts of the site... Preferably whatever's in the editor's bar

Take a look at the site from the eyes of a potential user. Nothing about it appears professional. Even on a subconscious level, the site as it stands will turn away users.

Yeah we get that you don't like it :P

How about I just cook something up and then you guys can vote on which is better?

Ok, sounds fair

Why not just modify the current stuff though? (also because our CSS _must be_ reused throughout pages - so much cleaner!) It seems the current consensus is wider stuff, less box shadow/border radii, and slightly different navbar colors on hover

my perfectionism

It's not as much perfectionism as "I prefer it better my way, so it has to be that way or else it won't work", imo (of course not regarding the box shadow and border radii)

[PullJosh]

It's not as much perfectionism as "I prefer it better my way, so it has to be that way or else it won't work", imo (of course not regarding the box shadow and border radii)

Well... yeah. Whatever it is, I have a terrible case of it. Sorry for being a bit brutal. It's just the way I am. :package:

[matthewr6]

It's fine - I'm like that too a lot :P

[PullJosh]

It's fine - I'm like that too a lot :P

You're allowed to do it for the backend if I can do it for the frontend. xD

[PullJosh]

In terms of UX... Are we okay with having a different homepage depending on whether or not the user is signed in, or do we want them identical?

[matthewr6]

Fairly identical would probably be best, though a big intro picture (not necessarily a picture tho - kinda like the thing in your mockup) inserted between the navbar and the actual content would be cool

[PullJosh]

So something like Scratch has?

[matthewr6]

Yeah (I was talking about the picture/notreallyapicture being like that screenshot we have with the labels)

[PullJosh]

Sounds cool!

What are we looking at in terms of required browser support? (Read as: is flexbox okay?)

[matthewr6]

No, read as: What's the oldest IE version we want to support? :P I think IE 11.

[PullJosh]

Okay! I'll go with flexbox then. :) (Should I be discussing on gitter?)

[towerofnix]

No, read as: What's the oldest IE version we want to support? :P I think IE 11.

Edggggge pls :P

jk, IE 11 I guess.

[PullJosh]

Dang... I thought I was getting somewhere, but then I added some text and it ended up really hard on the eyes. :(

Determined to make this perfect.

[towerofnix]

Oh no, did you leave a spare

* {
  font-size: 80px !important;
  color: red !important;
}

somewhere? :P

(EDIT: more terrible)

[matthewr6]

xD

[PullJosh]

Does everyone agree with firedrake that a light colored site is better? (because imo dark looks way better and matches the editor much more nicely)

Give this a "thumbs up" reaction for light and a "thumbs down" reaction for dark.

[towerofnix]

(Confused bc I'm not sure which to choose, your post was written well and stuff)

On the one hand I prefer light webpages but I'm often setting my text editor to dark colors..

[PullJosh]

I've come to a bit of a compromise, or at least the idea for one. We'll see how it goes.

[PullJosh]

@Firedrake969 How hard is it, from the backend side of things, to put the sign up/log in forms on the homepage? (I'm hoping to do something like scratch does.)

[matthewr6]

It'd probably be best to have just one of the forms (I'd prefer the login form)

[PullJosh]

Okay... so login is a little popup thing like Scratch, but sign up is a link to another page?

[BookOwl]

Okay... so login is a little popup thing like Scratch, but sign up is a link to another page?

That's professional web design for you! xP

[PullJosh]

That's professional web design for you! xP

It's a shame we can't do better than the big, monstrous companies. It doesn't seem like it would be that hard... (I'm no expert, but it seems like you could just have an input of the hidden variety which states whether the user is signing up or logging in. Is this not possible?)

[matthewr6]

It is actually somewhat difficult and, as importantly, breaks Django's design patterns. Just have two separate pages for login/signup...

It is possible, but given that it does break the design patterns of Django and does require a potentially substantial amount of effort, maybe we should vote?

Thumbs up if you want to have them on different pages, thumbs down if not @ElementalCode/programmers .

[PullJosh]

Okay.

[PullJosh]

Running into readability problems again. Our green color really doesn't have any good color you can place on top of it and have be readable. :(

[matthewr6]

White? What's the hex code?

[PullJosh]

All colors are listed here: https://github.com/ElementalCode/Elemental/wiki/Dev-Notes

Here's what the call to action button looks like currently: Clearly there's still work to be done.

[matthewr6]

(do remember that this isn't merely a cover page, please and thanks)

[PullJosh]

Yup! As I said, still lots of work to be done.

[BookOwl]

I can read it just fine... :confused:

[matthewr6]

I still think we should be improving our current design, not creating a completely new one, tbh

[PullJosh]

I still think we should be improving our current design, not creating a completely new one.

What is the benefit?

[matthewr6]

Rather, what is the benefit of creating a new design in place of a functional design we currently have? That is what is being proposed, and is what must be proved - not the other way around. However, one reason is that there's already a base design to work from. (I think you still have yet to give a concrete reason why the design is bad aside from points that we agree on... If there are legitimate points, it'd be helpful to know instead of just doing stuff and then having you do things over because you want it differently)