Website Design&Development[ From concept 2 fully working ]

[KingCharizard]

Website Design&Development[ From concept 2 fully working ]
​

Hey everyone I'm Kingcharizard,

Today Im going to make a topic of my progress as a web developer. This process will take members from concept to a fully working website. I'm hoping this will spark some interest in web design and/or development. I've seen some very talented graphic artists here and I personally think some of you would be excellent at web design. Before we get started I would like to point out I'm a web developer and my skills in web design aren't really that good.

Some of you might be wondering whats the difference, well I'll tell you real quick.

• A Web Developer writes the code, this forum was created by a web developer from the html to the php & mysql and everything else in between.
• A web Designer Well they create all the images logos and what not you see on the page they can also be responsible for the layout of these images.

Well that's the difference and I'm a developer.

Lets get started..

Idea stage: Well i first thought what my site was going to be about. I needed to think what I wanted and what I didnt. I needed to think about my core audience and what would cater to them. I had decided I wanted to video record my BF3(Battlefield) gameplay experiences and put them online because I've had some crazy stuff happen to me That what this site would be about. My BF3 Adventures. I knew I wanted a featured video on the front page so ppl knew exactly what they were looking at when they came to my page. I also wanted to post a latest news topic on the front page. I wanted this under the video. Then I knew I would have a page dedicated to the rest of the news I would be posting I also knew i wanted a page to show off the rest of my videos. Thats where the NEWS & MEDIA pages were brought into concept. I of course wanted a contact page in case anyone wanted to contact me about things for the game or maybe other questions. This I havent design but it will be a basic contact page. So now I had ideas for all my pages it was time to move to the design & concept stage.

Concept stage: So I opened photoshop and started to think of design ideas. After a few hours I finally decided on a color scheme and a simple design. Here are the design photos.
Home Page:

Spoiler:

Info: The idea behind this was stated above but the more I thought about it the more I wanted something very simple and this is what I came up with

News Page:

Spoiler:

Info:The idea behind this was when I posted an article people could either comment or approve of the article. I also wanted it to follor the same format as the news on the home page

Media Page:

Spoiler:

Info: The idea behind this was show a list of all the videos and have people comment on the videos on my site rather than another site like youtube especially since I plan to have the videos fully embedded into my site similar yo facebook

Most of my ideas were inspired by facebook and I don't mind. Facebook has a good design and layout. But the core idea behind the site is to make it very simple and user friendly. Of course with this comment stuff I'mma have to use javascript, ajax, php and mysql to handle the stuff and users will have to sign up or log in to post a comment. I have not yet designed that yet because what I want to focus on now is the core design and concept of the website. After I have made the site in photoshop and I have my mock ups it was time to start programming.

Programming stage: This I just started today and is the reason for this post I'm going to update this post daily with the code and the actual working website. I will make most of my code public for others to study and/or use. I will of course have to keep some code hidden/private to protect the users on my site(when its finished) and my own interest.

Well enough talk time to show some code...

HTML

Spoiler:

The Code
Info:This is the very beginning of the site its only basic HTML to design the site

CSS

Spoiler:

The Code
InfoThis is the start of my style sheet, this will get longer how much longer is not clear yet.

NOTE: I had tried to post the code here on the site but this site wont allow it since its HTML

Here is the working prototype in development and what I have made so far: https://dl.dropbox.com/u/36346467/temp/index.html

NOTE: Mods/Admins I hope this isnt against site rules. I'm not advertising or any of the sorts just using the server to prototype the design/site I hope you don't remove the link. Also if this post is in the wrong spot feel free to move it to the correct location.

Closing: Well that is all I have for now, but i will update this post weekly with my progress so I hope you follow it and you enjoy..