AuthorTopic: [WIP] Side-crolling style website  (Read 3695 times)

Offline Calvein

  • 0001
  • *
  • Posts: 4
  • Karma: +0/-0
    • View Profile

[WIP] Side-crolling style website

on: November 11, 2009, 10:58:52 pm
Hi all,
I'm new here and I hope I'm in the good forum.
Well, first of all, I'm French, I used to make some graphics for Zelda's fan game but I'm certainly not as good as works I can see around here, anyway I love pixels.
I don't know if you have noticed the new GMail theme called "High Score" (well I think, it is "Record" in French"), but I found it amazing.



I'm in three-year university degree in web development (PHP/Java/C#/R&R especially), so not in graphics and we have an internship at the end of the year, so I thought that making my own website, with my resume, portfolio and competences, was not a bad idea.
I started it a month ago, without style of course because I was looking for a good one, and know I found it, a pixel website.

So I make a plan of it, I think I have the half of it :


The home is a cloud and the portfolio is a hill (it's not obvious I know it :p).
The strange things under the "photo" is because all pictures will moves like that, so when the pictures come to ground, they go in it (I hope I'm understanding).


Well, if I posted here it's for several reasons, first of all is to have critiques of my work, and why not good idea (I'm just at the half of my plan :/) and some helps.

Thank you :)

Offline EyeCraft

  • 0011
  • **
  • Posts: 597
  • Karma: +2/-0
  • What are you scared of?
    • View Profile
    • Death By Dev

Re: [WIP] Side-crolling style website

Reply #1 on: November 12, 2009, 03:03:40 am
Hi Calvein, welcome to the forum.

Is this a concept mockup, or the actual artwork you're showing? If its the latter, you might want to review the definition of pixel art.

Seems like you're using the photoshop brush tool with auto-anti-aliasing for laying in stuff like the clouds, which takes the piece outside of pixel art consideration.

All the forms are extremely rectilinear, whereas clouds and hills are very typically smooth flowing forms.

It seems like you're too closely mimicking the gmail theme. The colours and subject are extremely similar. Use the inspiration of that theme, but I suggest finding a quiet place to sit and reflect on what YOU would like to create in your piece to make it YOUR artistic expression.

I also suggest working more loose with your piece when concepting it. Don't think about it in terms of a website layout so much, think about it more like a painting or canvas; think of it as a piece of art. Let forms and colours flow in a way that feels right and works well compositionally.

Offline Calvein

  • 0001
  • *
  • Posts: 4
  • Karma: +0/-0
    • View Profile

Re: [WIP] Side-crolling style website

Reply #2 on: November 12, 2009, 05:12:01 am
Thanks for your advices :)

Yes, It's a mockup and I forgot to explain it.
In fact, the red lines are making 4 parts, the parts are in the size of the browser and you can go to an other part with animation (no scrolling).
So I was more thinking about making a 4 scenes in one, each one have to be another atmosphere or they have to complete themselves.

Offline Calvein

  • 0001
  • *
  • Posts: 4
  • Karma: +0/-0
    • View Profile

Re: [WIP] Side-crolling style website

Reply #3 on: November 15, 2009, 02:37:28 am
So, here a VERY FIRST ATTEMPT, just for see how pixels done  and to structure my code (lot's of JS), so yes, It's ugly :-X
It also show you how I plan to make my site (juste the bottom is "done").

So, here is it : http://calvein.dreamhosters.com/Portfolio/
« Last Edit: November 17, 2009, 12:19:54 pm by Calvein »

Offline Calvein

  • 0001
  • *
  • Posts: 4
  • Karma: +0/-0
    • View Profile

Re: [WIP] Side-crolling style website

Reply #4 on: November 17, 2009, 12:21:19 pm
Well, I took some Super Mario Bros. 3 on the SNES (for the test, I hope I can do it myself later) and I make them bigger (x4). Here is it http://calvein.dreamhosters.com/Portfolio/

I'm not so sure about what my site will be, in fact I did that :



For the sky, I'm pretty sure it will be this, a Cloud and a Spaceship, for the floor, I think about Hills and a Town but I got other ideas, like a forest and big Mushrooms, I don't really know yet, if you got some advice, it will be great.
« Last Edit: November 17, 2009, 12:46:04 pm by Calvein »

Offline PypeBros

  • 0100
  • ***
  • Posts: 1220
  • Karma: +2/-0
  • Pixel Padawan
    • PypeBros
    • View Profile
    • Bilou Homebrew's Blog.

Re: [WIP] Side-crolling style website

Reply #5 on: November 17, 2009, 04:48:03 pm
speaking from a web-browsing perspective, your prototype website is amusing, but not comfortable to crawl: there is not hint about whether i should look from a specific item at a specific direction, and if i remember where i come from, it doesn't help me to go back there.
A small cloud reminding of the "clouds-home" or a high hill reminding of the "green hill portfolio zone"

From an artistic perspective, the blobs you provided are too early, and absolutely non-pixels, so there is virtually nothing we could help about. I hope you noted that what makes the gmail theme cool is its retro look. It will not be sufficient to apply x4 zoom to "clouds/hill" area to reproduce that fun.

As for the "forest/town", i'd claim that you shouldn't distract your readers from your content (esp. if content is a portfolio and a CV). Thus, remain abstract and don't go for a complex picture "best viewed at 800x600" and the like. Put more care in your color selection so that it reflects your content and helps identifying interactive objects (they should show more contrast and more saturated tones than the background).

HTH