Website is Ugly #220

PullJosh · 2016-03-23T10:27:15Z

Sorry to whoever designed it. 📦

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
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 · 2016-03-23T13:21:43Z

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 · 2016-03-23T13:23:06Z

Everything.

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

matthewr6 · 2016-03-23T13:24:24Z

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 · 2016-03-23T13:27:31Z

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 · 2016-03-23T13:38:48Z

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 · 2016-03-23T14:14:54Z

I like what we have now.

PullJosh · 2016-03-23T14:17:31Z

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. 📦

matthewr6 · 2016-03-23T14:19:44Z

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 · 2016-03-23T14:20:44Z

What exactly is wrong with what we have now?

matthewr6 · 2016-03-23T14:21:15Z

That's been asked three times so far :P

BookOwl · 2016-03-23T14:30:45Z

the website looks like it was made by kids

What makes you say that?

PullJosh · 2016-03-23T16:22:47Z

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 · 2016-03-23T16:38:41Z

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. 📦

BookOwl · 2016-03-23T17:27:21Z

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 · 2016-03-23T18:47:51Z

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

PullJosh · 2016-03-23T20:50:59Z

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 · 2016-03-23T21:06:39Z

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 · 2016-03-23T22:26:42Z

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. 📦

matthewr6 · 2016-03-23T22:27:32Z

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

PullJosh · 2016-03-23T22:30:30Z

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 · 2016-03-23T22:33:28Z

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 · 2016-03-23T22:34:26Z

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 · 2016-03-23T22:35:36Z

So something like Scratch has?

matthewr6 · 2016-03-23T22:37:38Z

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

PullJosh · 2016-04-13T11:08:03Z

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 · 2016-04-13T12:27:29Z

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

PC master race 📦

mrjacobbloom · 2016-04-13T13:23:26Z

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

PC master race 📦

📱 📱 📱 ☎️ 📱 📱

iamunknown2 · 2016-04-14T00:33:33Z

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

mrjacobbloom · 2016-04-14T00:57:04Z

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

Sent from my iPhone.

matthewr6 · 2016-04-14T01:35:01Z

@iamunknown2 yeah

PullJosh · 2016-04-16T21:03:46Z

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 · 2016-04-16T21:30:57Z

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 · 2016-04-16T21:41:28Z

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

iamunknown2 · 2016-04-23T07:15:00Z

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

Anyway, can anybody fork master and push?

TheInitializer · 2016-04-23T13:36:32Z

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

matthewr6 · 2016-04-23T13:50:31Z

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

TheInitializer · 2016-04-23T14:03:57Z

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

TheInitializer · 2016-04-23T14:05:55Z

from a comment in the css:

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

yes

TheInitializer · 2016-04-23T14:12:24Z

here's my whole thing, based off of my original fork, nickynouse's fork of my fork and pulljosh's new thing. It's basically all the stuff I like 📦
http://codepen.io/TheInitializer/pen/wGxEYJ?editors=1100

one thing:

when one of the dots is hovered, it stops, but the others keep on going. Is there any way to stop all of the dots when one is hovered? That way they won't get all out of sync

also, do people like the hover effect for the dots? I wasn't so sure about it

mrjacobbloom · 2016-04-23T15:14:10Z

when one of the dots is hovered, it stops, but the others keep on going. Is there any way to stop all of the dots when one is hovered? That way they won't get all out of sync

I don't have free time to try this, but you could try putting the dots inside a 0x0 box, that way the parent will only have a hover effect when one of them is hovered-over

matthewr6 · 2016-05-01T22:16:48Z

@ElementalCode/programmers could someone implement this? I'm working on a featured projects system but it depends on the front page designs

also clean up the CSS so that way we only need one file for the whole site instead of a single file for every page :/ Right now it's a mess, tbh - this is why everyone should run/develop locally instead of using codepen

TheInitializer · 2016-05-11T23:27:23Z

https://scratch.mit.edu/discuss/topic/134554/?page=53#post-1977743 proof 📦

matthewr6 · 2016-05-11T23:35:45Z

site design != editor design
weren't the colors supposed to be temporary but we've never changed them? :P

towerofnix · 2016-05-12T12:04:31Z

weren't the colors supposed to be temporary but we've never changed them? :P

changes a couple variables
🎉

mrjacobbloom · 2016-07-22T15:28:38Z

are we still waiting for someone to commit this? I can commit this

matthewr6 · 2016-07-22T16:46:58Z

Sure

mrjacobbloom · 2016-07-23T06:07:59Z

Hey random question: The signup page keeps giving me an error that Localhost isn't approved for captcha. Is there a way around that so I can test the logged-in stuff?

mrjacobbloom · 2016-07-23T06:30:55Z

Oh wait that's totally what createsuperuser does. I'm dumb, nvm

use the new website design from #220

PullJosh added planning major frontend far-future labels Mar 23, 2016

PullJosh self-assigned this Mar 23, 2016

PullJosh added this to the Public Beta milestone Mar 23, 2016

iamunknown2 assigned iamunknown2 and PullJosh and unassigned PullJosh and iamunknown2 Apr 14, 2016

mrjacobbloom mentioned this issue Jul 23, 2016

use the new website design from ElementalCode/elemental#220 #233

Merged

matthewr6 pushed a commit that referenced this issue Jul 27, 2016

Merge pull request #233 from Airhogs777/updated-website

27999b0

use the new website design from #220

Website is Ugly #220

Website is Ugly #220

Comments

PullJosh commented Mar 23, 2016 • edited by ghost Loading

matthewr6 commented Mar 23, 2016

PullJosh commented Mar 23, 2016

matthewr6 commented Mar 23, 2016

PullJosh commented Mar 23, 2016

matthewr6 commented Mar 23, 2016

BookOwl commented Mar 23, 2016

PullJosh commented Mar 23, 2016

matthewr6 commented Mar 23, 2016

BookOwl commented Mar 23, 2016

matthewr6 commented Mar 23, 2016

BookOwl commented Mar 23, 2016

PullJosh commented Mar 23, 2016

PullJosh commented Mar 23, 2016

BookOwl commented Mar 23, 2016

towerofnix commented Mar 23, 2016

PullJosh commented Mar 23, 2016

matthewr6 commented Mar 23, 2016

PullJosh commented Mar 23, 2016

matthewr6 commented Mar 23, 2016

PullJosh commented Mar 23, 2016

PullJosh commented Mar 23, 2016

matthewr6 commented Mar 23, 2016

PullJosh commented Mar 23, 2016

matthewr6 commented Mar 23, 2016

PullJosh commented Apr 13, 2016

iamunknown2 commented Apr 13, 2016

mrjacobbloom commented Apr 13, 2016

iamunknown2 commented Apr 14, 2016

mrjacobbloom commented Apr 14, 2016

matthewr6 commented Apr 14, 2016

PullJosh commented Apr 16, 2016

matthewr6 commented Apr 16, 2016 • edited Loading

BookOwl commented Apr 16, 2016

iamunknown2 commented Apr 23, 2016

TheInitializer commented Apr 23, 2016

matthewr6 commented Apr 23, 2016

TheInitializer commented Apr 23, 2016

TheInitializer commented Apr 23, 2016

TheInitializer commented Apr 23, 2016 • edited Loading

mrjacobbloom commented Apr 23, 2016

matthewr6 commented May 1, 2016 • edited Loading

TheInitializer commented May 11, 2016

matthewr6 commented May 11, 2016

towerofnix commented May 12, 2016

mrjacobbloom commented Jul 22, 2016

matthewr6 commented Jul 22, 2016

mrjacobbloom commented Jul 23, 2016

mrjacobbloom commented Jul 23, 2016

PullJosh commented Mar 23, 2016 •

edited by ghost

Loading

matthewr6 commented Apr 16, 2016 •

edited

Loading

TheInitializer commented Apr 23, 2016 •

edited

Loading

matthewr6 commented May 1, 2016 •

edited

Loading