Design and Layout Mock-ups...

Design and Layout Mock-ups...

Postby Pwolf » Sun Nov 21, 2010 3:48 pm

So ideas have been discussed, lets see them. Open up mspaint or photoshop, or write some HTML. Lets see what you want.


Go.
ImageImage
ImageImage
Like the AMV .Org App? Think about donating to help me make it better.
User avatar
Pwolf
Friendly Neighborhood Pwaffle
 
Joined: 03 May 2001
Location: Some where in California, I forgot :\

Re: Design and Layout Mock-ups...

Postby Phantasmagoriat » Fri Nov 26, 2010 2:17 am

Latest HTML Versions:
Members.Main Page: http://dl.dropbox.com/u/15771457/ReDesi ... nPage.html
AVTech Index Page: http://dl.dropbox.com/u/15771457/ReDesi ... Index.html

(Disclaimer: Although some links may connect to the org, the above html's are still just mock-ups...)

I was going to do this all with screenshots+GIMP, but I always wanted a reason to learn css/html :P
Then again I didn't code everything, I just stole Corran's Version and modified it.

Header:
Image


[Removed outdated picture of site Body. Refer to the links above]


-The real magic is in the menus, and you'll have to see the html version to see how it's organized
-The links are semi-functional (like the main menu should work), but other things like the tab links are
just there for show ^_^
-Everything should work in firefox. Other browsers may break some stuff. Then again, it's just a mock-up.
-For anyone who is actually coding the website, and is reading this, feel free to use this however you like,
although I'm new to css/html, so I wouldn't trust it especially the css which I just threw random lines into
Corran's version whenever I needed something. I would still code everything from scratch, but borrow
ideas and snippets of code here and there.

separate .zip folder
(You'll have to forgive me since I don't have hosting after geocities ended,
and I'm too lazy to search the web for good free hosting...)
DropBox seems to work pretty good

discuss.
or make your own mock-up.
or modify my version with html/css/photoshop.
or whatever.
But wait! I'm not done yet :dino:

(see next post)
Last edited by Phantasmagoriat on Sat Nov 27, 2010 6:13 am, edited 4 times in total.
Image
Org Profile | AMVGuide | Phan Picks! | THE424SHOW | YouTube | "Galactic Escape"

"Effort to Understand; Effort to be Understood; to See through Different Eyes."
User avatar
Phantasmagoriat
 
Joined: 06 Feb 2006
Status: ☁SteamPunked≈☂

Re: Design and Layout Mock-ups...

Postby Phantasmagoriat » Fri Nov 26, 2010 2:17 am

And this I actually coded from scratch because I never liked the guide index: (mini-rant about the guide index here)
Image

You can find this in the zip folder, or just click the AVTech link from the main page.
All the links are the same as the current index page, but organized... Linearly...

And I'm still not done...

(see next post)
Image
Org Profile | AMVGuide | Phan Picks! | THE424SHOW | YouTube | "Galactic Escape"

"Effort to Understand; Effort to be Understood; to See through Different Eyes."
User avatar
Phantasmagoriat
 
Joined: 06 Feb 2006
Status: ☁SteamPunked≈☂

Re: Design and Layout Mock-ups...

Postby Phantasmagoriat » Fri Nov 26, 2010 2:19 am

Spoiler :
...AND A MASSIVE TL;DR DESCRIPTION: :bzz2:

MENU-RELATED
-free up the main menu with a separate administrative header
-only 6 main menus (5-7 is a good target)
-"Profile" and "Edit Profile" are merged as "Org Profile"
-Added "Forum Profile" though it would be nice if the two were merged, but it might be weird combining php and html. IDK, I'm not a programmer.
-Bandwidth Usage is an administrative/account thing; perhaps it can show both usage as an Editor and as a Fan...
-"Search for AMVs Menu" is way more robust;
-I tried to put *everything* related to finding good amv's here, including the Top Lists section; I just think all of those places should be in one spot, instead of the Top Lists being way over on the right; honestly I almost missed it when I joined the site
-"Featured" section should be about 'what's hot' or what the community is watching at the moment
-I tried to physically divide the Top Lists more intuitively
-"Renamed Top Videos" to "Top Favorite AMVs" to distinguish AMV/Video/Anime more clearly
-Added Top Favorite Music. I figure that's the neglected gem of the abbreviation (AMV is not an acronym BTW...)
-Added Recommended AMVs. Another neglected gem in the search for AMVs, especially when it's in it's own subforum (same with this subforum I'm noticing... perhaps there should be a sticky at the bottom of the list of sticky's in General AMV that goes here [directly if possible so you don't have to click twice])
-Merged "Alert log" and "Modify Alerts" into a single link called "Alerts"; Modifying alerts should be possible from the new page, even if a simple link is added
-Removed an entire main menu by splitting the guides into their respective areas: Fan guides, Editor guides, and Site Help guides. I think it makes more sense this way; I mean, Fans don't need to see the AVTech guide, and you only want to see the "How to Use this Site" when you need Help. But a link to "All Guides" should still be maintained, and since it's under both "Fan Guides" and "Editor Guides", nobody is going to miss it.
-merged "video embedding" and "Edit AMV Info" into "AMV info." Theoretically, all of this could be integrated into your "Org Profile" page
-"Opinions Recieved" renamed to "Feedback Recieved" which is more accurate since this also includes, QCs, hits, favs, Stars... etc. Perhaps the DL information from the current "Edit AMV info" should be added to this page too, since I consider #DLs to be a form of feedback. I was thinking of a more broad term like "My AMV Statistics", but QCs and OPs aren't really statistics. Besides a separate page for full statistics could be added later.
-Added "Share Your Work" "Opinion Exchange" "Collaborate" to the Editors menu since that's really what AMVs is all about IMO. Yet currently when you make an AMV, you get no guidance as to what to do next. Seriously, what do you do? wait for someone to download your amv...? Yeah right. It might be alright for those brave souls that venture into the wilds of the forums by themselves, but most people need a little nudge. Just a small invitation as an excuse to get involved.
-Index layout for the Tech guide seems more intuitive in a Linear fashion. Click the link to view it.
-Schematic Diagram may be useful, if not interesting to look at...
-Community/Events gets it's own main menu with a bunch of stuff collapsed into it. It includes "everything that's happening", meaning, discussions in the forums, IRC, Interviews/Newsletters, and Contests. Anything where people are involved, including contributions to the community (Store/Donations).
-"AMV Contest List" is merged with "AMV Contest Forum" and renamed "AMV Contest Calendar".(The "AMV Contest List" was never really a list to begin with). I think the page should include the contests in calendar form, and list form, with links to the forum posts and websites.
-contemplate somehow integrating the calendar into the members.main page
-have an interface available for contest coordinators to make announcements on the main page with deadline notices, and contest winners. This will give users more of a reason to revisit the main page more often, instead of twiddling their thumbs in the forum. And a lot of people don't even visit the forum.
-Added "Links/AMV Studios" which would be a page dedicated to concentrate all locations on the internet related to AMVs. A compendium of sorts. Perhapse broken down into categories like: AMV distribution sites; Convention AMV contests; Studios; Blogs; Indie websites... Some sort of popularity-meter may be required to help organize the page. Ideally it would be put together by users, kind of like a wiki.
-Added "Organized Meetings" which is something that could be integrated with the AMV Calendar too. Just a thought, because it's not that easy to track down other AMVers in the same area as you, but if everyone can see the meeting location on the calendar, they'll know immediately if they can show up or not... again, it's just a thought.
-Possibly re-introduce the wiki
-Revived the Glossary by putting it in the Help menu. The Glossary would be awesome if it was wikified; because then anything can be added, not just technical stuff. If you hadn't noticed, this hobby has it's own subculture that even includes slang terms like roto. And abreviations like MEP, OP, QC, as well as a lot of internet slang terms like OP, ofc.. which can simply be linked to a place like urbandictionary.com
-"»" symbol used to denote links that have extra bodies of information, or lead away from the main site. It's a minor but useful visual queue.

WORK-AREA
-Tabbed Logs of frequently checked items: it's a better use of space; perhaps take it a step further and extend it full screen somehow to free up even more space for more robust tabular logs... dunno
-"You have given 1663 Star ratings, 8 Pending" I think this would be useful to include since it allows people to reflect on what they have downloaded, and keep track of their progress. I don't think average star rating should be visible on this page because people will start to compare current videos to their average, which will influence their score. But #ratings given
-Over a period of time, or certain # of downloads, the log cuts off, but it would be nice to have a separate, full, chronological record of all downloads and ratings
-"leave an opinion" button immediately when giving a star rating. I think we want to encourage OPs as much as possible. I think after leaving a QC people may feel like it's a waste of time to leave an OP covering stuff that they've already said. This allows people to skip straight to putting their thoughts in the OP.
-Drop-downs for Site-Announcements/Stats/Notices is fine, as long as updates are easy to notice;
-spiffy attention-grabbing stars
-If names/titles are too long, they go dot dot dot so that everything stays aligned and if possible, text can extend into virtual space much like the forms in QuickSearch so that the information is still present even if it gets cut off
-Familiar Blue highlights for new QC/OPs...
-Changed "Re-Watch Video" to just "Re-Watch" Brevity is good, as long as the message is still clear. Possibly change Opinion & Quick Comment to OP & QC, then add a tool-tip with explanation... maybe IDK... but it would make things less cluttered...


-SIDEBARS
--did you know (anything can go here... not just stuff about the site... Con statistics, historical AMV facts, famous editor quotes...[this may require users to input their favorite amv quotes, perhaps on their profile... and the ones used for the "did you know..." area would have to be hand-picked]. Stuff like this builds character for the site... and helps spread knowledge...)
--amv deadlines (visibility is key, and this will help cons get more entries, and it also gives people something to work towards)
--recent reviews (if someone went out of their way to leave an Op/review, it may be worth checking out, and the review acts like a preview for the video)
--latest poll (might be nice, maybe even if linked to a survey that keeps track of all sorts of statistics. It can even be used to build stats for the "did you know..." sidebar) We would need a convenient method for people to suggest poll questions.



GENERAL
-with a top-down menu, there is no need for a left menu. scrapped it to free some space.
-I left the width the same as the current website: 760px, but I suppose any width could be used...
-added tooltips to some links like in the banner. Ideally, all links should have something brief (I think the current banners are broken... or at least... they used to have tooltips)
-better location for QuickSearch; that area is prime real-estate, and it wasn't even getting used for anything
-If everything worked correctly, the cursor should shift focus to the QuickSearch when the page loads
-spiffy "► play" button for QuickSearch :p
-spiffy attention-grabbing star with inbox link. This should be very familiar to everyone, and just seems like a no-brainer to me.
-"why join?" link. We need one. A comprehensive list of the benefits of being a member; there are lots... and if we don't have this, nobody is going to bother digging through the site...
-site store/donation is more visible next to the logout button, while not being intrusive
-better logout/home locations
-better locations for everything...
-Distinction made between Home page, members.main page, and forum
-the "." left in MEMBERS.MAIN PAGE for familiarity
-Other page heading should be something like "Fans > Local Downloads" "Help > FAQ"
-Possibly add page descriptions for each of the main menus so the site feels more personal
-possibly allow the user to scale the width of the page somehow
-I think the Home Page (teh wut page? lol) should be the Header with Full Menus so that prospective members can see everything that the site offers; just disable all the links so people have to log in to use them. Beneath the header can be something like what we have now: AMV Spotlight/Announcements/login. Maybe include the global statistics, and maybe polish is up a bit with some graphics to look like more of a Splash Screen.

discuss.
or make your own mock-up.
or modify my version with html/css/photoshop.
or whatever.

/goes to bed
Image
Org Profile | AMVGuide | Phan Picks! | THE424SHOW | YouTube | "Galactic Escape"

"Effort to Understand; Effort to be Understood; to See through Different Eyes."
User avatar
Phantasmagoriat
 
Joined: 06 Feb 2006
Status: ☁SteamPunked≈☂

Re: Design and Layout Mock-ups...

Postby Enigma » Fri Nov 26, 2010 2:28 am

That doesn't look too bad Phan
User avatar
Enigma
That jolly ol' bastid
 
Joined: 07 Mar 2009
Location: California
Status: Free

Re: Design and Layout Mock-ups...

Postby Corran » Fri Nov 26, 2010 2:44 am

Phantasmagoriat wrote:(You'll have to forgive me since I don't have hosting after geocities ended,
and I'm too lazy to search the web for good free hosting...)


Dropbox, the service I used for hosting those files, is free for the first 2GB. It is primarily used for automatically syncing files across multiple computers but you can provide public links to files if you put them in a public folder.

(p.s. if you or others decide to try it for hosting mockups, might I suggest using my referral link. We would then both get an extra 250MB of storage. https://www.dropbox.com/referrals/NTI3N ... src=global )

RE: the mockup itself. It is 2am and I'll be fairly busy from now till next week so I can't say much but my first impression is that the design is busy. My eyes didn't want to focus in any one area. I really prefer three column layouts and something closer to 960 pixels for the width. http://www.w3schools.com/browsers/browsers_display.asp

I do like a few of the changes you are suggesting though. I may post in more detail sometime next week when if I get a chance...
Last edited by Corran on Fri Nov 26, 2010 11:40 am, edited 1 time in total.
User avatar
Corran
 
Joined: 14 Oct 2002

Show your hand

Postby trythil » Fri Nov 26, 2010 6:52 am

http://gitorious.org/a-m-v-org-v2
https://www.pivotaltracker.com/projects/136564

This is not a mockup: it is executable code.

Deployment will be done to http://org.ninjawedding.org whenever I get a chance to finish the two starred stories, which I do hope will be sooner rather than later.

You may submit patches, and I reserve the right to reject them. If people find this unfair, you have the option to fork the codebase.
T̶̸̡̨̙̪̪̖̙̝̬̱͚͈̺̜͖͎̮̳̝̭̟̗͇̫͍̝̠̹͉̑ͪ̊ͣ̌ͮ̅̽̈́ͪ̈́̎̆ͮ̂ͩ̑͋ͬ⃧ͦͭ̽̏̅̄̆̑ͩ̃̊⃧̍́̂ͨ̌͛ͤ̓ͤ͑́̕͘͜͡҉̴̧̢̨͖͈͍͚̖̬̝͕̲̦̤̲̥̩̟̲̥͙̫̪̺̳̰͈̖̺̝̥̲̳͔̻⃧ͫ̅ͧ̇̾̾͆ͩ͋̋̉̐̏̊⃧̓ͥ̐̍̏ͫ̈́̃ͬͣ̀͒̒̒̓⃧͐̊̓͌̆̐̿̄ͫ̎⃧͗̈́ͤ͋̌͛̓͂̌̋̆̅̕͟͝ͅͅ҉̴̢̯̲̬̩̻͕̟̹͕͍̟̙̗͈̲̻̮́⃧ͮͨͦ͌ͬ̏ͤ̍͘͜͟͜͢҉̙̺͕̼̣⃧̇͐͆͊ͨ̓ͭͦͪͧ͐̄̍̌̅̚͏̸̡̛͕̭̭̺͉̤̤̥̗́hͨ̄̏ͥ͒͋͗̾̒̒͏̴̡̢̢̧̬͎̜͓͎̱̻̜͙̼̦̺̦̳̬̳̞̻̬͇̜͕̜̘̲̞̳̦͈⃧̀̔̈̎͌̑̒̆̉̓⃧ͮ̃͂ͮ͂̇ͧ͌͒̎ͥ̉̈́̀᷅̆͗͋͐̀̚̚͟͢͢͜͡͏̴̵̶̶̸̵̷̸̵̴̢̨̛̛̬͕̬̘̭̩͉̞̜̞̯͙̦̟̙̦͔̙̺̪̗̱̘̺̪̳̫̞̩͙͓̠̱̮̫͔̲͚̞̪͕̻̬͍͖̱̺͚̠̱͇̥̞͔͔͓̥̦̼̮͕̩̪̲̳̖̙⃧͂ͬͫ̍̿̔̃̂ͤ̾⃧̽͂͒̃̎̿̓͛͐⃧̐̌͛̎̑̈́͋́ͬ̏͊̎̄⃧͑̌̈́ͤ̋̀ͨ⃧͑͐̾ͬ͒̓̄ͪͣ͆ͩͥ͗̾̉͋̌⃧̿ͭ͊̋͒̂̒̑ͦ̉͐ͮ̑ͦ̅ͨ͘͘̚̕͟͡͞͞͡ͅͅȋ̶̇̋̐ͤ͢҉̶̵̸̵̛̭̦̭͔̻̻̹̠͚̮̲̗͕̰̯̟͈͍̞̜̺͖͍̩̳̱̦͇⃧ͧ͊ͯͥ͛ͥͤͦ̆ͨ͆⃧̀̈̈ͫͥͤ̽͋͌̽̿̊̊ͨ͑ͭ̏͗̃⃧ͮ̇̂ͪ͒̈́ͨ̃͐͐̅̏ͬ̈ͮ⃧̈ͨ̓̂͋̑ͪͮͤ̒́̚̕͘̚͢͜͟͝ͅ͏̷̸̴̧̡̢͚̖̤͍͓͓̞͕̠̘͚͖̼̦͈̳̙̗̞͎̥͚̱̼̲̮͉̬̬̤͕̝̠͖͇̩͇͎̥̰̥̫̠̦̞̜̤̖̼͚⃧̅͛̍̉̈͌͛̀⃧̇͛ͦ͂͊̓̂̃͊ͯ̒̓⃧̋̋̍̋ͭ̾̒ͮ͌⃧̇̽̽̒ͬ̅ͪ̒̚̕̚̕͟͡͝͠ş̸̴̸̵̧̛̛̬͖̘̣̘̪͎̯̞̠͍̫̖̻̳͖̰̦̮͕̰͈̥͙͉͔̺̗͕̯̟̥̖̪̰̩̰̼̫̬̫̟̮̻͕̱̟̠̰̞̹̯̰̱̻̟̭̟̼͍̥̳̦̰᷿̓͊̏ͯ͛ͬ̉͒̔͂ͩ͛̃̈̍̉⃧ͨ́͌̀ͪ̽͗̓ͨͮͬ́⃧̓͒͛͑̈ͬͤͯ͆͒̈͐̀⃧́ͨ̂̂̎̑̎ͭ̀⃧ͤ͊͆̇̀̃̓ͪͧ̑͒̇̒ͨͤͫ̈̐ͣͧ̋̕̚̚͢͢͢͡͝͝͞ͅͅ͏̴̸̷̧̡̡̫̼̟̱͚͉̤͉̬̲̥̩̩̼̘̪͈̻̲̰͎̰̲̠̜̥̦͎͖̬̲͕̪̥̪̼̣̤̘̹̞͕̲᷊̜̺̬͍̠̫͓͇̪̭̦͖̪̼̥̦̙͓̮̦̺͕̼̦͚̮̰͕̙⃧͊ͣ̅̉̏ͮͫ̋̆͗͋̆⃧̑́̋̽ͧ͛ͪ̉͌̆ͣͭ̑ͩ̔ͤͩ̔̍̀͌̎̌̿͗ͭ̈̽̏ͤ̄̈́⃧̐̓̃̿̌̊̈́̊ͥ̄̔͋͂̀⃧̽ͩ̔͗ͧ̔ͯ̒ͪ̚̕͢͢͜͠ͅ ̄̒̋͌̅̚͏̷̡̡̛̯͙͉̭̠̗̗͖̥̬͓̩̦⃧̀̈́̆̾ͩ͐͑̆̈́ͧͥ̀͘ͅ҉̸̴̷̴̡̨̧̧̼͔͉̣͕̫̗̰̠̳͈͚̟̮̭͇̼̰̜̪͚̬͍̭̤̰̙͈̮̹͍̙̝̩̻͕̤̩̼͚͈͕̜̼̮͇̘͙̺͕͔̭̣͚̫̻͔͖̖͇̣̦̮̘̖̳͇̙̮⃧ͧ̏͒̐ͥ͛̄ͥ̒̎̊ͧ̏̐ͧ͋͌̅⃧ͦͫ̅̍͌̒̏̍̏͛ͮͦͤ͐⃧̂͂̑ͫͥ́⃧͊ͯ̓̉ͧ̓̿ͫ̎͗̑ͥ̆̽̆ͨ̌ͥ́⃧̽͋̎̌ͨͭ̌̉́̚͘̚̚͜͢͢͠͠͝͡ͅ͏̵̧̧̡̡̡̛̮̠͙͖̖̱̹̞̫̜̫͉̥̙͉̝͉̭͇̳͇͔͓͓̩̰̳͓̜̻̘̬⃧̀̾͑͊͑ͯ͑ͨͤ̀⃧͊͌ͫ̒ͮ͌̑͌̇̀̕ͅͅi̷̴̴̶̷̴̵̡̡̛̺͎̪͇̗̺͖̭̻͇̳̝̹͓͙̹̭͓̰͔̯̣̺̹̜̠̮̦̬͍̯̮̜̱̜̩͈̗͙̖͚̰̩͇͕̥͙̫̱̪͇̙̩͈᷂͕̙̘̼̰͎̳̹̼͈̘̗͗ͤͩ̇̒̍̍ͭͥ̓⃧̂ͭ̆̂̒͆̀ͭ͆ͦ̀ͦ̋̓ͮ⃧ͪͩͬ̍͛ͫ͐ͭͨ͌ͫͪ̀᷁͋̿ͬ̓̉͛́́̌̓ͩͫ̓͋̃ͧ͒́́⃧ͧ̋ͧ̓̑ͤ̽ͩ̓ͥͭ̓͊͋͑̌͋́͂⃧̂͊ͪͬ̏̿͒̿̾̊ͤͩ͐͋̏̑̂̒ͫͮ͐̎͌̄̄̉̍̽̉̊́̿̒̄⃧͊͌͆̀͛ͧ̌ͬ̌̀̿͛ͧ̈́̌̉ͤ̄̀͘͘̕͘͟͟͢͝͡͝͝͡͡ͅͅ҉̷̣̯͎̳̥̳̲̱̰̱̺͖̹͎͉̪⃧̉ͮ̈̾̄̕͢ͅ͏̗̞̦̩̪͔̩⃧̿̈́͑ͯ̉ͦ͊̍͟ͅ͏̷̴͍͕͙͙̩̥̩͕̘͈͙͙⃧ͭ̓̈̏̔̎̓͊̚͞s̶̵̵̵̸̵̵̢̨̡̧̨̢̡̨̧̛̛̫̭̥̘̰̗̩̪̲̯͙̟̻̦̳̹̭̦̫̞̩̯̣̹̪̠̟̝̦̙͕̥͚̱͎̰̪̥̲̩͎̣̯̗̜̯͈͖̻̠̩͓̜͈͕̹̺̩͈̮̠̮͇̻̺̹̮̞̰̮̦͉͇̘̦̲̰͎̙͓͎͖͓̜̟͍̬̬̞̘̖̹̮̤̪̘̜̖̠̳̪ͩ̽̔͒ͤͭ̉͆ͨ͗̇̋⃧̎̄ͯ͑͂̑̌̉̌͐ͣ⃧͗́̎ͣͭͧͯ͛̒⃧ͩ̊͆ͭͣ̅⃧ͤͬ̃̾ͦͬͥ̑ͩͫ̎ͨ̀̓͒̏́̀⃧ͤ̍ͨͣ⃧̅̃͛ͤͨ̌ͮͦ͑ͮ͌̈́ͦ̀⃧͆ͦ̅͛̓⃧ͯͪ̿̉̒ͥ̒̕͘͘̚̚͟͟͢͢͞͡͡͠͠͡ͅͅͅ ̴̵̴̢̢̨̧͈̜͇̤͈̩̲̹͕̲̞̫̹̼̭͎̪̘̲̼̫̹̮͙͈̰͚̣̰̞̼̜̼̞͙̯̟͕̭͇͔̲̰̳̪̳̘̫̼͍̋ͦ̎̋̊̆̃̊ͥ̔⃧̆̐͌̏̀⃧̾̀ͤͬ͂̌ͣͣ͂̉ͮͬ⃧͊̏̌͂ͣ̒͑͑̈́ͩͭ͑́ͪ̌ͦ⃧̋̀̀ͣͧͩͣͭͣ̚͟͢͠͠͡ͅ҉̷̷̡̮͓̥̩̲̣̥̮̞̱̼͔͔͇̺̬̠̬̥͕̦̺̳̤̥̟̭̲̳͈̟͖⃧͂̆̀͗ͦ͛̾̓͌͒̅̆̊ͬ̍̽͛̐⃧ͩ̎̀̆̐ͭ̂ͭ͑ͤͪ̀᷉͌̐͆̓̅͗̊ͤ̓ͥͣͫ̾̚̚͞͝͝҉̢̢̛̖͍̗͇͚̘̭̠̦̖͈͎̩̭̖̩̹͍̼̝̥̱̳⃧͌͌͌̈́⃧̇ͦͮͮ̚̚͟a̛̲̫͈͇͇͙͚̥͋̅ͫ̽̍̀ͬͭͨ́ͭͩ̍̍ͥͣ̑̀⃧̽̓ͨͧ̏͘͢͝͝͏̵̢̭̰̱̤̣̳̣̥̪̪̱̘͖͎̟̱̭́⃧͋̔̇͗̋͆ͤ͏̷̨̟̙̝͈̬̟⃧̑̂̍ͣ͗ͮ̑̑̉̅ͬ̄͛̽ͥ̿̀͡͏̷̵̴̵̴̴̢̡̧̙̹͎̮̯̺͖͈̲̞̭͇̫̘̝̰͓͙͎̭͓̭̜̳̩̱̘̜̣͖̘̰̹̼̜͎̲̹̣̺͕͉͕̺̞̻̟᷂̳̘̱͈̱̜͎̞̟̥͍̦̹̤̙̱̭̬͕̗̯⃧̉͑̓ͮ͗ͭͣ͂̈́͆⃧̋͆͋ͥ̏ͬͩ͋͑ͨ⃧ͩͫ͗͋̅̂̏ͤ͛̾ͧ̇̓̌̅ͭ⃧ͭ̽ͨͧͣͭ̏̔ͦ̀⃧͛ͮͤͦ̐ͣ́̎͗̅͌̿̒́͆ͩ͛̿̏̕͘͜͜͡͡͠ͅͅͅͅ ̊̒̒̌ͩ̅͏̷̷̳͔̻͕͉̖̲̰̙̪̟͚⃧̓̀̌ͫ҉̴̷̵̡̢͓̝̪̣͈̥̲̫̬̺̭͚̝̟̬̻̫͙̹̖͖͕̤͚̱̣̮̞̣̹⃧͒̉ͯ̌͌ͭ̀⃧̐̆͛̆⃧͂ͭͨ̈́ͪ̂̒͛͊̿̊ͭ̌́͜͝͝ͅͅ͏̸͔̳̪̦̰͙̬̣͙̳͉̩̟͔̯̗̗̩̭̯̰͕⃧ͧ̆͌͂ͬͧ̃ͥ̿ͧ̍ͮ͛̊̍͂⃧͑͗̅ͩͮͨ̔̀͐̒̿͒̎̄̊̔̋ͬ͜҉̷̡̢̡͍͔̣̲͉͚̭͙̪̞͇̱͈̹̯̝̭̟̝⃧͒̑ͫ̆̌̾ͣ͂ͮ̏͗̂̊̾̐ͤ͂͠͏̷̡̱̹̙͎̙̞̰̞̲̩̩̭͇̹̖̦̖̪͚͓͔̜̤͖͉͚͕̳̩͇̰⃧͂ͥͧ̋̐b̔̍̄ͮ̿̆͌͒̀ͯ͒͆͋͑̿̊̕͠͞҉͏͇̝̪̼̦̻̜̟̬̼̬͍̥̞̼̮̯⃧ͦͮ̊̒ͮ̿ͭ̃ͮͬ⃧̋͂͗ͫ͐̌̀̐̈́̓̒̍͢ͅ҉̷̵̷̢̨͎͙̟̦͖͚̲̻̲̦̱̜̘͓̫̞̹͙̣̗̖̭̹̫̺̻͎⃧ͨ͊͗̉̑ͫ̅̓ͣ̌ͧ̄̆̎̐̑ͤͣ̀⃧ͪ͑̾̈́⃧ͮ̍̓̏̊̆̀ͯͮ̍̂̆̏̕͜͡͡ͅͅ҉̹̜̱̞͓̤̰̙̮̥͓̺⃧̑̄ͫͭ̑҉̛҉̵̛̗̙̦̰͇̼̭͕̩̥͓̲͕̦̥͍̤̤͔̯̬̮͉͚͖⃧ͩ̅ͧͪ⃧́̏͗̅̏̀́͗ͧͤ̑͘̚͘͝҉͟͏͚͍͈̩̤̼̞̰̰̹̥̟l̏̔̑͆҉̛́͏̷̸̢̨̨̛̛̻͚͕̭̘͚͔̮̼̮̲̳̱̠̪͍̦͕̝̘̗̯̲͕̤̱̗̖̳̖̬̫̦̬̥̦͙̝̰̩̳͚͈̬̞̠̗̪̩̙̼̺͖͚͇͚⃧̅̏͊͆̂̀⃧͌́̇͊̏͑̃ͥ̀⃧̈̈́ͩͦͨ⃧ͦ͆̎ͭͭ̋ͧ́⃧̒ͫ̿̿ͭ̿͂̕͢͜͜͟͠͡ͅͅ҉̸̴̸̧̧̡̞̱̜͇̘͓͖͚̻͈̣̘͉̟̼͉̫̜̫͖̬͓̻͓⃧̎͂ͩ̒ͧ͒̈ͤͬ̔̓̅̀⃧ͩ͆ͤ̈͋̓ͤ̓͂̿ͯͮ͝ͅ҉̧̹͖̮̺̪̹̦̺͈͇̪̹̻͈̲̹͇̮⃧̊͋̈́͗ͦ̓̌̅҉̜͍̳̝̺̖͈͔̘̗̙̻͙̣͔͖̟̕͢o̸̡̡̢̥͓̙̺̘̝̯̜̯͈̥͈̳̗̘͈̘͓͚̱̜͍̣̝̬̺͔̙͙̼̙̤͍͖̞̠̻̝̳̣͓̤͔̣̻̫̯͉̜̻̗̙̤̯̜͚̙͓͉̝̮̗̣̝̫̗̭ͭ̔̋ͤͥ⃧̋ͮͦͮ⃧ͣ̌̉̀͗͆̎̓̈́ͦ͊⃧ͧ͑͂̍ͨ͆ͩ́⃧ͫͮͨͩ̐ͫ͋̂͌̀̀̂̚̕͢͜͢͞͝͠҉̷̶҉̴̶̧̢̙̯̪̙͎͉̬͖̘̺̫⃧ͨ͑̃͐̀́ͩ⃧ͨͩ̈́̈ͤ̉́̏͑̓̍͋͋̈́̑̈́̋͢͟͜͡ͅ͏̵̷̨̡̛̻͍͚̠̳̮̪̭̦̳̭̞̣̤͚̭̮̰̰͉͙̼͙̤͔͍͔̖̩͙̭̺͕͓⃧̈́̃ͧ̾ͬͥ͂̉̉͗̅͐͒⃧̽͌ͭ̀͘͞ͅç̵̞̳̣̟̹̬̣͇̖̘̙̺͎̳̦̥̭̦̟̰͔̲̣͓̙̩̦̤̬̆̊ͭ̌̀⃧ͨ̓̌ͬ̊ͪ̌̀⃧̀ͩ̔̓̿ͨͫ̊̽͡҉̷̛͓͎̭̝̼̜̫̘́⃧̎̆ͮ̓̏̅ͥ̀̄͂̎̏̏⃧̓͆͐ͫ̅̋͑̄̂͊ͩ̈́ͬ̕̕͟ͅ͏҉̶̢͍̣͔̙̼̩̙̫̭̬̥͙̫̱̙̻͉̟̣͕̥̜̯̝͉̙̥͓̻̻͍̳͈̳̦̤̦̤̘͈̖̳̦⃧̏̀͗̈̔ͫ̓̆̿͆̀̽̐̓͊̆⃧ͤ̎̈͑̀̒ͣ̋̉̉̌̃ͨ̃͋ͣ⃧̊̀ͩ̃̐͊̚͘͟͡͡ͅͅ҉̨̦̭̱͎̼͙̜̩̮̤̠͚͓̬̮͖̪⃧ͣ͆̐ͫ̅ͨ͗ͣ̋͏̷̡̺̗̮̥̩͍͈̦̩͖̱͚̺̼̭̗́k̴̷̷̶̵̷̛͖͙̜̞̼͔̘̙͓̙̝̰̳̮͉̲̮̩̬̠̘̟͓̩͇̣̫͇̗̤͇̟̮͖̫̗͓̺̬̱̳͔͔̜̙̙͉̾̽͐̐̐͆̄ͣ̇̋̈́̇ͫ́͗⃧ͥͪͣ͒̾ͦ͂⃧̿̃͐̉͑̓ͭ̽̂ͧ̽̊́᷉͒ͥ͗̈́⃧̽̑̑̒͂̾̌ͪͦ̍́̓̽͛ͯ̓̕̚͟ͅ͏̷͈̰̟̬̙͓͖̳̻̬͖̣͓̹͙̙͚̝̮̱̮̟͉⃧ͪ̑̒̀̀⃧ͣ̿̓̽̚͠ͅ҉̷̶̶̢̡̢̢͙̙̯̱̹̮̪̜̮̰̙͖̩̳͇̬͓͓̣̰̮̙̘̣̪̳̖̱⃧͋̓͗̃̎͊ͨ̊̎̍̓ͩ̀̔͆̓͋͛́⃧́͛͗ͪ͡͠͝ͅͅ҉̙̙̤̻̙̺̬̟̜̪̲͖̩̜̣̯̗̗͍̭̣̮͕̺͉̩̞̼͔̬̦̖̯⃧̿͐̒̀ͨ̇͐ͥ̓ͬ̑̅̃̑͢͢ ̡̡̛̟̝̬͙̩̹̻̟̱̒ͫ͆̽͛ͨ͊͌ͤ̽⃧ͤ̄̉̅ͧ̇͗ͪ͛͑͗̆̂̕͟͞҉̸̵͉̭͓̹̯̮̝͚̙̼̜̘̰̝̖͔̮̝̱͈̭͚͚̠̜̗̱͚̝̣̩͓⃧ͬ̋̊͋̆́ͨͯͫ̐͛⃧ͩ̾ͤ̃̄͂̊̿̐́́⃧ͥͥ̐͋̉̔̾̚̕͜͞͞͡ͅ͏̴̵̵̡̢̨̛̝̜̜͔̘̯͍͔͖̲̻͎̥̺͔͙͍̲̤͓̘̘̱̥̻̳̜͉̣⃧ͯ̅͐͗̊⃧ͧͯ̈⃧̽͌ͦͭ̊̑̈́̿͆ͣ̐ͮͤͧ̆̑̈̾̑̚̕͜͞҉̢̢̢̧̨̳͓̬̮̰̥̱̞̜̻̮̤͕͚̥̼̝̹̫̤̣͍⃧̽̒͐ͯ̍͋͑ͬ̅̈͗̈́̈́͑́̕͠o̶ͦͪͫ̾̆ͬ͋ͭ͏̵̢̟͕̮̣̭̩͉̗͍̠͍̱̠̜̭̝̀⃧ͩͨ̓ͨ͋͌̑͐̎ͨͭͦ͠҉̷̛͈͉̳̦̞̯̟͙̫̥̤̤̬̹̜̦̺̪͔͈̮̳̠̬̥̗⃧ͭ́ͮͮ͂ͦͫ͊ͤ̾̓ͯͧ̒ͩͧ̈̀⃧ͫͪ̏̎̇́̈́̐ͪ̔ͩ̽̿̀⃧̒ͦͥ͋ͮ̿͑̅́̚̕͢͞ͅ҉̷̵̧̨̨̡̢̛͇̰̠̩̯̯͙͈̱̙̜̥̟͚̖̣̘̖̭͍̺̖͚̙̣̠͖͓͖̯̰̰̜̲̫͖̣͖̫̗̩̭̫̪̗̩͇̦̳̼̯̥͓̙̱͈̹̹͍̹̠̗̼̙͉͔̳᷅͐͒̐̎ͥ́͑̏ͭ͋́͂̀⃧ͧ͗̅̌̊͗͌⃧ͧ̓̆̊͆ͧ̎̓⃧͌ͨ̀̅̃̐̆̄̈̎ͫͮ⃧͐̊ͮ͐̄̏ͧ́̕͘̚̚̚͜͝͠͠ͅͅͅf̶̶̵̶͕̤̲̗͙̮͍̣̟̤͍͇͉͖̮̻͕̱̖͉̹͋̋̃̄́͒́⃧ͣ͛ͩ͗ͣ̆ͬ͛͑̋̌ͫ͛́⃧̈̈ͯ̓᷁͊́͋̈͘͟͝ͅ͏̶̴̶̴̴̶̷̴̡̨̢̨̛̛̯̮̝͍̟̭͓̳̥͔͕̝̳̭̬͍̞͔͚̗̥͙̫̭̣̳̱̭͔̠͙̱͎̹̻̮͇͙̗̣̩̙͎͕͚̭̞̝̩̘̩͖̯͖̞̺͙̻̺̻̣͚̯̱̖̠̰̘͎⃧̃̿͊͌ͤ̍͒ͥͫͬ́ͩ̏͋̽̍̂⃧͐̄̾ͬͫͩ̃ͨ̀̽̔̾̂̔ͥ⃧ͬͤ͋͗͑̇̊ͫͥͣ⃧͊̓́͊̉͋̈́ͭͤ͋ͧͮ̈͗̌⃧͒ͤ̽ͩ⃧̊̓ͦͨ́̚̕̚̕͢͢͜͞͡͝͡͠ͅͅͅͅ ̴̢̡̧̧̨̛̳͉̠̹͚̰͙̺̺̠͉̣͓͚̝̺̤͇̼͔̬̮̬̖̬̰͇̬̭̹̩̤͎̗̖̰̟̦͚͖͉̰̘̪̃ͣ̀͋ͩ͛ͨ⃧̓̔͋͂̂ͧ͊͆̅̇̂ͤ͐ͥ̔͑⃧̍̍̄̒ͣ⃧̌̎͆̓͐͐̐̋̉͋̄ͦ̔́⃧ͯ͒̐̒͋͆̑ͧ̿̓͊ͩ̈̀̚̕̚͢͢͞͠ͅ҉̷̵̸̷̨̧̛̛̥͖̳͖̻̬̭̺̘͔͍͎͈͍̬̼̻̹̹̣͇̗͇̭͙̰̪͖̞̤̠̰̟̗͎̝̥̘͉͉̺͓͍̩̱̗̞͓̳̯̺̦⃧͑ͪ̊̽̒͆̌̃́̇ͭ͆͆̋ͩͨ⃧ͪ̉ͮͯ̎͊̅̿̉̿ͬͭ͗̔⃧͋̀͗͒̌ͨ̽̍̉⃧͛̊̊͛͌̇̄͆ͧͩ͜͟͢͟͝͞͠ͅͅͅt̸̵̷̝̼̤̦̼͔̦̙͎͍̜͙͉̰̙ͯͣ͐ͭͣ͒⃧͆̃ͯͩͥ̓̓̈́̕͡ͅ҉̸̹̹̟̫̰̦͔̦̦⃧̄͊̉̅̚͜͝͏̵̬̳͚͈͕͙͚⃧̆̈̌̿̋ͫ̉͂͂̃̓̄̊͡͏̡̡̛̦̠̰̥̳̩̰̤̼̠̞̮̙̮͙̻̳̪͇̣͚͎̺̬̳̬̥̙̙͕͎̦̼̥̫̙͉̟̖̦̱͇͇͕̩͙̜̥̰̻͕̻̀⃧̾ͣ͌́͂̃̽̀ͧ̋͌̓͗ͣ́⃧̏͛̆̒̂⃧̓̽̊͋͐̎̌͗͌̆́ͩ̌ͩ͐̊̆⃧̄ͦ̀̄̓ͪ̑ͪ̈́ͫ̈̕̚̚͜͜͢͠͡҉̸̢̫͇͎͕̠͇̟̥͎̬͈͈̰̮̬͕̱̙̖͖̯̥̼͉͎͓̘⃧ͬͦͯ̾̾̋̎̎̋ͮ͛ͫ͐e̸̷̷̷̶̢̧̧̛͇̩̻͖̖͖̜̟̹̣̥̭̣̖͖̺̮͓͙̹͓̩͇̜̭̼͉̤̙͓̬̻̰̞̩̹̮ͮͫ͊̒ͧ̐̀̉⃧ͣͫ̂͐ͫ̑͊̓̂͊ͭ̂̆̑⃧̿̽ͯ̐ͭ̉̽ͤͩ⃧͗͑̊͊́ͩͭͩ̓̉ͪ͆⃧ͫ͗̇͆ͬͧ̌͗̉ͧ̐̐̚̚̕̕͟͜͝͡ͅͅͅ͏̵̶̷̸̷̵̢̨̢̡͙̺̳̝̖̳̭͍̬̭̪̦̘͎̩̜͎̯̱̱̦̼̩̝̹̼͔̰̬̘̼̝̹̘̻͙̹̣̦̘̬͍͉̣̼̤̬͇͓̱̘̖̘̺̼⃧ͮ͌ͥ̓̉ͩ͆ͫ͛̃̔⃧̿̒ͩͦ́̽᷃̂ͣͭ̈ͥ͌̒͆ͯͦ̏̀̊ͬ̆̿⃧͛̓͐̎͑ͧ̍⃧̒ͩ̍ͩ̊̌̄ͤ̊̀̚͘͟͟͟͡͝͠ͅͅx̵̸̵̢͕̞̤͔̩͈̩̠̜̗̙̭̟̟ͥ̆ͦ̆͐̔͊̃⃧ͦ́̑ͫ͐ͦ̒̾⃧̾̿̽̂ͭ͐͋͗͗͐͛́̐̕͟͠҉̦̣̺̦͙̹̩̣̯̻̙̳͇̹̹͓͔̼̀⃧̇͒̅̉ͪ̀̍̏̈́̀͗ͦͨͥ͆́͢͠҉̸̨̧̢̥̟̺̝̰͎̗̤̝̻̭͓̼͈̬̟̲̼̜̭͉̰̖̹͍̦͚̭͇̪̘͔͇̙͇͔̮͇̥͔͙̤̘͕̘̬̼̥̖̳̯͇̗͉͇̰̜̪̜̻͔̟̭͖͓͇͎̲⃧̊͌̾̋̿̾͐̄̋̊ͥ̿͒̆̍⃧̂̽̃ͦ̓⃧̉̾ͯ͂͑͊⃧̑̓̍ͫ̅ͦ̇̏̑͊̍̈́̃ͩ͑̈́̾̊⃧͋̇̎ͣ͜͟͠͡͡ͅͅͅt̷̵̷̵̘̼̬͔̝̙̰̪͕͚͇̳̳͕̲͖͕ͪͩ̽̽̐͆ͭ̅̍̏ͥ͋͗͂ͬͫ⃧ͦ̅͂̇̾ͣ́̑̿ͪ͆͂ͯ̐̾̂ͧ͋̌⃧͐ͦ͐̓ͤ̏̎̎̒͘̕͢͡ͅ҉̵̴̶̢̡̭̝̫͙̼̬̱̱͈̠͔̹̗͙̞̳̥̫̪̟͉̻̫̩̗̬̼̞̞̫⃧͑̊̔̌ͬ̂̄ͬ̔̂̋̃ͭ́⃧̄̂͋̒͆ͤ͗͑ͩ̅ͩ⃧̾̎̈́̈́̍̆͒̕͟͢͝͏̶̵̴̸̛̛̛̼̫̮̳̟̯͚͉̹͍̝͇̰̳̪̦̮͕̫̜̺͖͇̖̣̣͔̥̹̯̥͇͕͙̞̜͕̦͉̭̹⃧̊̽̽ͣͩ̅͂ͣͭͮ̆͂͊⃧ͮͭ͂̾̎͒̀⃧ͭ̄͆̄͋͌͑̌͆̆͊̀́̚̚̚͢͞ͅ ̷̸̡̧̡̤̦̰͙̫̥̥͈̞͓̠͉͕̩͖̼̺̤̭̖͉̠̥̙͎̪̞̤̣͍̞̱͙͖̪̂ͮ̍̿ͥ̄͒̽͋̈ͫͭ́̅⃧͛̃̎͆̂ͦ̑̓̿̋⃧̐͐ͮ̊́̍ͧͣ⃧͌̐̈́͊̐͟͝͝҉̷̶̡̧̡̢̨̛͕͎̼̺̯̬̬̹̳̯̭̫̘̫̥̳͉̖͉͓̜̝̙̳̗̪̗̞̳̫̘͈̤̱̩̫̖͔̩̻͍͍̲̞̙͖̮͈͇̰̹͍͔̗̣́⃧̑͌̇͌̒͆̿⃧̌͂ͮ͑̋̿̀⃧͌͛ͭ̋ͥ̈͂ͣ̀͗͛⃧̎͑́ͩ͛ͬͯ̅͌ͫ̓͐̒̉⃧ͫͭͦ̈́́̎̀͌ͭ̿̌̄͊̌̂̈̐̽̕͜͠͠ͅ͏̲̬͕̖̙̻͇̺̻̬̙͔̱̭̱̩͡ͅͅţ̸̶̸̸̷̸̨̨̧̧̨̧̧̛̛̦͍͚͚̲̙̞̼̬̦̻̝̳̱͎̯̼͓͓͙͉͉̱̲̠͕̤̘͓͍̼̟̣͓̙̺̙̥̭̜̯̝̱̺̤̪̘͍̲̩̯͖̺̲̻͙̱̬̫̝̺̤̠̲̼̥̜͉̖̥̳̪̙̙̻̣͉̪͔͇͇̰͇̠̯̦̜͈͉̞̼̯͉̺̯̘̰̬̙̰̞̮͖̻̩̳̲͎̱̥̰̞͉̣̪̹̥͙̤̝͉̝̙͔̣͕̝̝̞̦͖̏̓̎ͩ⃧ͥ̉͛ͤͫ̓͐̀̉̔⃧̀̅̍̏̾ͬ̓̎͂͌ͤ̌ͬ̈ͭ᷆̑̃͌͋̉̿̏͐͛̒̀̃̋̍́⃧͌̇̃̈͊̊̅̽̆̒͂⃧ͬ̌̾̂̆̆ͨ͐̑ͬͧ͛̅͗̎̈́͐ͩͨ⃧̈ͣ͆ͪͤ͌̊̓ͭ̏⃧͂͊̋̈́͂̃̿͒ͮ⃧ͭ̿͒ͮ̾̃̓̑ͫ̅͌̈⃧̋́ͧ̊ͧ̑ͩ̀ͬ͒̇̈̈́̾̎̕̕͢͢͢͠͠͡͠͝͠ͅͅͅͅḩ̶̷̸̴̵̵̸̸̗̖͍͖̫̳̤̠̪͎̬̟͍̼͉̪̰̖͍̹̺̠͈̳̳̼̥̼̝͓͓͚̟͉̦͔͕̲͚̯̘̦̥̖̠̞̯͈̪̰͍̙͉͙̗̯͉̝̱̗͖͍͖̫̯͉͖̰̯̣̲̖ͬͩͮ̽ͨ̽̌͛ͥ̔̽̆ͭ̑ͭ⃧́ͥ͋ͥ͊̊⃧̈́̓͂̍̉ͤ́̽̓ͨ⃧͑͆̓͒⃧̾͒ͨͤ͒̽͊̋⃧̎̿ͥͤͪ͌͛ͩ̊ͯ͑͆̑͊⃧ͧͯ̉̎ͨ̇͆ͭͨ̓́̈̅̀⃧̈̋̒̀ͫ̆̉̀͆̊̈̏͒ͦ̋ͭ̈͘̚͟͜͟͜͜͜͢͡͡͡͞͠͝ͅͅ͏̡̛͎̪͉̤̖̜͈̝͇̠̯̲͎̼̻͇̱̬̝͈̗͚͚͈̗͍̺̟̰̣͔̜⃧͂̃̄̄̄͒̀ͬͮ̽̀͛̂̄̉̄̋̂͜͝ȃ̵̶̵̡̛͖̫̪͔̘̹͉̣̻̠̠̪̙̘̥̼̳̣̥͍̝̭͔̟̘̜͉̟̻̬͈̻̞͉̻̒̈ͣ̓̉́͌ͧ̄̀⃧̂̆̈͌̍̀̒̐⃧͗ͨͪͩͮͥ̇͆̆̽̎̉̃̋̉͊̋̂⃧̀̍͋͋̅͑͗ͯ̇̽̏̿̈̾ͣͨ͘̚͞͝҉̸̷̶̸̡̧̧̜̖̼̟̜̞͕̥̖͎̞̯̱̭̝͎̪͚͓̙͈̻̖͕̦̝̹̰̫̹͓͎̹̞̩̥͔̠̲̼̼̟͓̭̳̻̞͎͍̫̪̩̪̭̳̪̯͓̻͎͕͇͔̜̦̘̫̠⃧͑̿̃̾̌͗͂̑ͯ͆̒͊̉̽͛ͬ⃧͂̒̂̏ͭͦ̐ͥ͋͛ͨ͑̈͆ͫ⃧ͪͧ̈͛⃧ͯ͋̃ͬ͒͂͗̒͊̉̅́͌̅͂ͧ͗⃧́͐̊͗͂ͣ̊ͦ̒̀̚͘͜͜͜͜͞͡͠͝ͅͅt̢̃̋̑ͥ̒̌̿̅̓̒̍̏̉ͮ͏̸̸̵̵̵̴̸̧̛̛̟̦̖̥͇̗̦̹̫̱̳̭̰͚̪͈̭̺̙̗͎͔̤͙͉̠͙̱͖̥̜̜͔̟̰͉̟͔̣̠̖̺̥̥̠̙̞̯̯͖͉͇̻̲̫̥͔͇̻͈͙͈̟̬͖͔̞̗̫̱̟̪̜̳͕͍̻̤͉͔̫̰͓͈̱̳̬̰̘͔̭̝͕͙̙̣̖͚̖̺͇̯̬̤̜̟̻̘͍̮̞̠͔⃧̑̅̀ͥ̓͋ͧͨͥ͐⃧̐̄͐̑̋̓͑̋̅ͥ̃ͭ̐̈́̃ͮ⃧́͗̇̒̓̔ͪ̈́͌͊⃧̋ͥ̒̈́ͫͮ̔ͨ͐⃧͂̏̒̈̈́⃧̈́̉ͭͣ̅̉̒̄͐͂̿́⃧͂̆̏ͧ̔̏̌⃧̔ͫ̎͗́̕͘̚͘̕͢͟͟͟͟͝͞͠͝͝͠ͅͅͅͅ ̛̥̮̩̖̗̭̞̰̰̩̗ͪ̆ͤͨ̈́ͥͧ̀ͧ͊͒ͤ͂ͧ̉ͫ⃧̇̏̉͋̾̑́̀̓͒ͯ̾ͣ̀ͨͨ̏͟͠͏͏̵̵̨̨̨̺͚̣̯̜̦̠͓̲̫̰̹̮͚̹̫͙͇̜̟͈̘͈̹͉̰̭͇⃧̔͂̍̐̈ͣ̍ͪ͋̑̒́̓̂⃧̆͒ͬ̐̊̐̅ͦ̿͆́⃧̓͑̇ͨͭ̚͏̭͕͔̜̯̖̮͖̣̞̰⃧̇ͭͪ̉̌̓̊҉̶̸̯͓͈͕̬̠̯͓͖̱͚͉͈̹̳͍̻͍̘͕̻᷊⃧̉ͭͨͨ̌̏̅̊̎͋̏͛͆̿̅ͮ͂͟͝͏̵҉̷̷̧̪̬̖̫͔̼̲̫̗͓̫̫̙̦̞̞̬̼͖⃧͐ͩ̐͑̎̀ͧ̍͂͏̴̢͉̬̰͙̭͖̙̖̰͈̱͈͉͓̠͍̗̟̲͓̜̝̰̜̥⃧͌͊ͮ̀ͬ̽́̓ͬ̀ͮ̈̎̐͛̏͌́̚͝ͅc̷̵̶̵̴̸̷̴̡̢̨̡̛̛̹͙̤̠̦͍͍̥͍̫͕̘̠̹͍̭͉̖̘͖̪̺̻͉̬̪̙̰̞̖͇̖̮̠̣̼̣̭̭͉̩̜̖̫͙̳̱͈̗̯̖̼̤͔̭͚̣̱̝͓̲͔̳̝̬̜͙̗͙̬̻̱̥̻͉̻̼̝̲͍̞͙̲̱̭̤͚̝̜̙̝̫͎͖̯̩̬̟͇̳̖̲̝͇̟͇̠̼̥͖̰̞̞͇̹͙͈ͮͨͦ̏ͥ́ͨ̑͌̆̽͂̓̋̒⃧ͯ͂͆ͧ̃̒ͩ̃⃧ͬͫ̒̓̿̐̇ͥ⃧̿͛́͆ͪͨ͊̋̐͋̃̊ͥͧͦ̌͂̍́⃧ͦ̒ͮ̅ͨ⃧͋͗̋⃧͊͂̏̍̀⃧̀̿̓̑̓ͮ̎̓ͥ̉̎̏̊ͣͥ̀⃧ͧ͑̿̏ͬ͌͌̓̈́͐͒͑̚̕̚̚͢͢͜͟͜͢͢͟͠͠͠͞ͅͅͅͅͅa̶͌̉ͨͬͫͪ͗̏̿͐̀̈̌̊͏̶̡̨̧̛̗̰̬̠̦̣̬͙̳̙͇̘̤͙̝̪̠̹̮̹̜͓͉̭͇̜̳̱͍̭̮̤̪̜̻͍̣̺̘͔̟͉̜̞͈̝̭̩͉̪⃧̋̌̄͗ͧͩ̀̉̽́͗ͫ̇ͮͫ̃̄̋⃧̊̍ͮ͋́ͮ̃ͯͮ̐⃧̍̈̊̇͑̀̒͊̎ͩ͂̑͑͋⃧͆́ͥ̋͛̏ͥ̅̏̓́̕̚͟͢͜͝ͅͅ͏̵̷̷̧̢̧̛͚͓͔̣̺̰͉̙͉̖̠̳͕̙͕̻͎̝͔̖̳̝͉̟͎͍͉̖͈̙͈̱̹̹̮̣̫̰̜̫̮̳̘̼͍̗̀⃧͐̈̓ͬ̃̏͛ͭ̑ͪ̔ͭ̓͑͊̃͑͌̑̀⃧̐ͨͩ̈⃧̓̌ͯ̀͛̾̌̃̒ͪ͂ͤ͋́⃧ͦͩ̊͊ͧ́́̕͘͜͜͜͝͞͠ͅn̢̔̒̓̇ͮ́̈͗̚͝͞҉̸̷̬̲̩̝̤̥̞͙͙̜⃧̾ͣ̅ͣ̈́͌͂͐ͨ̆̓̿͑ͨ̅̚҉̶̷̨̢͈̤͓͇͕̫̘̠̩͈̘̻̺̫̥͍̹̹̰̼͉̤̣̰̥̗̮̮̼̥͔̣̤̝⃧͊̉ͥͭ⃧̂ͨͣ̊⃧̽̂ͨ͂̔̂͆̚͞͠͞ͅ҉̸̢̛̛͎͉̖̫͔̞̰͖̙̣͚̗̟̫̠̤͍̬͚̱̱͍̟⃧ͦ̉ͦ͂̀̿͂̒̒͆̀́⃧͑ͫ̍̈ͪͪ̔ͦ͂ͥ⃧̅̏͒ͮ́̉̉̾̌́ͭ̆̈̀ͪ͗̚̕͜͠͝͏̨͎̪̲⃧̆̒ͣͤ͋͏̩̲̥͉̠̳̫̠͕̯̦͈͔̫̳̖͇͈ ̴̡̨̡̡̹̻̼̼͖̫̦̩͔̫̪̳̙̰͎͙͈̣̹̦͓͙̖̥̻̙̞̻̝̟̝̯̩͔͚̞̬̩̤̮͖͇̙̩͍ͦ́̎̍͗ͨ͋ͧͨ͗ͫ͌⃧̑̃ͧ͂ͭ̽͂̇͑̇̽̃̒̈̋⃧̂̑ͨ͗͗͋̋̿͒͗ͩ͌̇⃧̾͆ͩ̔ͦ̚̕͟͟͜͜͠͡͏̖̞̦̫͎͇͙͚͉̫̯̼͙͙̯̙̭̀̀⃧̎̌̐͒̇͟͞͞ͅ҉̵̡̡̝̭̘̖̠̟̗̹͎̜̟͉̱̘᷾ͫͭ̔̾̆ͨ͊ͯͫ̈́̑̕̚͘ͅ͏̶̵͇͉̩͍̜͍̝̦̼̞̙͎͔̙̠̳̗͕̥̗͇̠̖͇͖᷂⃧ͦ̓ͨ̈́̅⃧͂̊ͣͥͨ̅ͯͥ̎ͭͧͨ̑̓ͮͣ̒͑ͮͩͣ͊́͢͞͡͡ͅͅͅ҉̨̡̛̞͖̜̼͙̖̳̞̮͚̟̝̹͉̹̟̠̻̦̘̻̼͖͎̭͍̤̣̮͖̬̫̪̺̟̭̯̹͎̮̥̠͍͍̱̲̖⃧̐ͬͨ͌̆ͥ͒͌̈́͂̾⃧̽̍̄̍̅̒̅̈́ͮͯͧ̀̅̓͒ͯ͘̕̕͟͟͞͞
trythil
is
 
Joined: 23 Jul 2002
Location: N????????????????
Status: N͋̀͒̆ͣ͋ͤ̍ͮ͌ͭ̔̊͒ͧ̿

Re: Design and Layout Mock-ups...

Postby Knowname » Fri Nov 26, 2010 1:46 pm

Here's a simple request (that may or may not be in Phan's big ole spoiler... but I don't think it is) that was suggested by Gotegenks (??) in genamv, it would be cool if we had a way to see the subforum's information in the master forum?

say (and I'm not a coder so... this won't be pretty) in genamv we have, a long with some recommended amv threads

review thread *last reply 11-26 2am
review thread *last reply 11-25 9:41pm
general question *last reply 11-25 9:30pm
> recommended AWSM amvs *last reply 11-25 8:27pm
review thread *last reply 11-25 6:50pm

and at the bottom (or in our control panel or wherever you like) there is the option to hide messages from 'x' subforum (say, if there's two and you'd like to see one, but not both)

I don't know how much we can code into the forums but. I think this would easily cut down on the 'dead' subforums.

We would also need a pull-down list to tell the forum what forum you want to make new topics too. but other forums (pcvsconsole.com, delphiforums.com) have this. Only Delphiforums.com has the drop down menu... but pcvsconsole.com has a decent format I've enjoyed for a very long time that mixes multiple forums into one list. Perhaps it would get too chaotic with ALL forums in one list... but if we can just do this with subforums.
If you do not think so... you will DIE
User avatar
Knowname
 
Joined: 16 Nov 2002
Location: Sanity, USA (on the edge... very edge)
Status: Indubitably

Re: Design and Layout Mock-ups...

Postby Phantasmagoriat » Fri Nov 26, 2010 4:48 pm

Enigma wrote:That doesn't look too bad Phan
Thanks.

Corran wrote:Dropbox, the service I used for hosting those files, is free for the first 2GB. It is primarily used for automatically syncing files across multiple computers but you can provide public links to files if you put them in a public folder.

(p.s. if you or others decide to try it for hosting mockups, might I suggest using my referral link. We would then both get an extra 250MB of storage. https://www.dropbox.com/referrals/NTI3N ... src=global )
I can't believe I didn't clue into that earlier -_- Will check out the referral link ;)


RE: the mockup itself. It is 2am and I'll be fairly busy from now till next week so I can't say much but my first impression is that the design is busy. My eyes didn't want to focus in any one area. I really prefer three column layouts.

I do like a few of the changes you are suggesting though. I may post in more detail sometime next week when if I get a chance...
It might just be because I didn't really format the Announcements, or because of the asymmetrical two-column layout, but I know what you mean. In that respect the three column layout isn't so bad because it allows you to focus on the middle area, I just think the left menu takes up unnecessary space, and is a bit redundant with the existence of a top menu.


Oh I totally agree there. I mostly used 760px so it would fit here in the forum, which may also be why it looks a bit busy, but that shouldn't be a problem when I get an up-and-running-website. If it's possible, I think the org should have a scalable width that depends on the window size so that users with smaller screens can still navigate easily. However (and I don't know if this is possible) it would have an upper bounds of 960px (so it doesn't look stretched on higher res monitors) and a lower bounds of and 760px (so it doesn't wrap everything and look messy on mobile devices with tiny 480px screens).


trythil wrote:http://gitorious.org/a-m-v-org-v2
https://www.pivotaltracker.com/projects/136564

This is not a mockup: it is executable code.

Deployment will be done to http://org.ninjawedding.org whenever I get a chance to finish the two starred stories, which I do hope will be sooner rather than later.

You may submit patches, and I reserve the right to reject them. If people find this unfair, you have the option to fork the codebase.
:shock: Thanks. I'm still very new website design, and I'm not sure what I'm looking at just yet,
but I will check this out when I get a chance.


@Knowname: The idea sounds similar to RSS feeds, and I think I know what you are getting at. New content just needs to be more visible, while still being organized, like the Review Thread, the Recommended AMVs subforum, (or even this subforum to a certain extent). But yeah, visibility and organization are hard to balance.


/goes to play around with more designs
Image
Org Profile | AMVGuide | Phan Picks! | THE424SHOW | YouTube | "Galactic Escape"

"Effort to Understand; Effort to be Understood; to See through Different Eyes."
User avatar
Phantasmagoriat
 
Joined: 06 Feb 2006
Status: ☁SteamPunked≈☂

Re: Design and Layout Mock-ups...

Postby Corran » Fri Nov 26, 2010 7:02 pm

Phantasmagoriat wrote:I just think the left menu takes up unnecessary space, and is a bit redundant with the existence of a top menu.


One reason for keeping it is that touchscreen only devices or users with handicaps that inhibit their use of a mouse may have problems interacting with a drop down on hover style menu. Even better for mobile users would be to have a separate layout to be displayed to mobile devices but that would mean maintaining multiple layouts or at least stylesheets. (If not too difficult, perhaps the left hand menu could be optional in user settings and if a mobile device is detected it is displayed regardless of the setting?)
User avatar
Corran
 
Joined: 14 Oct 2002

Re: Design and Layout Mock-ups...

Postby Zarxrax » Fri Nov 26, 2010 7:53 pm

This is just a very rough mockup, because I'm too lazy to put real effort into it.
The box beside the subscribe button is a popup, its only displayed when you click there.
The downloads section should probably be completely redone, but I didn't feel like it.

Image
User avatar
Zarxrax
 
Joined: 01 Apr 2001
Location: Concord, NC

Re: Design and Layout Mock-ups...

Postby godix » Fri Nov 26, 2010 8:45 pm

If the org redesigns and there are not videos of some sort or another put on the front page, then the thing is just a total waste of time. People come here to see videos. Looking at the mockup, there is nothing on it that tells a casual viewer we actually have dick all to do with videos. Which makes the mockup worse than the current layout, at least Doki put highly rated videos on the FP for those who aren't logged in. The site is about AMVs, the front page should be too. As such, I suggest the following mockup. It's ugly as fuck, but at least you can tell the site actually has something to do with videos:

Image
Image
User avatar
godix
a disturbed member
 
Joined: 03 Aug 2002

Re: Design and Layout Mock-ups...

Postby Nya-chan Production » Fri Nov 26, 2010 8:54 pm

godix wrote:If the org redesigns and there are not videos of some sort or another put on the front page, then the thing is just a total waste of time. People come here to see videos. Looking at the mockup, there is nothing on it that tells a casual viewer we actually have dick all to do with videos. Which makes the mockup worse than the current layout, at least Doki put highly rated videos on the FP for those who aren't logged in. The site is about AMVs, the front page should be too. As such, I suggest the following mockup. It's ugly as fuck, but at least you can tell the site actually has something to do with videos:

Quoted Image converted to link:
http://img715.imageshack.us/img715/641/mockupr.png

I envy your rebuilding skills :>
ImageImageImageImageImageImageImage
User avatar
Nya-chan Production
The :< point of view
 
Joined: 15 Nov 2006
Location: Ward 7F
Status: White bracelet

Re: Design and Layout Mock-ups...

Postby Phantasmagoriat » Fri Nov 26, 2010 9:25 pm

Alright, I got DropBox to work as a hosting solution. So far it's pretty awesome, and I got the extra 250MB's thanks to Corran's referral link above. Check my first post for updates to my mock-up.

@Corran: I did not think about mobile users. Some sites have a mobile version of their site stripped-down to the basics, and the org could probably do that. Although the 3-column-style is starting to grow on me again, depending on what goes there, and if menus can be turned on/off.

@Zarxrax: Subscriptions on the VideoPages would be genius

@godix: you know, I always thought previews should be on the Members Page. I'll try to update my mock-up.
Oh, and banners can reload every time a new video is played! That'd be effing sweet 8-)

Nya-chan Production wrote:
godix wrote:If the org redesigns and there are not videos of some sort or another put on the front page, then the thing is just a total waste of time. People come here to see videos. Looking at the mockup, there is nothing on it that tells a casual viewer we actually have dick all to do with videos. Which makes the mockup worse than the current layout, at least Doki put highly rated videos on the FP for those who aren't logged in. The site is about AMVs, the front page should be too. As such, I suggest the following mockup. It's ugly as fuck, but at least you can tell the site actually has something to do with videos:

Quoted Image converted to link:
http://img715.imageshack.us/img715/641/mockupr.png

I envy your rebuilding skills :>
iknowhey
Image
Org Profile | AMVGuide | Phan Picks! | THE424SHOW | YouTube | "Galactic Escape"

"Effort to Understand; Effort to be Understood; to See through Different Eyes."
User avatar
Phantasmagoriat
 
Joined: 06 Feb 2006
Status: ☁SteamPunked≈☂

Re: Design and Layout Mock-ups...

Postby Phantasmagoriat » Thu Dec 02, 2010 3:59 pm

Major updates to my mock-up here:
http://dl.dropbox.com/u/15771457/ReDesi ... nPage.html

Changes this version:
-Added Preview Panel & Current Playlist for easier viewing and user feedback (if you didn't know, the org always had playlist capabilities. We might as well make use of it :amv: )
-By default, the playlist could be made up of featured AMVs on the site (like Spotlight)
-Preview Panel uses a 'bento' style layout lol. It might look intimidating at first, but I think it makes sense.
-Ideally, the surrounding AMV information would change based on the video being played, but IDK how to do that using the playlist scheme currently used by the org... I know the player is skinnable, so if all video information could be integrated into the skin, that'd be a dream come true... (I'm sure it's possible with a separate playlist scheme though.)
-I think "Add to Playlist" can be added next to all search results so you can build your playlist on-the-fly
-Preview uses size of 480x360 to retain cinematic feel of widescreen vids, and for quality concerns when blownup
-Added Thumbnails/Screenshots of AMV
-Page Width increased to 960px and Statistics added to extra space in the banner
-Quicksearch: added Drop-Down menu/Browse/Tags so users can narrow searches immediately
--The Browse button lets you browse a category if the search field is left blank
--(check out some of my suggested categories too)
--The Tag button returns all tags associated with your search query (if the org decides to use tags)
-Added "Browse Tag Cloud" to Search menu
-Added "Browse by Category" to Search menu
-made side-menus exclusive to the second half of the page to free space for the preview panel
-Added link to hypothetical survey in the "latest poll.." side-menu
-I also started playing with colors/textures/gradients just for the hell of it... (keep in mind some things won't work in IE like rounded corners-- but everything should work in firefox)

I think a big improvement for the org would be to introduce a real preview interface; because right now we don't really have one. You just go from video page to video page with too much down-time between AMVs. Using playlists like the one in my mock-up might help. Just queue up a bunch of recommended amvs and away you go. Or queue up everything made by a particular editor, or someones entire favorite AMV list, or even a full contest. Save lists, Share lists, Add to lists, whatever. When the list starts, you don't even have to click anything-- just let the playlist do all the work for you.
Image
Org Profile | AMVGuide | Phan Picks! | THE424SHOW | YouTube | "Galactic Escape"

"Effort to Understand; Effort to be Understood; to See through Different Eyes."
User avatar
Phantasmagoriat
 
Joined: 06 Feb 2006
Status: ☁SteamPunked≈☂

Next

Return to Org Redesign

Who is online

Users browsing this forum: No registered users and 1 guest