Layout (UI) about elemental HOT 126 CLOSED

I definitely like having a large viewing area as shown in the third design (as well as the first, but... well... y'know...)

Viewing the page at a large scale will be far more vital in Elemental than it is in Scratch, because viewers of the page will see it on a relatively large monitor. (More precise resizing than Scratch will also be necessary.)

from elemental.

Gonna say you should definitely make it so there are folders otherwise it'll be very, very cluttered, like Scratch already is.

Also perhaps another category in the Resources area, "etc" or "misc"? To contain files it doesn't recognize, or archives, or whatever lol.

from elemental.

Yeah... I'd say let the user make folders and then put whatever stuff they want wherever they want. Don't, however, sort all their stuff into categories for them.

from elemental.

Just added my own mockup (the final one). Let me know what you guys think!

from elemental.

Love that last one. Searchable blocks = genius !!!

from elemental.

I think we'll need that, given the massive amount of blocks we have. Also, we'll need to be able to search for what the blocks do, not just their names. (Ex. "link" should return an a tag as one of the results)

from elemental.

So would "link" return both <link> and <a>?

from elemental.

Yes.
Love the last mockup but I think that the display and code areas should be switched so the page dimensions are more correct for what you'd see normally.

from elemental.

The display width is totally adjustable (similar to the way Codepen does it when your code is on the left or the right), so there's no need to swap positions. :)

from elemental.

K, cool.

from elemental.

I like the last one.

from elemental.

Yay! I'm good at this! :3

from elemental.

How about the page-viewing thingy allows you to switch between viewing and the resource stuff you made and we also adopt the first/second one.

from elemental.

Something like this would be nice:
http://prntscr.com/7ubhs2
So you can only have one actual "script" (html or whatever) per file, and anything not under there isn't parsed.

from elemental.

Yeah, and also implement the search

from elemental.

Search is easy if we're using the DOM and including React.js - just give me the list of searchable items and I can implement it.

from elemental.

+1

from elemental.

All signs seem to be pointing towards drawing the blocks in the DOM, right?

The hard part about that is - I hope we don't need any of the pointy boolean blocks, because those are likely impossible to do in CSS alone xD (WAIT NO I forgot about clip-path)

from elemental.

@quat1024 We could always take the pixie approach and make loads of canvases. :P

from elemental.

ow no

from elemental.

Going to work on a bit of UI stuff.

from elemental.

Ok

from elemental.

v0.0.1 of UI Finished
I'm pretty happy with how this is coming along! It's not pretty - not by any stretch of the imagination. However, it's ever so slightly functional, and it uses minimal JS (entirely (S)CSS, aside from dragging to resize the editor/preview). The entire thing should be a good step forward. 😀

https://github.com/ElementalCode/Elemental/tree/ui/ui/v0.0.1

from elemental.

Tell me when you want me to incorporate it into the actual site.

from elemental.

I like the last one.

from elemental.

last one?

from elemental.

Second-to-last combined with last.

from elemental.

v0.0.2 of UI Finished
Quite a few gradients involved... let me know what you think. For now, though, I think it's another step in the right direction (certainly prettier than 0.0.1).

https://github.com/ElementalCode/Elemental/tree/ui/ui/v0.0.2

from elemental.

KK

from elemental.

Busy atm tho

from elemental.

same, but I like it

from elemental.

That's fine. :)

from elemental.

I love it!

from elemental.

Awesome! :D

from elemental.

Does this look okay?

from elemental.

Somehow the phrase "fake blocks and flexbox" just rolls off the tongue nicely...
^{_{I'm weird. :P}}

from elemental.

flexbox is fun

from elemental.

Looks sexy man.

OK it's feedback time! Part 1: stuff that's relevant now

• I don't like the scrollbar next to the categories, we'll prolly only have 8 anyways so I think you can get rid of it.
• If you don't want to remove it, well it only scrolls a couple pixels down, which is kinda strange, so you could shrink the categories
• The search bar looks out of place where it is, I'd give it the same amount of margin-right as the blocks area has & make it wider, or center it.
• The rounded corners on the search icon thing make me think it's a pulldown, actually, which doesn't sound good for usability
• Whole page seems to have a random black border on the left
• Search icon is off center, move it right 1-2px?
• gradients ahshdjhshahdgd. I think the category picker would look better with a little less box-shadow. Try straight corners instead of round ones in the picker too, just to see how they look.(me: Yah yah flat design blabbity blah 😛 )
• I think the block area should have a different background than the pickers. Uh, how about a subtle grid pattern (like graph paper?)

Stuff that's relevant later / me just complaining about placeholders lol:

• When you add the page preview, it might make the category picker / block picker uncomfortably thin horizontally on non-widescreen displays (Sidenote: my monitor is 5:4 which is actually even less wide than 4:3. If it works on my monitor it'll work on anything 😛 )
• Wordmark is super bland 😛
• Categories are too similar in color imo, might be hard to tell them apart when the blocks are assembled

Sorry I haven't been coding anything, busy busy

from elemental.

1. It is automatic, so if we go with only 8 categories, it will go away on its own

2. I'll just switch it to 8

3. You're right - I'll do that

4. It sort of is (but not exactly):
   

5. I just dragged it over there. :P
   

6. Will fix

7. lolno
   

8. Was on the to-do list

9. You saw what it looks like in number 5.

10. Wordmark? You mean the "Elemental" text in the top-left?

11. Yeah, having 10 makes that difficult. We can always change that later

from elemental.

Made a fun little pattern for the bottom area.

Here it is in use, toned down a bit with some nifty CSS:

(You might have to click the image to fully see what it looks like.)

What do you guys think?

from elemental.

css-tricks is awesome.
I still like it :)

from elemental.

Good!

from elemental.

Oh, and I got pip added to path finally thank gosh

from elemental.

Experimenting with the possibility of a flat design... Personally, I'm not a big fan, but I know @quat1024 wanted one. Perhaps there are just a few small tweaks that need to be made in order to make this look beatiful. A person can hope, I suppose...

from elemental.

I like that better, I think

from elemental.

I love it!

from elemental.

❤️

Dropdowns look funny on the background, I'd make the background of the drop down white. That's the thing with flat design, you start running out of colors :P

from elemental.

lol yeah

from elemental.

Hmm... just realized that, when the preview area is expanded, the dropdowns will appear above it. How do we plan to make them visible on any background?

from elemental.

Gray?

from elemental.

And what's the plan when the user's website has a gray background?

from elemental.

rainbow neon seizure...

from elemental.

Much better.

from elemental.

Quite.

from elemental.

But seriously... Do we want a border on the thing?

from elemental.

why didn't we think of that earlier?

from elemental.

I did, but I figured it would look awful.

Also, putting a border around that top triangle will be tricky. :/

from elemental.

http://jsfiddle.net/joshnh/26Lww/
http://jhaurawachsman.com/2013/css-triangles-border-stroke/

from elemental.

Those solutions won't work - I've already used up my two alloted pseudo elements.

from elemental.

http://www.growingwiththeweb.com/2013/03/triangles-in-css.html
Modify your elements, then.

from elemental.

Eh... Work.

I'll do it eventually. :P

from elemental.

Wait why 2 psuedoelements ? You could make ::before a square, rotate it 45 degrees with CSS transforms, and still have a border to spare :)

A box-shadow with no blurring could also work.

from elemental.

:OOO That square though.

(Other element is to extend hover area of element.)

from elemental.

For the menus, you could try a border/shadow around the text and a semitransparent background. P.S. it's Nicky

edit: or just use the same stripe pattern with a different bg color

from elemental.

Okay, got a rotated square working:

Now for making it look nice...

from elemental.

KK

from elemental.

That flatness omg

from elemental.

@quat1024 Is it good or bad? :3

from elemental.

Much better

from elemental.

Good! Tweaking a few things and it should be perfect. :D

from elemental.

:D

from elemental.

@PullJosh ❤️

from elemental.

Does this look good to upload as v0.0.3?

from elemental.

Sure!

from elemental.

I feel like the "Advanced Mode" checkbox (top right) isn't aligned to any sort of grid...

@quat1024 Opinion?

from elemental.

I'm not one for grids, but if these two distances match I think it'll look better:

• the distance from the left of the logo to the left side of the page
• the distance from the right of the checkbox to the right side of the page

Also pls commit!!!, I would love to mess with this. I have a fork of 0.0.1 that uses flexbox (sorta) on quat1024.github.io/Elemental

from elemental.

Okay, will do that and commit right after. ;)

from elemental.

Btw... wasn't working because I was trying to work out how to play that one ocean diving game you made. :P

from elemental.

lol

from elemental.

Wow ok

from elemental.

v0.0.3 of UI Finished
With the move to flat design, the response seems quite a bit better. Continue to give me your feedback; it's much appreciated!

https://github.com/ElementalCode/Elemental/tree/ui/ui/v0.0.3

from elemental.

:D

from elemental.

Light and dark options??

from elemental.

I've never been a fan of having multiple options for colors... Makes it feel like the developers couldn't make up their mind.

We have to stick to one color scheme.

from elemental.

Alrighty then. It doesn't exactly mean that you couldn't stick to one decision, but that you like to give the user more options. Some users prefer darker colors to lighter colors.

I'll probably like this either way, so it doesn't really make a difference to me. And obviously from reading your discussions, you don't plan for this to be widely used.

from elemental.

I do! @Firedrake969 has far less optimistic hopes for the project.

My thinking is that we will be the only people on the planet to have something like this that's up and running - and it's such a good idea! As long as we make it well, why wouldn't people use it?

Plus, there are loads of people on the forums looking for a website maker (to which the ATers become increasing frustrated). If they knew there was one that tranistioned them from Scratch to making websites, who wouldn't give it a try?

As for multiple color schemes: We need to have a theme that defines us - a few colors that scream Elemental. Without that, it will be hard to stick the tool in people's memory. We need people to remember us, and recognise screenshots of the tool.

from elemental.

Additionally, I've been diliberately choosing a palette that will also work well for a website - I want to keep things consistant between the site's front-end and the programming UI.

The top bar of the tool is intended to look a bit like a navigation bar, allowing us to use that same style (and color) for the Elemental website. The dark colors will be able to give good contrast against white text, and will be great for showcasing a front-page screenshot of the tool.

(I've thought all this through more than some of you might realise. :P)

from elemental.

I'm not estimating more than 1000 users :P

from elemental.

Neither am I, but 1000 users is a lot. If I can effect the lives of 1000 people in a positive way, that's a worthwhile investment on my part. Imagine teaching 1000 people to code. Think about how much change you could create with one simple tool.

There's no reason to do things half-way. If you're prepping for failure, then there's no way you'll succeed.

from elemental.

Your last point makes sense, @PullJosh. I guess it's probably best to focus on one color scheme at a time in early development, anyway,

from elemental.

And I do understand that you have been thinking a lot about this when I saw that you had a whole color scheme and design guide written up. :P

from elemental.

That's only the tip of the iceberg!

I've also been considering the best way to give tutorials for the interface... It's going to be tricky.
Also, Advanced Mode is something to consider. I haven't given it as much thought as I should have.

from elemental.

I'm not prepping for failure as much as estimating general overhead (support, moderation, etc). I completely agree with you though :)

from elemental.

A valid point.

from elemental.

Welp, I'm going to use some word-to-mouth advertising if I end up liking this. I have a lot of friends who could use something like this.

from elemental.

Most of my friends build stuff like this :P
The more the merrier!

from elemental.

If we reach enough users, won't Firedrake have to update the plan?

from elemental.

We'll think of something.

from elemental.

If need be, I'd be happy to chip in a bit to keep the site going - if it ever becomes that big a deal, it will be well worth the few extra dollars to keep it hosted.

from elemental.

Yeah, okay.

from elemental.