Web designer, or great with CSS? Have ideas for our design? We need your help! ^_^

sothis

Forum Moderator
Anime-Planet Founder
Developer
Hello,

Are you a kickass web designer with ideas about the site's design, or have outstanding CSS skills (cross browser compat is a must!)? We could greatly use your help.

We've been working nonstop on the code for V3, and have this partially finished new layout up and running - but design isn't our #1 specialty and we'd like your help figuring out how to make Anime-Planet's site design the best around.

You can download a PSD package here. Many elements are flattened, but this will give you a good place to start. Included is an anime entry, and one of the home pages. Note that this isn't a call for new THEME IMAGES - we will open up the floor for that later.

If you have ideas on how to make the design better, please mock up the PSDs and either send those or a jpg/png (we may ask for the psd if we decide to use elements) to webmaster [at] anime-planet [dot] com - please email to that address, rather than post about it here.

We probably won't have the time to respond to each submission, but we will definitely look at each one; and if we use your design elements, you'll be credited on the [pending] staff page. If you have the CSS skills to implement what you've done, let us know that too.

Areas we'd like improved / brainstormed:

-new site logo (the current one is temporary). it could incorporate the mascot somehow, or just something plain... we are open to ideas.

-better header/navigation in general (anime, reviews, etc - the top area). "manga" will need to be in there soon also.

-consistent colors. on V2 there were two themed colors (chosen from the theme in question) - one for link color throughout the site, and one for a secondary color (such as the profile panel). right now we have way more than 2, also a gray, also a tan, and it's not entirely consistent. we don't like the light green in the profile panel, also. a neutral color that doesnt change such as tan/gray is fine, but we need a better color plan.

-consistent fonts. like colors, we have too many fonts/sizes throughout the site. the headings in the profile for example ("about me") versus the right side boxes for random anime / recently added anime versus others, are all different. most dont look very header-y and we'd like a more consistent solution. also appreciated would be ideas on how to make better headings for sections period, even if they end up having to be images.

-a better user panel (the upper right). things it needs: a small avatar (doesnt need to be the exact size you see now), a link to the user control panel (right now, "profile"), an optional "admin" link certain users would see, a link to the user's anime list (and maybe manga list). there could be other stuff in the future as well.

-better styles for the boxes with lists - for example on the anime homepage, the recently added anime and random 2008 anime - these look boring; including images might be good, etc.

-overall, better "icing on the cake" type styles that give AP a better look/feel. for example instead of a plain gray box with a bulleted list in it, maybe the borders of boxes should look different, have more fancy headers, maybe horizontal rules should be customized a bit, etc. imagine the current deisgn, and then kick it up a notch!

-i recommend not spending too much time on the user profile - we need to add in a bunch of things there (including a few recent recs with a link to see all, a few reccent reviews, some recent user activity, the top 5 anime, etc). general layout ideas would be appreiated (the ad location is flexible too and can be changed to a diff size) but given how many changes we'll make, try not to do too much right away.

-review entries: right now they are kind of boring, need screenshots or thumbs perhaps, better headings for the sections (story, etc). here's an example review. the synopsis box on the right also looks bad, the bottom needs something to tie it together, etc.

-recent user activity needs to look nicer, but some of the things above (better overall styles/boxes, better fonts/headers, etc) might help with that.

-need a good layout for the profile edit, register page

as you can see there's a lot of stuff we'd like to upgrade. if you can help out, we'd appreciate it! you can give suggestions on any other pages as well. please don't submit written explanations of ideas - images only.

thanks again!
 
Re: Web designer, or great with CSS? Have ideas for our design? We need your help! ^_

also, the anime entry needs some work - the list of reviews (look up gantz for an example) looks bad, we need to allow the screenshots box to be wider as iwant to allow widescreen images in the future, the transition from the anime to the recs is a bit disjointed/awkward (espeially if there are no recs), and soon we'll need space for relations for the main entry (not the recs, just the main entry), avatars/signature images (a few each, with a link to see all).
 
Re: Web designer, or great with CSS? Have ideas for our design? We need your help! ^_

i have some ideas how to improve everything, but HOW detailed should the pictures be? simple boxes with some text or a whole theme? doing a complete new theme with my awful skills always turns into a complete failure.
 
Last edited:
Re: Web designer, or great with CSS? Have ideas for our design? We need your help! ^_

Sure, I'll give it a shot as some Photoshopping. I'll see if I can think of anything. ^_^
 
Re: Web designer, or great with CSS? Have ideas for our design? We need your help! ^_

oehr: doesnt matter, if you have a specialty of little styles like box outlines and headings, we just want to see examples of those. if you are better with layout and would have an idea of how to structure the profile panel box, we'd like to see that.

pretty much anything you think you can contribute, we'd like to look at! i'm guessing we'll get a lot of different ideas, which is great - then we can craft full v3 to be awesome!
 
Re: Web designer, or great with CSS? Have ideas for our design? We need your help! ^_

alright. everyone, site back and enjoy my colorful idea:
exampleqr6.png


the bar at the left always stays where it is and does not move. only the right part with the always changing information does scroll. In order to let the scrollbar stay at the right side of your browser the bubble design as we have it now is unusable(iframe)... i think the current top banner is rather annoying. it takes too much space and the smaller the better. many users are still stuck on 1024x768 or even less and they have to scroll at least half a page until the important parts begin(anime entries, recommendations, user informations, etc.). without the buttons and a better theme it might look even better and more useful :D

also i think the ap banner should only be loaded on the anime-planet.com itself (not on /anime etc.) in order to save bandwidth a space for the information on the right.



i have more ideas, but i have to paint something beautiful first... (which is rather annoying)

also, im no web designer and have absolutely none CSS skills - nor photoshop. just some ideas.

P.S. no profile now. tomorrow. im going to bed - school sucks.


EDIT: i like sites where you can change everything, which links should be displayed, and so on. this way the user can customize everything on the left himself.
 
Re: Web designer, or great with CSS? Have ideas for our design? We need your help! ^_

so we are probably not going to make a change that extreme... we do like the current layout (top navigation, and other navigation on all pages as needed such as in the profile box)

also as mentioned in the first post, please email your ideas to the address, instead of posting them publicly here
 
Re: Web designer, or great with CSS? Have ideas for our design? We need your help! ^_

I cant say if am a pro or just intermediate as a web designer.

But if you want eye candy witought getting the full package too heavy, ill probably have this to suggest to begin with.

Stay with Fixed template. Right now 1024X768 are the most common screen size. Tho making one for 640X480 would be nice with a resolution detector in javascript just in case, for those older pc.

I am familiar with the stretch and the more intelligent auto sizer code. But from those i already tested, they still ain't perfect for the multi browser. Up to now only Flash seems to make it cool, but Flash is a heavy loader.

So Fixed is the best way to go for now, as far as a fully functional, fast loading page can go (1000px wide to avoid the scrollbar). And anyway for those well over 1024X768, everything still seems pretty nice, its just a bit smaller.

And for those wondering why PNG its really simple. JPG are good, but they get rendered vertically from left to right, so when they stretch too much in width they lose resolution. Gif are even worse and we wont even talk about bmp. As for PNG they get rendered from left to right top to bottom. So whatever the width the image stays nice.

------------

For some more reasonable eye candy... CSS combined with translucide png in DIV could be really nice wit ought heavying up the page too much.

For functionality AJAX would be a must. We can think about "Jquerry" or "Scriptolicious" package, I believe theres already some in Sothis Work ^_^.

Flash should only be considered for animated or smart banners. Never liked the menu or the full page as they tend to be far too heavy to load up the first time.

------------

The layout, Since AP have so much different things to show, maybe a splitted page in half would be nice with the main menu right in the middle.
On the left side the news and infos on the right all that is STATS. With of course the full width header and footer. The content of each page would change accordingly with the role of each page.

Example, click on animerec, left could be news about latest innovation of animerec and the latest comment about animes viewed in the forum. Right would be who watched what and when recently in animerec with suggestions.
Then you click on main, left could be main news about website and hottest news about upcoming anime, right would have a list of upcoming anime listed and talked about.

Well you get the idea. It ain't that different i guess, just the page form that is changed.

BTW Sothis, love all the work ya builded here, very inspiring. I mean in general with all the modules and functionality you coded. ^_^
 
Re: Web designer, or great with CSS? Have ideas for our design? We need your help! ^_

I realize this thread is a bit old, however the PSD template supplied matches the current theme so I'm hoping you are still open for design proposals.

Admittedly, I took a few short cuts, and didn't bother to convert all text fonts. But I will say the real layout would only make use of two fonts, Tahoma and Verdana for headings and regular text respectively.

Warning, this is a large file dump, these images are big!

The first series of images are front page mock ups. They include a few variations in color and skins to provide a real feel to how the layout would sit against various backgrounds. These aren't official skins depicted, just some junk I threw together.

Front page on flat dark background
Front page on a flat medium background
http://www.jeremygiberson.com/images/apmockup/frontpage_light.jpg
Front page on a super light background (white)
Front page skinned Ninja Scroll
Front page skinned Samurai Champloo
Front page skinned Ergo Proxy

The following mock up just plays with the navigation bar moving it to the top and adding browsing links directly to it (Presuming that the results page would supply both anime/manga results).
http://www.jeremygiberson.com/images/apmockup/frontpage_alternate_navigation.jpg

A couple of notes:
The user profile side module sports a mini anime life meter with shorthand time information. It also includes some recent user activity that directly is related to you. I don't know if these things can or are being tracked, but I hope it is. User names, Anime/Manga and threads all link back to the subject matter in question.

The random anime/manga side modules are simple block links. Though, I considered toying with the idea of making it so on mouse over a mini link floated on the right of the block would show up "more" and when you click on it the element expands in height to reveal the my anime status/ranking controls. But I suspect that might be too much.

Recent user activity is basically the same as the user profile activity above, except all user activity across the site is subject to display.

The bottom of the content section (main section on the left) now has a kind of site map link block that has a bunch of important or useful links across the site.

I notice now, that the site news is hot linking to forum posts, but in the mock up I built in next/previous controls as if it were a traditional blog or article system. So either they would be removed or perhaps you can switch to an independent news system.

In this layout, Ad placement has been confined to the side panel.



Anime info page

Follows the same format as the front page. Only things worth mentioning is the recommendations will use alternating background colors (white/blue). I added the Recent User Activity section on the side panel here as well though it usually only shows on the front and user pages. Felt like good filler choice.


Review Page (anime/manga)




I didn't do a mock up on the profile or user pages, I got antsy and wanted to post and get some feedback before investing any more time. I will say that the user profile page will not deviate from the layout like it currently does. The current left panel content will be migrated to the right side panel for consistency.


So any way, I hope this meets with your approval. If necessary I can help with coding the html and css.
 
Re: Web designer, or great with CSS? Have ideas for our design? We need your help! ^_

first off, you need a logo.
you also need a good banner.
i can try design those for you if you want.
 
Re: Web designer, or great with CSS? Have ideas for our design? We need your help! ^_

alright. everyone, site back and enjoy my colorful idea:
exampleqr6.png


the bar at the left always stays where it is and does not move. only the right part with the always changing information does scroll. In order to let the scrollbar stay at the right side of your browser the bubble design as we have it now is unusable(iframe)... i think the current top banner is rather annoying. it takes too much space and the smaller the better. many users are still stuck on 1024x768 or even less and they have to scroll at least half a page until the important parts begin(anime entries, recommendations, user informations, etc.). without the buttons and a better theme it might look even better and more useful :D

also i think the ap banner should only be loaded on the anime-planet.com itself (not on /anime etc.) in order to save bandwidth a space for the information on the right.



i have more ideas, but i have to paint something beautiful first... (which is rather annoying)

also, im no web designer and have absolutely none CSS skills - nor photoshop. just some ideas.

P.S. no profile now. tomorrow. im going to bed - school sucks.


EDIT: i like sites where you can change everything, which links should be displayed, and so on. this way the user can customize everything on the left himself.

Hey Oher, kinda reminds me of Old school AP when there used to be a random theme changer.

I am useless with CSS. I did pass the module however, but it's not my strong suit.
However, I can give the logo a try. I am currently learning typography and design in my Multimedia Diploma. I'll sketch some stuff up and email them.

Hey sothis, if my idea does get used (doubtfully) can I use AP in my portfolio for when I will be apply to a film school later this year!
 
Last edited:
Re: Web designer, or great with CSS? Have ideas for our design? We need your help! ^_

So how goes the new design for V3
 
Re: Web designer, or great with CSS? Have ideas for our design? We need your help! ^_

This thread doesn't...really seem to be the "highlight" of attention if you get my meaning, you probably all posted in vain, lol.

But we'll see...just a heads up to you guys.
 
Re: Web designer, or great with CSS? Have ideas for our design? We need your help! ^_

nothign was in vain - this was posted last september. we have a finalized design now.
 
Re: Web designer, or great with CSS? Have ideas for our design? We need your help! ^_

nothign was in vain - this was posted last september. we have a finalized design now.

Right, which means this should be locked to keep people from wasting their time? =/
 
Re: Web designer, or great with CSS? Have ideas for our design? We need your help! ^_

In the character info I believe there should be a tab for Famous Quotes.

For Example:
Under Uzumaki Naruto it would have
"I am strong because i have people to protect."
and other meaningful quotes like that.
 
Re: Web designer, or great with CSS? Have ideas for our design? We need your help! ^_

if u need any extra help
i have some experience in css html websites
however only minimal so don't expect something biig...
well i'm happy 2 help anytime ;)
 
Back
Top