# Contest - Design a UI



## Dragoneer (Nov 3, 2005)

So, you think you can design a better UI for FA? Let's have it! Let's see what you've got. The best of the best will be converted to become one of the future themes for use with FA.

Only rules? Our mascot, Fender, has to be included in the header of your AI design! Put your art and design skill to the test. Provide a copy of the layout in JPG or PNG formate. 

All credit will be given where credit is due!


----------



## TehSean (Nov 3, 2005)

I'd just change the layout colors, which will be a feature included in FA anyway.

I wouldn't include any mascot though.  FA doesn't need a mascot.


----------



## Dragoneer (Nov 3, 2005)

TehSean said:
			
		

> I'd just change the layout colors, which will be a feature included in FA anyway.
> 
> I wouldn't include any mascot though.  FA doesn't need a mascot.


It doesn't need one, but it has one.

And we may tweak the UI slightly, however, FA has it set up so users can change layouts and use alternate designs. It's a feature people can apply.


----------



## furry (Nov 5, 2005)

http://img.photobucket.com/albums/v321/HellFurry/Winnar.jpg

Did I win yet ?


----------



## starlite528 (Nov 5, 2005)

LOL,  Negatives!


----------



## vashdragon (Nov 5, 2005)

Are you just wanting an image?  Or would you actually like some CSS coding?  In which case.  Any chance we can get a list of the DIVs in the code?  Or any tags for that matter?

Either way id be happy to try something out in my spare time.


----------



## Dragoneer (Nov 5, 2005)

vashdragon said:
			
		

> Are you just wanting an image?  Or would you actually like some CSS coding?  In which case.  Any chance we can get a list of the DIVs in the code?  Or any tags for that matter?
> 
> Either way id be happy to try something out in my spare time.


A JPG or PNG version would probalby be best.


----------



## Nobod3 (Nov 6, 2005)

Seeing as how I am currently studying Graphic Design, I might as well give this a good shot. What's there to lose...nothing...what's there to win...nothing. Of course, I don't want to look stupid and release a really bad one...

http://www.nobod3.com/locked.htm

Just some side notes,the hexagons could be changed into paws to better fit the theme of furaffinity, but then it looks slightly less professional. Also, didn't mean anything by the two pictures I picked under recent submissions, I just needed something really quick, so I grabbed them.


----------



## Tahssa (Nov 6, 2005)

Nobod3, I hope to god that they actually teach you how to design.

My vote's for the old layout (or at least the color scheme from it).


----------



## Nobod3 (Nov 6, 2005)

You know, It was just for fun. Plus, I just wanted something to do in 2 hrs...

BTW, you should always make something of better value before you judge others, 'cause otherwise your just another opinion in the masses.

ANYWAY, MOVING ONWARD! Because I KNOW that I can produce some really really shitty stuff, I usually come up with 3 ideas and then make them. From there I take the best of the three and that is what I submit. However, since there is no limit on how many ideas we can submit in this, I might as well as do as many as I can in all free time I have. I finished a draft and put it up right under the last one. Same linke (http://www.nobod3.com/locked.htm)


----------



## Velocigon (Nov 6, 2005)

*Hmm,*

Since I don't have much experience with Photoshop (Still learning), I constructed this a while back and then went back to it yesterday, this was all made in ACAD and then transferred to Photoshop for touch ups.

This is with certain images to give it a feel.
http://i3.photobucket.com/albums/y57/velocigon/finish.jpg

With no images.
http://i3.photobucket.com/albums/y57/velocigon/FullViewwithtext.jpg

A more clear Top Half.
http://i3.photobucket.com/albums/y57/velocigon/TopHalf.jpg

A more clear Bottom Half.
http://i3.photobucket.com/albums/y57/velocigon/BottomHalf.jpg

I didn't place any color because I?m still working on it a bit, but even so, my Photoshop skills are still at beginner level and I can't place the desired effects I would like to place on it. But I?m working on it.

Well there?s my Progress Design.


----------



## Nobod3 (Nov 6, 2005)

Will there be a more finalized drawing of the mascot? because I would like to see some with the non-color versions of him, seeing as we were given those too.

Velocigon - can't blame you on not using photoshop yet. Some of the greatest things are harder to start on photoshop anyway. The easiest way to learn it is to remember that photoshop isn't a complex program, but rather a bunch of simple tools that can be combined to create amazing effects. That's what my friend taught me with it, and now I can use it more effectively (especially when I put more than an hour or 2 into a  project). Can't wait to see it in color


----------



## Velocigon (Nov 6, 2005)

Yea, thanks Nobod3,

I'm going to find a book on it sometime to understand it better, seeing that I need it anyways for my career also. Heh.


----------



## Nobod3 (Nov 7, 2005)

You should try their official book, 'cause that teaches you everything you need to know. All you have to do from there is take the basic skills and use them out of context, and BAM! Your a pro!

Adobe Photoshop CS2 Classroom in a Book


----------



## Janet Merai (Dec 14, 2005)

Honestly, the current one now looks just fine.

All that is needed is a few features and tweaks and it will be nice.


----------



## Myr (Jan 1, 2006)

Still looking for a new UI? I'm going to give this a go if so. Not sure if I'll come up with much, but I've got an idea or two. It'll take me a few days to draw and code it into a basic display page.


----------



## Dragoneer (Jan 1, 2006)

AuroranDragon said:
			
		

> Still looking for a new UI? I'm going to give this a go if so. Not sure if I'll come up with much, but I've got an idea or two. It'll take me a few days to draw and code it into a basic display page.


We always are.


----------



## Myr (Mar 6, 2006)

This is horribly incomplete, but here's one of the ideas I had. Obviously I didn't finish off the user page, but you should get the idea from this post.

http://files.pyxaron.ath.cx/files/FApossibleUI.jpg

I do think the top banner area is too big, but I love the idea of bringing in a collage of user-submitted artwork. DA and others like to do admin favorites, but I think a collage with links on the front page to those artists selected for the collage would be a better way than those plain favorite submission links that DA uses. It also brings more of a feel of community to the site.

I also put the bio and user information and stats to the left side of the screen in a user panel. I think this better utilizes space and keeps the important things like submissions and journals from being moved too far down the page. This would also allow the user to have a personal pic or large avatar here.

The entire page would be color-coordinated and the user would be able to specify 1 color from 16 possible choices. The glass bars and divider bars on the left side of the screen would match the user's preference. That way FA pages have some uniformity with a little bit of customization. I hate going to places like Y! or Sheezey and seeing completely turned around pages, although I do think the arrangement of things on user pages could be customized through a menu.

Also note the XP Eye-Candy icons from www.iconaholic.com (formerly Foood's icons). I really like the glass look or a polished sleek finish to the overall appearance of a site. Some people call it the Vista-look or Media Center look, but I just call it glass.

http://files.pyxaron.ath.cx/files/FApossibleUI.jpg

Also, I would change the layout of a few other pages. The biggest change would be on the main home page where I would move the news over to the right in a small column and then have more submissions on the right with a single row dedicated just to music, stories, and others while several rows are for regular artwork.

Yes, I am using icons to denote file formats. I wanted to balance text, artwork, and glass. This is an unfinished concept type idea so it's not exactly what I had envisioned, but close enough. I don't have the graphic art skills required to create what I envisioned. 

This example is a bit too busy for my tastes, but considering I lack the skill and time to streamline it, it'll do.


----------



## Xax (Mar 6, 2006)

okay

Q: why the layout in image form? Why not the layout in layout form?

p.s. the only drawback to that layout is that IE sucks and apparently doesn't understand half the CSS stuff I use there. Nevertheless, the actual layout can be seen here. I feel really sorry for anyone who still uses IE. I mean, really.*

* I mean not that I can't write HTML that will work right in IE, but... man, I feel sorry for them. Nothing works right, not even the really neat background image thing.

p.p.s. if you can't see the image or the layout, that means my server is off because I'm asleep. Because my server is in my bedroom, and I turn it off when I sleep because it makes a lot of noise. Yes.


----------



## Taristin (Mar 6, 2006)

Honestly gotta say I don't really care for any of these... *snicker* @ scale affinity, though, but the banner background image with nothing but hyper mature characters is meh.  :? 

I know, I know. If you don't like it, design your own.... Ok.

*looks for a decent shot of fender*


----------



## Myr (Mar 6, 2006)

Taristin said:
			
		

> *snicker* @ scale affinity, though, but the banner background image with nothing but hyper mature characters is meh.  :?


That's what happens when a dragon gets frustrated he can't design what he sees in his head due to a lack of graphic arts skills and failure of making them work on demand.  And the larger furs in the banner are just since I like that stuff.


----------



## Taristin (Mar 7, 2006)

Mm. Just that as soon as one part of the community is displayed on the banner, the rest of the community will voice up and demand representation...

But I've yet to come up with anything better, so............. yeah.


----------



## thorndraco (Mar 7, 2006)

Xax said:
			
		

> okay
> 
> Q: why the layout in image form? Why not the layout in layout form?
> 
> ...



Visually the site you made there can be easily be reproduced in a way that IE can validly display.


----------



## Xax (Mar 7, 2006)

thorndraco said:
			
		

> Visually the site you made there can be easily be reproduced in a way that IE can validly display.



Yeah, I know, I just haven't gotten around to it yet: it's really annoying to debug with IE because I have to reboot into the windows partition and bleh bleh bleh it sucks.


----------



## anfael (Mar 8, 2006)

Hi guys

I hope you really will be conisdering the redesign from a true UI standpoint rather than just throwing a new dressing on what's already there.  If you are doing an overhaul, you have the potential to make it really smooth to use _as well_ as look at.

This is an ultra-quick rehash of the current design that addresses my biggest personal UI irks.  It's not finished-looking and leaves off the 'music' section (i didn't bother because the 'art' and 'text' sections are enough to get the idea across) but it demonstrates my most immediate ideas, hope you'll consider them.

The major points are more efficient use of screen space, a login form as part of the header, a preview scheme that is more suited to non-visual art, and a reduced main menu where the less-used features are incorporated under other headers.  The latter point I've always thought was a biggie because you have options like 'Games' and 'Import' available from every page, but gaming is hardly the main focus of the site, and the Import feature will only be used once, only by certain artists.  So as an example, the 'Import' feature might be moved to a more relevant part of the site, say under 'Upload' or 'Settings'.

Click this one for the design with a few explanations in red text

This one here is the design alone

This sort of thing just scratches the surface though - if I had the time to spend I'd mock up overhauls for every aspect of the site, in particular gallery browsing, and art/message management.  Hopefully you'll consider what I've done here and consider how to streamline the rest of the site in a similar way


----------



## TORA (Mar 8, 2006)

I like your design, Anfael! ROWR.


----------



## Almafeta (Mar 8, 2006)

Anfael, a few comments:

If we're redesigning, might as well add the name of the piece of art in as well.  (And of course, if logged in, keep the G/PG/M color coding.)

Would non-logged-in users need the "upload", "message center", or "settings" links?  Those three could form part of the "user" bar that your login bar would replace, while Search could move down to the "general" bar that all users, logged in or not, can access.

I wouldn't try to have text abstracts in the recent story area, because FA can't even handle extracting from a tagged-text file format like RTF, much less a MS Word document or PDF.

If the section under the main bars HAS to be split down the middle, I'd like to see a "donation/costs this month" bar go above the news.  But I'd rather see the  section under the main bars split horizontally, not vertically so you have one crowded bar on the left, and one short bar with lots of wasted "white space" on the right.


----------



## anfael (Mar 8, 2006)

Almafeta said:
			
		

> Anfael, a few comments:
> 
> If we're redesigning, might as well add the name of the piece of art in as well.  (And of course, if logged in, keep the G/PG/M color coding.)


Submission names can be pretty long, I personally think they're more ideal as tooltips.  In my experience, the first two things visitors want to know are what the picture looks like, and who drew it.  Also, listing the artist name enables some more natural navigation; click the artist name to go to their artist page. (this is great if there's a new picture which looks kickass from someone you never heard of)  Add the title to the mix and you take up a ton more space but with diminishing benefits, and efficiency is reduced.  Thumbnail views work best when you pare it down to the absolute necessities, I find.

I forgot about art rating so I made a revision below.  I forget the actual colors used



			
				Almafeta said:
			
		

> Would non-logged-in users need the "upload", "message center", or "settings" links?  Those three could form part of the "user" bar that your login bar would replace, while Search could move down to the "general" bar that all users, logged in or not, can access.


Indeed they certainly wouldn't need to see that, but I wouldn't move them up.  The yellow bar is for constant navigation to site functions; links that will always take you to the same place when you click them.  I find it's stronger to group those together rather than splitting them up based on guest/user status.

My solution would be to not display them when not logged in.  OR, keep them displayed, but if the user is not logged in, take them to the upload page augmented with a login box (or in case of message center, just a login box).  This makes sure people can get what they want done, without backtracking, if they reflexively click without checking the login box to see if they are actually logged in.

You did get me thinking about the double bar though and that made me realize just how huge the FA banner is compared to most sites.  There's a lot of wasted space to the right of Fender, so again see the revision.



			
				Almafeta said:
			
		

> I wouldn't try to have text abstracts in the recent story area, because FA can't even handle extracting from a tagged-text file format like RTF, much less a MS Word document or PDF.


I actually meant the description that the author submits, not really an abstract, that's my fault in the explanation.  So it's using still the same data that the front page already queries.



			
				Almafeta said:
			
		

> If the section under the main bars HAS to be split down the middle, I'd like to see a "donation/costs this month" bar go above the news.  But I'd rather see the  section under the main bars split horizontally, not vertically so you have one crowded bar on the left, and one short bar with lots of wasted "white space" on the right.


This is where the rush job is failing to express the idea, but that's my fault.  The short bar on the right would actually be quite long - have a look at how long the _real_ news articles are on the front page, for an example.  I'm not a fan of the left/right split either, but it's a sort of implicit compromise.  The FA guys _probably_ want to keep their news bar, but I think the absolute worst solution is running the news above all the art submissions.  Or above the stories.  Or above the music.  That's actually what I'm trying to eliminate here with the Admin notices.  It drives the actual site content off the bottom of the page, and requires obligatory scrolling, which is awful in websites.  If I could totally have my way, the news section would go altogether, or it would have to be extremely brief and link to a longer article on a separate page.

Anyway thanks for your input, here is the revision which I like a little better, although I still don't have much time to spend on it so things aren't lining up and text boxes are a bit raggedy, there might be better ways to arrange the same stuff in the same place.  Message center status would still replace the login form in the top right
http://www.anfael.furtopia.org/faui2.png


----------

