How easy to make this design into a functional website?

ScarySquirrel

ScarySquirrel

ScarySquirrel

Soldato
Joined
13 Jan 2004
Posts
23,864
Location
South East
Hello.

I would like to learn and build myself a basic portfolio site. I was bored tonight so knocked up a simple design, this is by no means finished and was simply a bit of fun, so no comments on the design please.

Now, I know some BASIC HTML, but I have no idea how I would take something like this and make a website. I do understand I would have to slice some stuff up, write some code, etc etc.

I plan to just integrate Simpleviewer for galleries and stuff, but seriously, I wouldn't yet know where to start.

So looking at the below, what would the next steps be? And could you help me find some resources that teach me how to do it? It seems there are lots of guides out there but some are outdated, some I just don't know if they are worth reading etc etc.

Thanks

homeqnz.jpg
 
This is pretty simple. Without going into detail, you'll want to export the background gradient as a single 1px wide image.

Then the logo will be its own image centered. Each of the four navigation images can just be square images - not only is this easier but it'll allow some leeway with mouse positioning/clicking.

The only problem is the footer flowers - this can either be at the bottom of the page no matter the height or below the nav as it is now, although it'll look weird having a gap below this.

Overall this wouldn't be a difficult design to construct at all - it would probably take me 20 odd minutes skipping a few things (cross-browser compat etc).

Let me know if you need any further help. You're more than welcome to add me on MSN too :)
 
You sir, are a legend.

I'm going to play some Call of Duty now I think but I will add you to MSN if that's ok as I would REALLY appreciate a helping hand so I can get something up and running over the next couple of weeks.

Annoyingly I am moving on Friday so it probably won't be until next week I expect.

I'm thinking the About page will just be a simple text page.

Portfolio will link to another page similar to above, with small logo, and with about 6 polaroids in a grid, each a different category and linking off to its own Simpleviewer gallery.

Blog will link to a Wordpress blog.

Contact will open a new page with a contact form, which I assume I can just get some free code for.

The little heart things will just link off to my FB, LinkedIn, Flickr and Twitter :)
 
Yeh it is a good design actually, simple but eye catching, very nice.

If you plan on learning how to use wordpress for your blog, why don't you just design the whole site in wordpress? Easier to maintain, good SEO loads of addons etc..
 
Yeah I see what you're saying, but I really would like something that I can say I built (with help). I only put blog there as I couldn't think of anything else, I don't actually plan on running a blog :p

Portfolio page

portfolioy.jpg


About - Did this in 5 mins so needs work. Like the fact the text is currently floating a bit.

aboutw.jpg
 
Last edited:
Well, I had a crack at slicing up the homepage this morning, but I had to leave for work.

rghjones has kindly offered to help me out when I get stuck. So I'll carry on slicing and then give him a shout. I have a feeling I may have to alter the design for it to work, but because I don't know what the next steps are yet I'm just designing how I wish.

I am moving this week so I probably won't get much done in the next week or so. But I'll update this thread if/when I progress :)
 
Really like that design, esp the footer pattern. Only thing I'd change personally is to switch the background gradient to green at top to white at bottom.
 
suarve said:
Really like that design, esp the footer pattern. Only thing I'd change personally is to switch the background gradient to green at top to white at bottom.
Click to expand...

Thanks mate. I'll give that a go, I was thinking of ditching the white and going with the green that is currently at bottom, at the top, and then a gradient to a darker green.

I'll try and few and post them to see what people think :)
 
ScarySquirrel said:
Thanks mate. I'll give that a go, I was thinking of ditching the white and going with the green that is currently at bottom, at the top, and then a gradient to a darker green.

I'll try and few and post them to see what people think :)
Click to expand...

Nice site :) My fave bit? The choice and treatment of the the logotype, especially the "photography". Wide-tracked geometric uppercase for the sophisticated win!

Keep the white - it implies controlled, diffused light, and subtly strengthens the initial "It's a photographer's site" message. A pale yellow-green might work, too, but you'll lose that implication. Go much darker and you'll lose the lively freshness of the current layout.

Have you considered how elements change upon interacting [hover, visited etc]?
 
Last edited:
You must log in or register to reply here.
Back
Top Bottom