Ready to move on to Phase Two. Design help Please

Get Started
1

Hi there! This will be my first post of many, was looking for a good forum to learn what I need to pull my website idea together, and this seems like a great place to do it!

I have a little experience in everything… Not enough to be collaborative however, so I would like to start anew.

I have included a rough sketch of my Home Page, I will explain the elements and how I wish them to behave, if you guys could point me in the right direction to make this happen it would be greatly appreciated!!

597×799 38.1 KB

Starting with the header, I would like a graphical logo (which I am capable of making) then will be the website name displayed.
Followed by a search bar, that I want the users to be able to choose whether they are searching the website for something, or if they want to search the web.
Finally I would like the Login Area. The Login will log them into the website, where they can claim rewards on their account, and buy products.

In the Navigation Menu I would like to somehow tie the tabs PC and Consoles together with the words “Walkthroughs”. I suppose I need advice on how to go about getting a Menu Entirely.

I would like the Featured News slot to be interchangeable, where I can input an Image and a short description that can be clicked on and will redirect the user to its page. This can be a still image, does not need to be revolving at all. To the right will be Ads, whether it will be Google Adsense or Paid Subscriptions will be decided later.

The spotlight area:

The top portion will have an image that pertains to the title and description that is next to it, right below it will be a few more images that can be clicked on and viewed in the spotlight area. (The little thumbs will take the place of the bigger thumb above them, and when the bigger thumb or title is clicked will redirect user to that page)

The News/Forum Topics area:

I would like this area to be split, rather I would like the top of it to be split. The information displayed in the rest of the area will be updated depending on which is clicked (News or Forum Topics).

Rewards Area:

I will be buying/making rewards for users, I would like a showcase window displayed in the fashion I have shown. Where the images revolve, the center image being displayed bigger than the rest, with a slight description below the selected image. More Ads on the right

Products Window:

Straightforward I would like to display product images, fairly small with price underneath them, user can click the image and it will take them to its page on the store where they can read more about it and purchase it.

Affiliate spot:

A split area as shown, where two affiliates can fit. Each half will be a link to their website.

GH area:

The Haven will be another website entirely, which I will describe later, as I will need much help with it as well. However for now it can remain a picture. I assume all it will need to be is hyper linked to the proper area later.

So! If you guys could get me started, I have noticed the large amount of resources here, I however need to know what I should start studying to make my dream happen! Any ideas, advice, critiques? Please let me know!

2

50 views now and not one suggestion. Perhaps someone could make a suggestion as to how I could re-write my post to get some suggestions?

3

I’m not really sure what you’re looking for. If you’re wanting people to write the code for you, you’re probably going to be out of luck. You’ve said

I however need to know what I should start studying to make my dream happen
but you haven’t said where you’re starting from, how much you already know, if there are any parts of the process where you do feel like you know what’s going on. If you really are starting from scratch, you’ve got a lot of learning to do. That doesn’t mean you can’t do it, and I don’t want it to sound like I’m trying to put you off from trying, because it clearly is possible to learn it (or else none of us would be here!), but there’s a lot to take in.

Sitepoint has produced a lot of books on the subject of creating web pages. One of the best is Build Your Own Website The Right Way. If you’re not sure about spending $20 (for the digital edition, it’s a bit more if you want it in paper form), you can download some chapters for free to get a feel for it before handing over your money. If you’re serious about learning web design, that book is a great investment. Then, when you have got started, you can come back with any specific questions. At the moment, what you’ve written is just a bit too vague and open-ended, which is probably why you haven’t had a response yet.

4

Sounds good. I took a look at the beginner thread, it’s a bit daunting. I figured people who already have a grasp would be able to look at the elements and would be able to say “Eh, he needs CSS for that, Javascript would take care of that, etc”.

Definitely not looking for anyone to write me any code, I have a lot of experience, just a little in everything. But it goes like the saying “A little of everything, a lot of nothing”

So what I was hoping is that the community here would assist me as if I am starting from the beginning, discuss the different parts with me and what might best go where, and in the end, I would like to tie it all up in a tutorial. A from scratch, but complete how-to from the beginning, redirect you every where you need to go along the way to learn what you need to know.

I suppose design would be the best place to start. I’ve got a sketch, now I have got to get that digital. Where should I start? What program should I use?

Next would be the elements in the page and their behavior. Where might I be able to find that kind of information?
For instance the revolving awards window, what kind of scripting might work best for that? (I say scripting for lack of knowledge).

5

To get the basic design structure and functionality, you’ll need HTML and CSS.
To get the revolving awards window, you’ll need Javascript (or you can go with an off-the-shelf package like JQuery, but beware of the downsides of this)
If the content is going to be dynamic, you’ll probably want PHP, although there are other options including an off-the-shelf CMS.
For the search, you can either write your own in a programming language like Perl (for example … I have no idea if that’s the right one!) or use a Google site search.

You’ve not given yourself an easy design to start off with!

6

Go big, be bold! Lol.

Graphic Design; Adobe Photoshop?

Better to write the coding all my self, or use something like Dreamweaver?

I think mostly dynamic content would be the better way to go… The news and Forum Topics area should update when new threads are started. Would there be any way to have in the forums a News thread, that when updated populated the news area on the home page?

The products area should shift products I think, every page load it randomly picks 10 new products to display.

When I post a reply, I am not specifically asking you to reply, just hoping the community in general will chime in.

7

There is going to be quit a bit of sever-side programming involved in building what you want. I would recommend PHP since its by far the simplest to set-up and begin testing. However, that does not really get around the fact that you need to create a publishing, eCommerce and Awards CMS. That task in itself could probably take your over a year to create, starting from nothing. Surly it would be the most unsecure, pile or trash being your first program.

That said, I would encourage you to take a look at the various open source CMS’s that exist to see if any slightly fir your needs. Once you find something that that could work figure out what needs to be done to it in terms of customization to achieve your end goals, if its even possible with the system for that matter.

All that said, the design is a very small part of all this. You could probably create a static design in one-two weeks time. The thing that is going to take by far the longest and be the most involved will be all the different functional features you desire, such as product management, awards, and news, etc. That is considerable task given no knowledge of server-side programming… most likely one that even if you manage to over come have plenty bugs, security and organizational flaws.

8

Appreciate the honesty :wink:

Could you explain "Publishing, eCommerce, and Awards CMS a little more?

Elaborate on what they are, and what they are for? Why so long, is it that elaborate? (Ha, Elab-or-ate, elabora-te.)

Time is not an issue, believed this would be a long term project, however I am surprised.

I thought that it would amount this:

Products area: We will have to designate the areas table, 5x2, each product location (I’ll call it a cell), would define image dimensions, define a space underneath to display text content. Each cell would call on item/product database for its details, and each cell would display accordingly?

Same thing goes for rewards, and the area would be designated by scripting to display the images revolving. But the information would be gathered from a database.

Okay, so I am thinking for an issue of quickness, it would be easier to put it all together static, all the information already prepared to be used on each viewing until changed server side. A little more maintaining would be needed, but would be a faster build, until the (Publishing,eCommerce, and Awards CMS) were done?

You said “Probably create a static in two times” Not meaning to correct, just making sure I am understanding what you meant, I think your telling me I could probably create a static design twice as fast?

I can definitely roll with static until more functional results can be achieved if that’s the case.

9

You’ve got at least those three areas where you’ll have dynamic content, so you will need some form of content management in place for each of those three areas. In terms of elaborateness (I’m not sure that’s a word, but the spillcheek hasn’t picked it up so let’s roll with it), any kind of content management takes time to set up to ensure that (a) it works, (b) it is secure, and (c) it does what you want. And that’s often where the problem comes … pinning down the exact process that you need it to go through.

I thought that it would amount this:

Products area: We will have to designate the areas table, 5x2, each product location (I’ll call it a cell), would define image dimensions, define a space underneath to display text content. Each cell would call on item/product database for its details, and each cell would display accordingly?

Well, this is the 21st century, so we’ll go with something more appropriate than a table, a list would probably do the job perfectly well, you can still arrange the list items in a 5×2 grid pattern. Sure, I could knock that up for a static page in a few minutes. But you’re not having a static page, from what I can tell – you’re wanting some kind of server-side wizardry to pull that content from a back-end database based on … well, based on what? Completely random, the content page they’re looking at, past behaviour recorded from their login, special promotion products? This is where it starts to get complicated.

Same thing goes for rewards, and the area would be designated by scripting to display the images revolving. But the information would be gathered from a database.

There are various off-the-shelf image rotators available out there, taking random images or cycling through a stack, which may be easier to implement than writing one yourself.

Okay, so I am thinking for an issue of quickness, it would be easier to put it all together static, all the information already prepared to be used on each viewing until changed server side. A little more maintaining would be needed, but would be a faster build, until the (Publishing,eCommerce, and Awards CMS) were done?

Yes, creating the basic, static design would be a good way to start. That way, you’ll start to get a feel for the design process and how far you want to take it, and you’ll probably find that it helps to clarify the programming processes in your mind as to exactly what it is you want each section to accomplish.

You said “Probably create a static in two times” Not meaning to correct, just making sure I am understanding what you meant, I think your telling me I could probably create a static design twice as fast?

Hmm, either you misread what oddz wrote or he edited it while you were typing up your reply, because it now says “You could probably create a static design in one-two weeks time”, which does make sense :slight_smile:

10

Okay, I will roll with static.

Server-side wizardry: I would like the images displayed to be only the new products/rewards. Those won’t update frequently, so they will display the same pictures for some time.

What makes a list better than a table?

An image rotatory sounds good, I will look into that, I thought it would be good that the rewards popped out at the user, make them seem more appealing than the static non moving products counterpart below (which also have to be bought).

Oddz edit finger was just to quick for me. Lol

11

That should be easy enough to set up then.

The reason that a list is better than a table is because it’s, well, a list of things. You’re just choosing to display it in two rows of five items (or was it two columns? Not that that matters…). A table is a series of related items that are grouped into columns and rows. For example, if you had

Product       | Price  | Availability | Launched
--------------+--------+--------------+---------
Robot cat     |  $ 60  |  2 in stock  | Jun 2011
--------------+--------+--------------+---------
10mpx camera  |  $250  | 10 in stock  | Mar 2011
--------------+--------+--------------+---------
Moon buggy    | $99999 | out of stock | Apr 1968

that is a table, because every cell is related to both the column (eg price) and the row (eg robot cat). Just arranging things in a grid pattern is a different setup, so you need to use different code.

12

Alright, I understand that perfectly. Going to get started now, and will return later with some results and go from there!