Anime Website Design Brief

A brief summary of the business / site goals.

The purpose of the website is to improve the anime watching experience of me and my friends by automatically fetching new episodes from shows we watch and remember what we have and havent watched.

The key users.

Me: I want to know when new episodes are released for shows I am subscribed to and easily watchable.

Friends: They want to be able to easily keep track of new episodes and watch their shows but also discover new shows from what their friends are watching.

Scenarios in which your app or site will be used.

  • The site should easily communicate to a logged in user what new episodes have been released that they havent watched.
  • A user should be able to easily watch an unwatched episode, mark it as seen and then easily watch the next episode from the same or different show.
  • A user should be able to browse and find other shows on the website to watch or subscribe.
  • A user can see what shows their friends are watching and subscribe to those shows.

Design style principles to follow.

Informative
Interactive

Everything sounds good here but the style guidelines. These could be a bit more descriptive. When people have a hard time with them I tell them to imagine your web app is a person, how would you describe them? Informative and interactive sounds like a boring person :smile:

Thanks, I was having trouble things of some styles so I just put some stuff there off the top of my head to see what sticks, trail and error :smile:

Heres html mock up of the front page for non-logged in users, I decided to go with a design that is inspired from japanese mangas. This style would presist through the site but the user dashboard would be a different layout.

Erik,

Solid start. Here are a few things to look out for:

  • Pay attention to the interior axis. Right now you have two axis but no two items are aligned to them.
  • Don’t center align your titles its throwing off your alignment with the content below and the grid.
  • I’m not sure if its just the wireframe but with the borders on everything the site is looking really boxy. Remove the borders for now and see how your design / grid holds up.
  • Right now where the sign in / up box is I’m guessing that it is the least important thing on the page?

Kyle

Thanks for the feedback @kylefiedler, here a new design I ended up scripting since posting the last one. I decided to try to tell the story a little more visually since the inspiration is japanese manga. Any input you have is great:

@erikguzman That is a great start and I take back what I said before about the interior axis. The change actually makes the site look more like a comic. I still think that the centered text is too much. Be careful with the space between each cell. I think that keeping that space consistant above and below will help the rhythm. I’m pretty sure comics do this too.

Give you text some breathing room and since this isn’t a comic I think you can introduce another typeface into the design and not have it all be the handwritten one.

1 Like

Thanks, Ill look into other typefaces to make the details clear and readable and work on making the text in the dialogs less cramped