Wiki:
Page name: Redesigning ET [Logged in view] [RSS]
2012-11-11 17:26:36
Last author: Triola
Owner: SilverFire
# of watchers: 38
D20: 2
Bookmark and Share
 Slideshow 

Redesigning ET. An idea page.


Goals:

- NEW ENTRANCE IMAGE
- Updated logo
- Unify graphics
- Simplify
- Remove unnecessary clutter
- Make ET more 'new user' friendly
- Redesign navigation

Technical requests from an iippo:
-all buttons to be done via stylesheet, no images living in a hrefs
-not so many tables, more CSS-based arranging
-divs/important elements to have unique ids @_@




This is the re-vamp [True, plain and simple] was working on before he left.
http://www.elftown.com/_Elftown%20Mock-Up




Yncke's suggestion: Suggestion for a UI change




[Chel.] - I hate how un-unified the graphics look. There are 3 different kinds of leaves! There is the cartoony ones on the left, the realistic ones on the top and the pixel ones on the right. It's like they were rendered at different times by different people! >_>'
<img100*0:http://elftown.com/stuff/aj/20695/1269407962.png>



[M!]
[M!] made the following and I thought it should be put up here. -[Chel.]
<img0*50:http://www.elftown.com/stuff/aj/2039/1260321896.jpg>

Note: some of this has been sorted now: there's no longer a doubling of all features on Main Street, but it's still pretty long, and there are lots of (what I suspect are) barely used links. At the very least the links need to be rearranged (and probably some removed - or moved somewhere else other than Main Street). I'm still thinking about other ways to try and make it shorter - [SilverFire].




[Kaimee] I am currently using my own stylesheet which reskins the existing site, which is much nicer. However it's still not enough, I would like to entirely redesign the site, simplifying it, cutting out the hundreds of extraneous links and buttons on every page, and making it more user friendly and graphically oriented.

My current stylesheet: _kaimeetest.cs

<img300*0:http://www.elftown.com/stuff/aj/15586/kai_gloomdoomswamp.png>




[SilverFire]
 
<img300*0:stuff/aj/15586/kai-silverfires-layout.jpg> <img300*0:stuff/5555dkgwiki.jpg> <img300*0:stuff/aj/5555/1309720959.jpg> <img300*0:stuff/aj/5555/1309720989.jpg>

Note: on the view of the wiki edit form, all the current options for password protection, forum protection, keywords, etc. would still be there. I just forgot to add them because I wasn't planning on changing them. <_<

<img300*0:stuff/5555ETvampmessagespurpledark.gif>




[Kaimee]
Re-skins of the above:


<img300*0:stuff/aj/15586/kai-greywoods.jpg>
  
Design with IE6 style to deal with transparency:
<img300*0:stuff/kai-greywoods-IE6.jpg>

Graphic application of these skins
Please note: Logo & graphic in top left corner are placeholders and screenshots. Concept calls for a monochromatic graphic combined with bright green logo. Ideally, logo would be redesigned entirely, and graphic would wrap around it.
Graphic concepts include:
- Gnarled bonsai growing around logo
- Griffin gripping logo in it's claws
- etc. This could be a contest!

<img300*0:stuff/kai-greywoods-green-v2.jpg>

Previous concepts for graphic application:
1. I first went for grey and golden tones, as that's what I already use.
<img300*0:stuff/aj/15586/kai-greywoods-gold.jpg>
  
2. Then moved on to dark grey, green tones, more in the elfwood tradition.
<img300*0:stuff/aj/15586/kai-greywoods-green.jpg>
  
3. Then a desaturated brown and green theme, which everyone seems to like.
<img300*0:stuff/aj/15586/kai-greywoods-greentan.jpg>





Suggestion for top nav and what should appear in drop-down menu:

Main Street
- News
- Main Street Poll
- Daily Poem
- Featured Story
- Featured Art
- Featured Member
- Featured Wiki
Your House
-profile
-diary/blog/journal
-guestbook
-poll
-statistics
Messages
-Wheeee! x new messages!
-inbox
-outbox
- view unread messages
Notes
- Friend list?
- the list of wikis you're watching/owning, etc.
- List of houses you're watching
- List of forums you'rer a member of (should take you to the page where you can edit forum prios, etc.)
- possibly a link to help page?
Forums
- Forum replies
- list of forums
- more stuff... need to think more about this part.
Wiki
- Index
- Wiki Help
- Community (community index page)
- Competitions? (maybe would go somewhere else better?)


Notes: at the moment I've listed 'profile' under the 'Your House' option, 'cause 'Your House' refers to all the options - your poll page diary, gb, etc. I thought it would be confusing to call both the whole lot, and just the profile page 'house', but what does anyone else think?

One potential problem is that the 'wheee, new messages' won't be immediately apparent unless people hover over that option to the ddm. The solutions I see are: either make it so that when you have unread messages, that tab in the nav bar glows to let you know - this could also work for the main street tab to let people know about new polls, features, and news. Or keep the message icon in the right hand nav bar, where it would light up on receiving a new message, and hovering over it would produce the various options (perhaps more clearly explained than they are now - e.g. people have to figure out for themselves that clicking the number part of the link takes you to a list of unread messages, rather than to your first unread message)
If we do that, should it still be listed as an option in the top nav?




Suggestions for renaming of the 'fan' button:
- Keep it as fan/stop fancy
- Fan/Unfan
- Fancy/ Stop Fancy
- Approve/Disapprove
- Yarr!/Narr!
- Yarp/Narp
- Love/Unlove
-Like/Dislike
- I hate that feature!

Feel free to suggest others in the comments!




Suggestions for the side nav: what should be in it, how should it work, how should it look like

IN IT
1. Everything incoming to you:
-New messages <URL:stuff/558MessageNotificationredeg.png> The actual layout of the bubble needs to be figured out.
-New guestbook messages (clicking the icon just takes you straight to your guestbook)
-New forum replies <URL:stuff/558forumNotificationRedeg.png>
-New friend requests <URL:stuff/558relationNotificationRedeg.png>

2. Everything you want to be notified of:
-Wiki changes
-Wiki comments
-(Possibly wikis with both changes and comments? Possibly pointlessly complicating life...)
-Diaries by people you watch
-Changes to presentation by people you watch
-(New polls by people you watch?)
-Comments on polls that you watch

3. Main street features? Or would they be better in the top nav?
-New news would be pretty useful to have in this bar, actually, even if all other main street stuff is not.

4. The bookmarks you have selected to be visible on every page.
(This is a really loved and used feature, and it needs to go somewhere, somehow!)

HOW IT WORKS
-not on hover. I don't think you can hover on phones.
-first click reveals more options, second click is the selection of where you want to go. Unless one click is enough, like in case of the guestbook



Working with what ET already looks like

 

Username (or number or email):

Password:

2012-11-10 [hanhepi]: I love your wiki stats, Silvie. XD

I also like the idea tabbing the house like that, rather than having all those buttons up there. Maybe Stats and Badges could be tabs as well, further streamlining the house area? Clutters up the tabs area though, so I dunno. For the council/guard badges being prominent, maybe have small versions next to the name, where moods go now, put the moods in smaller print below the name, like this (where b in parenthesis indicates uber important yet tiny badges):

Silvie (b) (b)
You have no mood in your image for me to use here

2012-11-10 [hanhepi]: I tried that with the h3 tag for name, and regular bold for mood, but you end an h3 and it gives you a line break. So, picture it with bigger username.

2012-11-10 [SilverFire]: Oooooh. Donor badges could be tabbed. :O I even thought of that once before and then totally forgot it - there could be like a 'trophy cabinet' tab that was where all the competition badges are displayed. :3

Not sure about tiny badges, simply because they don't scale well. They're not vector images. They pixelate massively when you shrink them.

2012-11-10 [Triola]: I am way for the tabbing of donor badges! And maybe displaying them in a sort of listey, more orderly fashion? Like

Badge - wiki
Badge - wiki
Badge - wiki

Lists would be long and a hassle now that the badges are in your house, but that doesn't matter if they have their own tab :D

2012-11-10 [SilverFire]: I was thinking tabled:

<img:><img:><img:>
[wiki@wiki][wiki@wiki][wiki@wiki] 

2012-11-10 [Triola]: That would work too :) anything but how they are now :P

2012-11-10 [Triola]: Also, going off Silvie's tab thing, imagine if we removed the leafy sidebar too and then made most of the buttons look the same!

<img100*0:stuff/ETmockup-Trin1.jpg>

(And nevermind the font, didn't know which one to use, so I just Arialed the shit out of it)

2012-11-10 [SilverFire]: Verdana, I think, for future reference.

2012-11-10 [Triola]: Cheers :)

2012-11-10 [M!]: Just that looks a million times cleaner than et right now. I wish the green could die.

2012-11-10 [Triola]: I think we all wish the green could die. But I could live with the green if we could just get rid of some of the clutter around here and make things cleaner and more orderly >.<

2012-11-10 [iippo]: Well some folks like the green and the colour is really easy to change with stylesheets, so there can be a number of alternate stylesheets made to choose from. As long as as much as possible is done with CSS (buttons and such... I think currently it's only the top buttons that are not CSSable. Oh, and maybe some others too. Nvm :P)

2012-11-10 [Triola]: I agree. All buttons should be CSS-ed and then made much more uniform.

2012-11-11 [hanhepi]: Green can be a classy color when the right ones are used, like in Silvie's older examples. For me, reading black text on these current greens is quite nice, I can sit here all day and it doesn't strain my eyes. Black text on a white background though I can only sit and read for a few minutes before I have to squint, then about 20 minutes after that, my eyes hurt. So as long as there is a color, I would probably be fine.

As rapidly as what's popular in design changes, and as slowly as we seem to be able to make changes here, I don't think we should try to go too trendy with a redesign. Hell, at this rate by the time we get it done, this look will be back in style. XD And don't say it won't, just look at the fashion industry and look at the god awful shit from the 1980's that has come back and people are wearing.

2012-11-11 [M!]: " Hell, at this rate by the time we get it done, this look will be back in style. XD And don't say it won't, just look at the fashion industry and look at the god awful shit from the 1980's that has come back and people are wearing."

I'm gonna call you on that one. That's not how internet design works at all. It changes in response to new technology (mobile devices, updated code) and to become over all more functional. There is no way in hell things will swing back this way unless society crumbles, all information is lost and we have to rebuild from the ground up. That's just... no. Even if you're joking... no.

2012-11-11 [Triola]: Archived the two new images before they disappear in the comment history.

2012-11-12 [Chel.]: Thanks!

2012-11-12 [SilverFire]: We could probably also get rid of that line explaining that "this is your house". <_< And it would be nice if all those buttons at the top could be shifted elsewhere, (the edit profile button into the profile itself, and some of the others into the top nav, maybe)

2012-11-12 [Triola]: The 'Upload art' and 'Upload folder of art' ones could naturally go somewhere underneath the 'Gallery' tab, and the 'Write a review' one maybe somewhere underneath the 'Diary' tab?

2012-11-12 [SilverFire]: If there was a "contribute" option in the redesigned DDM-style top nav, then 'upload art/folder of art/review/sitebuild' could all go there. Unless I can think of somewhere even more hidden to suggest we put the site-build option. :P

2012-11-12 [Triola]: Haha, I hear you :P

Number of comments: 475
Older comments: (Last 200)

200 older comments
(0, 0-24):

Show these comments on your site

Elftown - Wiki, forums, community and friendship. Sister-site to Elfwood