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

[PullJosh]

Rather, what is the benefit of creating a new design in place of a functional design we currently have?

I think that's where our viewpoints differ. To me, just because something is functional doesn't mean it's good. I'm a more artsy person, which is definitely not the standard programmer mindset.

To be fair, you're probably right that I should have started from what we already have. At this point, though, I'm too far in for it to be worth going back and starting over.

My plan was to create a new branch once everything is done and shift around all of the styles and things myself, and just have you guys check. I guess I'm not really sure why you're so adamant about removing my workload? Honestly, I find projects like this to be super fun.

[towerofnix]

Rewrite all the things! :)

I do that too much.

[matthewr6]

To me, just because something is functional doesn't mean it's good.

Exactly - it's currently functional, which is the first step in having something be good. It works, though it may not look nice. That's why you can work off a functional thing to add to/change the design!

I guess I'm not really sure why you're so adamant about removing my workload?

That's certainly not my goal - I'm just trying to think about the most efficient way to do things.

I'm definitely OK with complete rewrites if that's the only way to do something - just look at my gopher-brain repo :P

[PolyEdge]

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

The navbar is seafoam

[PolyEdge]

And also, I wrote the frontpage.

[matthewr6]

I think he meant on hover (which I still like tbh)

don't worry, not everyone completely dislikes the page :P

[PolyEdge]

Me too

[TheInitializer]

Am I the only one that agrees?

NO DARK BACKGROUNDS PLEASE

I like dark backgrounds... at least have one on the non-logged-in splash :package:

[PullJosh]

at least have one on the non-logged-in splash :package:

That was my plan exactly.

[matthewr6]

continuity though...

[PullJosh]

continuity though...

It's like a little banner. Here's a beautiful diagram I made to show the general idea: The black banner* is only there for signed out users. People who are signed in just get strait to the project carousels (unless we want to stick something else in there like blog posts.)

[]()* not actually black in real design

[matthewr6]

K, kinda looks like what we have now :P so cool

[PullJosh]

In terms of making the site responsive... How small of screens should we support?

I wouldn't imagine mobile users are going to be a large portion of our audience. (If we really want to know, we can always use Google Analytics to find out the exact resolutions of users' devices.)

[towerofnix]

I'd say at least 200px wide screens should be supported. :P

[matthewr6]

Tablet.

[PullJosh]

I'd say at least 200px wide screens should be supported. :P

I hope you're joking.

Tablet.

That seems good.

[towerofnix]

I'd say at least 200px wide screens should be supported. :P

I hope you're joking.

I'm not joking about 200px for the actual website and previews of sites people have created with Elemental. Tablet size is good for the editor though.

[PullJosh]

I'd say at least 200px wide screens should be supported. :P

I hope you're joking.

I'm not joking about 200px for the actual website and previews of sites people have created with Elemental. Tablet size is good for the editor though.

[towerofnix]

Oh wow haha. I meant 300px :P

[PullJosh]

Oh wow haha. I meant 300px :P

A bit of googling seems to suggest that 320px is generally the lowest any sane person goes, as it's the size of older (smaller) iphones in portrait mode. I highly doubt we'll be getting many phone visitors, so going lower than about 500px will be low priority.

[matthewr6]

We're not quite sane tho :P +1 for 500px

[PullJosh]

We're not quite sane tho :P

Shhh...

[PolyEdge]

I feel kind of bad now. Is it that darn border-radius or is it just terrible :stuck_out_tongue_winking_eye:

[PolyEdge]

:cry:

[PolyEdge]

I'm pointless then if you're going to overhaul the frontend

[PolyEdge]

Would longer boxes be better? http://prntscr.com/akjuwc

[PolyEdge]

I'm depressed

[iamunknown2]

@Dylan5797 I think we should use something else other than bright orange...

It would also be nice if it was responsive and adapted to the size of the screen. Maybe something like this:

#theIdOfTheDivWhichContainsTheSignUpThingy {
    min-width: 50%;
    width: 300px;
    max-width: 80%;
}

[PullJosh]

I'm depressed

O_O I hope you're exaggerating.

[PullJosh]

Okay, I'm going to share what I've got so far so that you guys can nitpick it. I want you to be as mean to mine as I was to Dylan's. Pick it apart and tear it to shreds. That way we can get it perfect.

I currently have only finished the navigation bar and banner. I'm aware that this homepage will need to be more than just an advertisement (also show "featured" pages and things), but I'm not to that point yet. Right now just take a look at the navigation bar and logged-out banner:

http://codepen.io/PullJosh/pen/YqVazv

Tear it apart, please!

(Also, big space at bottom is so I could test out scrolling on the page and the fancy little effect I added there.)

[PullJosh]

(Sorry for triple post...)

Here are my current concerns about the design:

1. Logged-out banner area might be too tall (opinions?)
2. the "or" between the two green buttons at the bottom looks kind of ugly
3. The links in the navigation bar don't really change at all on hover (only your cursor looks different). Is this bad for usability?
4. I tried to make everything nice and responsive, but the header text looks too small at a width of 851px to 1000px.
5. I am now less concerned about readability of the green buttons than I was at one point, but it's still on the back of my mind
6. There's a little shadow on the navigation bar which appears as you scroll (much like when you scroll down in a Google doc). This runs on window.onscroll. The concern is that this might be harsh on older computers.

[towerofnix]

The concern is that this might be harsh on older computers.

I feel sad for the people who have computers like that. :package:

[TheInitializer]

I honestly love it. I like how we brought that purple back - tbh, coral is really ugly if overused. I'll try to critique it later I guess

[TheInitializer]

http://codepen.io/TheInitializer/pen/MyoVgY did a few little tweaks

• tooltip thingies are transparent when hovered over
• register and sign in both have transitions
• not much else :package:

[mrjacobbloom]

My biggest concern is that this new design is starting to feel like a landing page, and I don't think the logged-in version will look any good without the screenshot widget. You'll never see these scrolly-big-picture-minimalistic landing-pages double as a dashboard for a logged-in user, there's always a separate dashboard/homepage. The first example that comes to mind is Google Drive: only logged-out users get to see their big scrolly pictures. If we go forward with this design, we'll have to create a completely separate homepage for users

okay, other concerns:

• tooltip thingies are transparent when hovered over

I feel like that should be the other way around, transparent until hovered-over. Or maybe even have most of them transparent and have them cycle which one is opaque every few seconds (like a slideshow). Or, better yet, have the text for the inactive tooltips collapse into an :information_source: symbol or something.

strange box shadow

yeah that's gotta go

2: the "or" between the two green buttons at the bottom looks kind of ugly 3: The links in the navigation bar don't really change at all on hover (only your cursor looks different). Is this bad for usability? ... 6: This runs on window.onscroll. The concern is that this might be harsh on older computers.

2: I like the "or" as-is, or at least the idea behind it 3: it won't confuse anyone but I'd like it a lot better if they had a hover effect 6: yeah old computers hate that, but it's better than setInterval :package: enough other sites use it that I say leave it in. Besides, it looks kickbutt

Other thoughts/complaints (NOTE: on a screen that falls under max-width: 1634px):

• overall it's looking a lot better than the current site. Green and orange was a bad color combo
• the first tooltip sticks way too far off the left edge. Maybe shorten the text to "Share with one click" or "Share with friends"
• the tooltips look too big and childish. Try a lighter font-weight and less border-radius. Or just make them smaller
• I like the font of the big text. Is it the same one we use for blocks? It looks :+1: here
• I like the navbar shadow effect; however, once you can see its border it looks too tall next to the 500px-wide content. Maybe shrink the padding as you scroll
• the green buttons at the bottom need to respond to hover. They're also really close to the width of the screenshot and it bugs me that they don't lign up
• make the screenshot a link. Either to the editor or the register page.
• we need to decide on a logo and stick with it. In the navbar. It can be more low-key than what we currently have but it can't just be text. My suggestion is dark-gray angle brackets around the word "Elemental" that become light on hover

[PullJosh]

My biggest concern is that this new design is starting to feel like a landing page.

I think you're right. One option would be to try to shrink down the landing image area. Let's wait for thoughts from others to see what happens.

I like the "or" as-is, or at least the idea behind it

Okay! I might tweak how it looks just a bit, but it should stay functionally the same.

(about nav bar:) it won't confuse anyone but I'd like it a lot better if they had a hover effect

I was thinking about making them green on hover, but I don't want them to look like the first ("Elemental") link.

yeah old computers hate that, but it's better than setInterval :package: enough other sites use it that I say leave it in. Besides, it looks kickbutt

Yay! :D

the first tooltip sticks way too far off the left edge. Maybe shorten the text to "Share with one click" or "Share with friends"

Very good point. I'll definitely fix that one.

the tooltips look too big and childish. Try a lighter font-weight and less border-radius. Or just make them smaller

Interesting... I can totally see where you're coming from with the bold font being too large. I kind of like the border radius being so large (it makes the ends perfectly circular). I'll continue to play around with those. (Making font thinner could potentially fix the previous issue!)

I like the font of the big text. Is it the same one we use for blocks? It looks :+1: here

Yup. Source sans pro. :)

I like the navbar shadow effect; however, once you can see its border it looks too tall next to the 500px-wide content. Maybe shrink the padding as you scroll

I'm not sure I agree on this one. Anybody else have opinions?

the green buttons at the bottom need to respond to hover. They're also really close to the width of the screenshot and it bugs me that they don't lign up

Agreed. The width thing comes down to circumstance (buttons are static size, image scales). I'll try to get them all lined up nice with a hover effect.

make the screenshot a link. Either to the editor or the register page.

I'll think about it. If it becomes a link, it should definitely be to the editor.

we need to decide on a logo and stick with it. In the navbar. It can be more low-key than what we currently have but it can't just be text. My suggestion is dark-gray angle brackets around the word "Elemental" that become light on hover

I'll give that a try.

[PullJosh]

Is this version of the "or" better or worse?

[iamunknown2]

@PullJosh +1 because it makes it more apparent to the user that an account is required to save to the cloud, without having to sacrifice much aesthetically.

However, it might be better if the blocks were on different lines, with the "or" in between them.

[PullJosh]

However, it might be better if the blocks were on different lines, with the "or" in between them.

Try shrinking down your browser (or the codepen preview window). ;)

[mrjacobbloom]

I like the "or" better without the horizontal lines

[PolyEdge]

I like all this, but what about every other page on the website...

[PolyEdge]

Oh and I was joking in all my posts further up...

[mrjacobbloom]

I like all this, but what about every other page on the website...

shhhh don't think so hard

Oh and I was joking in all my posts further up...

thank goodness, I was actually woried :package:

[PolyEdge]

lol

[PolyEdge]

oh did i make the new slogan "Learn to develop on the web with an easy drag-and-drop interface."

[PolyEdge]

I'm assuming that we should have a separate css file for the front page, right?

[PolyEdge]

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.

[mrjacobbloom]

oh did i make the new slogan "Learn to develop on the web with an easy drag-and-drop interface."

can we change it to "Learn to develop websites with an easy drag-and-drop interface."?

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.

lol I think that's why it's commented out :stuck_out_tongue_closed_eyes:

[TheInitializer]

Or, better yet, have the text for the inactive tooltips collapse into an :information_source: symbol or something.

Done.

[TheInitializer]

(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)