So as the title suggests I’m embarking on a 7 part series in how I build websites. I will go through the process of building a site from the early planning stage to a complete and fully functional site.

About the Project

I’ve been wanting to create a cool site about me that got the same awesome scrolling and foregrund/background thing going as Nike Better World. It’s really cool and have also grown popular the last months.

A couple of  great sites that uses this technology:
7 Best Things of 2010 – By Dave Gamache
Ben the Bodyguard
Manufacture d’Essai

So I want to use this scrolling parallax effect and create a small site about what I do, what techniques I know, who I am and what I like to do. I also want to include some contact information and links to social networks. And maybe a picture of me as well.

If you’ve read my previous posts you will see that I’ve created some concept art for this project. I did this before i began writing my mind map or even had an idea for a site. Sometimes I feel that sitting down and just designing without a tangible idea, points me in the right direction before I’ve even started.

Brainstorming

First up is sitting down with a nice big cup of coffe. I usually don’t sit near the computer, the TV or anything that will distract me. Just start from scratch with a pen and a paper. Make a mind map and just write down anything that you come up with. You can always scratch the ideas you don’t like afterwards. But right now it’s brainstorming and it’s a process that requires you just write what pops up in your mind.

So after sitting down a good 30 minutes with my big cup of coffe, my notepad and my awesome pencil I’ve created a printed version of the idea I had in mind (hence ”Mind Map”). This is what I came up whit during my brainstorming.

The key Parts of My New Website

• Page One: A quick presentation of me and what I do
• Page Two: The techniques I know (HTML5, CSS3, jQuery)
• Page Three: I Love Responsive Design
• Page Four:WordPress Loves Me
• Page Five: Four things I like to do in my free time
• Page Six: My contact information and a  picture of me.

Design

The website will be a one-page based on six parts that will lie on top of each other. The user can scroll down or click a button to move to the next part. Every part of the page will be using different fonts and colors. The parts will contain some text, but the goal is to keep the amount of text down and let the illustrations speak for themselves. Whilst scrolling the page the visitor will experience a parallax scrolling effect. Every page will illustrate some sort of situation connected to the subject.

Theme

The main element of the site will be a cartoon character (who portrays me) that’s part of every situation. For example could the part about Responsive Design include the character holding an iPad. The characters appearance should capture my self-deprecating humor and should have a lot of flaws.

Technology

This project will need a review of what technologies will do the job of creating an awesome application. The parallax scrolling effect is going to be the biggest challenge to overcome and at the same time be the coolest feature. Every part of the one-page design is going to be as big as the visitors window. That means if you resize your window, the part will resize too.

The website should also be Responsive, compatible in all browsers going back to IE7 and be really speed optimized.

The techonolgy is going to be the heavy lifting for me in this project. But I’m always up for new challenges and after completing this project I will have lots of new knowledge.

Goal

I think every project should have a main goal that you’re trying to reach. My goal with this site is to get featured on Awwwards. That is my main goal, but getting featured on other website galleries would be cool as well.

That’s it for now! Next part will go through creating a visual sketch of how the page will look and function.

Cheers!
//Sebastian