Ok, so the devs said we can go through with EternaU, and that we can be on the main site. At this point, I think it’s time to get framework and UI design going. So any ideas or graphics of what the site should look like and it’s layout would be helpful.
I made a concept a while back that I uploaded here (will try to find a better upload site): http://videobam.com/xozXT
Discussion between Drake and myself:
Question: What is the next step for EternaU now that we got the devs’ green light? [7:40 PM]
firedrake969: have someone get a dev package and try implementing it [7:41 PM]
mat747: Hi LFP [7:41 PM]
LFP6: @Fire: We need something to impliment before we can put it up. 
Also, good luck getting the packeges-devs are busy ATM. They’ll come eventually, but we have to be patient [7:48 PM]
firedrake969: Then you can put up the mock-site [7:48 PM]
LFP6: @Drake: ? [7:48 PM]
LFP6: What mock site? [7:49 PM]
firedrake969: You said you need someting to implement. [7:49 PM]
firedrake969: Just set up a skeleton. [7:49 PM]
firedrake969: A framework. [7:49 PM]
LFP6: I guesss that’s where we go next… Deciding on a framework and some UI designs? [7:49 PM]
firedrake969: Yeah [7:50 PM]
firedrake969: Personally, the way all of EteRNA’s structured, it wouldn’t work [7:50 PM]
LFP6: Everyone agree here? [7:50 PM]
firedrake969: aesthetically [7:50 PM]
LFP6: Why not? [7:50 PM]
firedrake969: Something like profiles would be better [7:50 PM]
firedrake969: http://eterna.cmu.edu/web/player/59655/ [7:50 PM]
LFP6: (Btw, Machine suggested a new organization) [7:50 PM]
firedrake969: how so? [7:51 PM]
LFP6: Just a sec [7:50 PM]
LFP6: https://getsatisfaction.com/eternagam… [7:51 PM]
LFP6: Drake, do you want to do smoe UI designing? [7:52 PM]
LFP6: *Some [7:52 PM]
firedrake969: the primary function is actually labs [7:52 PM]
firedrake969: Not really [7:52 PM]
LFP6: Labs? [7:52 PM]
firedrake969: I don’t know any CSS [7:52 PM]
LFP6: You don’t have to make it with real tools. [7:52 PM]
firedrake969: I’m better w/JavaScript/HTML. [7:52 PM]
LFP6: Pics work fine [7:52 PM]
firedrake969: What do you mean? [7:52 PM]
firedrake969: I don’t like graphic design, period [7:52 PM]
LFP6: Make me a pretty picture that illistrates your design [7:53 PM]
firedrake969: *coughprettycough* [7:53 PM]
LFP6: Or just give design in text, but it helps to have a visual [7:53 PM]
firedrake969: I don’t do GUIs. [7:53 PM]
LFP6: *Sigh* Than go make a framework. And it sounded like you had a UI design in mind. [7:53 PM]
LFP6: Doesn’t have to be pretty either [7:54 PM]
firedrake969: I didn’t. [7:55 PM]
LFP6: Well, I’ll make a forum topic for submitting any ideas… [7:55 PM]
firedrake969: I was just suggesting that for the UI, it shouldn’t be like the main site layout [7:55 PM]
LFP6: Drake, but you were talking about the player profile…? [7:55 PM]
firedrake969: yeah [7:55 PM]
LFP6: Oh, ok [7:55 PM]
firedrake969: I was saying it should be something like that [7:56 PM]
LFP6: What do you mean by “Main site” [7:56 PM]
firedrake969: as in like challenge page, player puzzles page. [7:57 PM]
LFP6: Ah [7:57 PM]
LFP6: However, I think tiles similar to the ones on the puzzle listings might be good to show the individual courses-links would be a bit bland, IMO. We need big and pretty. 
[7:58 PM]
LFP6: lol [7:59 PM]
firedrake969: But (1) what would the pictures be and (2) it’d be ugly if it’s a selection of courses. [7:59 PM]
firedrake969: puzzles can’t really equate to courses, LF. [7:59 PM]
LFP6: Drake, Windows 8 uses tiles. And the Biomedia Project. Neither have anything to do with Eterna. [8:00 PM]
firedrake969: Neither have to do with courses, either. [8:01 PM]
LFP6: Drake, I have an example. [8:01 PM]
firedrake969: Ok [8:01 PM]
firedrake969: Show me. [8:01 PM]
LFP6: http://unity3d.com/learn/tutorials/mo… [8:01 PM]
LFP6: But with boxes around the entries. [8:01 PM]
firedrake969: I actually think it should be more like the labs page. [8:02 PM]
LFP6: And making it blend with the Eterna UI/UX [8:01 PM]
firedrake969: yeah, that’s more like the labs page:/ [8:02 PM]
LFP6: Drake, that may work, actually… Not sure how much explination you’d want though… I think you might want to leave that for the course page [8:02 PM]
LFP6: I personally think that you should cut out the full explination though, or maybe not have it at all, or it’ll look a bit cluttered [8:03 PM]
mat747 has done a lot of work with UI designs, some of which are posted to these forums. if he has time, he would be a good person to brainstorm & collaborate with!
If devs are into building out main site, that makes UI of any interim system less critical, as it will function as more of a content repository. But it is still important to make sure we have all the pieces, and that the layout is easy to use, in case it takes a few months to move to main site. Thanks for taking the initiative to get started! 
So to start designing a UI from the ground up, in addition to the landing page / course list, we want to figure out the main categories of content that will compose the individual class page template, for example:
Now consider each section as a physical object that has to go somewhere on the page. Depending on Weebly’s options, you may be able to embed videos instead of linking to them, or have collapsible submenus so that every section doesn’t have to fit on the same page at the same time. But wherever possible it is nice to have all content accessible without leaving the page itself.
So there should be a site map depth of only 2-3 pages, ideally:
So, some things like Class Title will need a place on multiple page types. Other things like Transcripts and Video will only need a place on the class page. Depending on menu support, you may even wish the index page to persist as a frozen column or header with drop-down hover / collapsible menus that allow you to browse and click thru to other classes from within an individual class page, without having to return to / reload the index page.
One way to start may be to just begin building the site, and try to cram every content module into the same page using whatever tools they provide. Take a screenshot, and then people can give specific feedback and cut it up into mockups to describe “a little to the left!” or “this should be green, not red!”. With art, sometimes it is also easier to get started with a seed to work from.
Also, since I assume Weebly has specific drag & drop UI modules or something, knowing what we have to work with will tell us what our UI options really are. While it may support custom code, if we’re going with a rapidly scalable platform, we may as well use its speedy ready-to-go features!
As for the landing page / course list, if we don’t do the frozen persisting menu, I kind of like the tiles approach, but it is true that the lab style list may be easier to scan / scroll. I prefer visual / image / button like design myself: pretty, colorful, curvy, drop shadow, like candy objects you can pick up off the page and eat! Something you feel rewarded for clicking on! But even if we just get a text line item list, or like I said the persisting drop-down menu, anything will be fine to start.
Hope this helps!
Machine, what are you suggesting we use Weebly for?
Btw, Weebly does work with UI “Blocks”. You can put in your own HTML, and I think JavaScript as well. In theory, you can use an iframe element if needed (not sure), and there is a “block” specifically for Youtube videos. I do not believe you can do collapsible content, unless there is a way to code it manually.
hey! sorry I was confused, I thought you were talking about building a Weebly instance for the interim between now & devs building main site.
If you are talking about main site UI, I would check with devs to see how they want to handle it, so we don’t duplicate their efforts. But I know in the past they have appreciated player mockups that help lay out basic elements.
So we still want to determine the major categories of content, as described above. And for UI design, you can take a screenshot of tutorials, or other elements in EteRNA main site pages, and the cut those up into a layout.
mat747 would be a great person for mockups then, since the work he has done is specific to main site.
Hope this helps!
All right, yes, that sounds good… I’ll try to do some mockups within the next week, as I have off. My dad suggested I go learn HTML (and CSS, I think), so I may go and do that…
Edit: Might do something on the wiki, actually.
It is great that you can work with your dad to learn more! I think you have an interest in understanding the details, and diving into the languages will teach you what is possible. have fun!
Chat on framework between Machine and I (plus some input from Brourd and Firedrake):
Machine, mind discussing some ideas I have for the EternaU structure? [6:54 PM]
machinelves: lfp6 what’s on your mind? [6:55 PM]
LFP6: Well, start from the front back, I suppose [6:56 PM]
LFP6: Course listings: Topic (ex. Eterna), topic area (ex. game tips), then course list, which can be filtered based on more specific areas [6:57 PM]
machinelves: please clarify terms “Topic” and “topic area” [6:58 PM]
LFP6: Topic is the most general, then topic area specifies more of the subtopic [6:59 PM]
LFP6: But not as specific, as say, boosting tips [6:59 PM]
machinelves: is this a nested menu? [7:00 PM]
machinelves: i.e. is course list a child of topic area, which itself is a child of topic? [7:00 PM]
LFP6: Here: http://prntscr.com/2thinb [7:01 PM]
machinelves: @lfp6 thanks! in that screenshot, is the 3rd level the ‘topic area’? ( home -> topic -> topic area -> course itself ) [7:05 PM]
LFP6: Yeah [7:05 PM]
LFP6: I forgot to mention home. [7:05 PM]
LFP6: The last one will just be a filter of level 3, as I mentioned [7:05 PM]
machinelves: lfp6 too many nested menus in cascading can be hard to navigate. maybe limit menu to home -> category / topic, and keep sub category / topic area & individual course links embedded in level 2 page [7:09 PM]
LFP6: @Machine: All right, I could live with that… Maybe use tabs, nested filters, or just go with 2 levels of catigorization? [7:11 PM]
machinelves: we want it to not be overwhelming, and while we have a small amount of content, we don’t need deep nesting [7:11 PM]
machinelves: i think one level of menu categorization is good, people are familiar with that layout [7:12 PM]
LFP6: @Machine: All right. [7:12 PM]
machinelves: then once you’re at ‘eterna’ or ‘science’ or ‘cooking’ or whatever, you see a page with subcategories / topic areas & individual course links on same page, or alternatively sub category / topic area section links to pages with individual course links. but we want to minimize total # of clicks to course access [7:14 PM]
LFP6: Yes [7:14 PM]
LFP6: Maybe each course would actually be the class series? [7:14 PM]
machinelves: probably i’d either nest the menu 3 levels with click -> page with course links + click -> made it to course page, or 2 level menu with click -> page with topic are & individual course links + click -> made it to course page [7:15 PM]
machinelves: *area [7:15 PM]
firedrake969: Khan Academy has 5 nested things [7:16 PM]
firedrake969: Well, four. [7:16 PM]
machinelves: khan has a nicer menu [7:16 PM]
firedrake969: Yeah [7:16 PM]
firedrake969: You do topic -> subtopic -> subsubtopic -> vido [7:16 PM]
firedrake969: video* [7:16 PM]
LFP6: Now, as for the course itself, here’s what I’m thinking: Overview/header (title, description, picture, teacher, original class date, link to class series if applicable), then the material (original chat, clean chat, formatted course, video, examples, pictures, code snippets, whatever else) [7:16 PM]
LFP6: However, for the chats/boiled lesson, I think it would be better not to use the current UI/UX. More in the style of this: http://prntscr.com/2thnzu [7:18 PM]
machinelves: ya, all those categories sound good to me [7:18 PM]
LFP6: Easier to read on a light, less busy and flash background [7:18 PM]
machinelves: that depends on the person. i have photosensitivity, the light on dark is easier for me personally. though it is true that light text on dark bkgrd is notoriously fuzzier than dark on light. they just found out it is because our brains perceive light objects as being larger in size! [7:20 PM]
machinelves: i find moving to a different UI palette confusing, i actually would have preferred not changing the wiki to traditional white bkgrd palette myself [7:21 PM]
Brourd: Well, Nando does have a tron version of the wiki [7:22 PM]
machinelves: but i understand your point [7:22 PM]
machinelves: hehe [7:22 PM]
LFP6: @Brourd: Hi [7:22 PM]
Brourd: Lots of Neon, dark blue. Not too bad [7:22 PM]
LFP6: lol [7:22 PM]
Brourd: LFP6: Hello. [7:22 PM]
machinelves: i’ll check it out! i remember he pushed for formatting order in the wiki so we could skin it [7:23 PM]
machinelves: to individual pleasing [7:23 PM]
Brourd: I think the only problem was something to do with the format while editing. [7:23 PM]
machinelves: ya if you specify text size instead of using headers, it breaks CSS of skin [7:24 PM]
Brourd: http://userstyles.org/styles/86678/et… [7:24 PM]
machinelves: tada! thanks brourd! [7:24 PM]
LFP6: So is that good with you machine? [7:28 PM]
machinelves: @lfp6 are you talking about main site design or a weebly instance, btw? [7:28 PM]
LFP6: Main site, was usig Weebly to show you because it’s a visual I already have [7:28 PM]
machinelves: kk thanks for clarification [7:28 PM]
machinelves: yes, great work thinking of content types, we’ll need all these included in the UI, and also good to know what info to start tracking for each class [7:29 PM]
machinelves: i’d add a post to forum of content types for class page & overview [7:30 PM]
firedrake969: Don’t think the EteRNA University should interfere much w/main site [7:31 PM]
LFP6: I think before we can think of content types, we need to figure out what content we have… [7:31 PM]
LFP6: Why not Drake? [7:32 PM]
machinelves: code snippets, screenshots, transcripts… these are content types [7:32 PM]
LFP6: Ooooh [7:32 PM]
LFP6: Yeah [7:32 PM]
firedrake969: The main site’s good as it is [7:32 PM]
firedrake969: and a puzzle menu doesn’t have much to do with a course list [7:32 PM]
LFP6: But what’s wrong with expanion? [7:32 PM]
firedrake969: I never said anything’s wrong with expansion [7:33 PM]
machinelves: the devs will be able to speak to what gets put in a menu and what gets nested in pages [7:33 PM]
firedrake969: Yeah, true [7:33 PM]
LFP6: What did you mean by your comment, Drake? [7:33 PM]
machinelves: topics & topic areas will be developed as we get class content [7:35 PM]
firedrake969: @LF Sorry, I meant the layout [7:37 PM]
firedrake969: Shouldn’t call for a site-wide revamp of layout [7:37 PM]
LFP6: Oh, no! [7:37 PM]
LFP6: Certainly not [7:37 PM]
machinelves: lfp6 i think fire means main site is not going to get an overhaul to look like weebly, that screenshot as you said was just to show me menu nesting [7:37 PM]
firedrake969: I misread the chat, oops [7:38 PM]
firedrake969: sorry [7:38 PM]
LFP6: @Machine: Yeah, I got that [7:38 PM]
LFP6: That’s fine [7:38 PM]
Ok, so boiled down:
Course list:
Topic (ex. Eterna, Cooking, Animation, Science…)
-Topic Area (ex. for Eterna: gameplay tips, analysis, scripting…)
-+Listing of class series (or individual class, if not in a series)
Course page:
Overview/header
-title
-description
-picture
-teacher
-original class date
-link to class series if applicable
Material
-original chat
-clean chat
-formatted course
-video
-examples
-pictures
-code snippets
-whatever else