Webdesign - Need help, what do I do next?

Sean · Mon 13/04/2009 19:21:02

Hey Everybody,

I've been working away at a web-design project for a friend of mine, I'm designing a basic website for his internet radio station. I originally started the design off from a 'free template' in the false hope that I'd be able to dodge around all the actual 'coding' of things. I've decided the best way to tackle this, is instead to drop the 'free template' and just design everything from scratch, and try and code it myself.

So, here's the inspiration

Original Template - http://www.freetemplatesonline.com/templat...mplates-40.html

Preview Image - http://mynetimages.com/afd81814_md.jpg

I've included them just so you know where I got my inspiration from, however as I said I'll be using my own hand-written code, and PhotoShop work. I feel that my work once finished will stand alone from the original source.

Now that I've taken the plunge, and decided to code it up myself I've made some minor overhauls, that I think will make it easier to code.

Here's what I have so far:

http://mynetimages.com/a4c37a5d.jpg

I'd appreciate any feedback on the design so far. Do you like the layout, the colours, the overall style?

Would you be happy surfing a site in this mould?

Do you have any suggestions, or tips to offer?

I look forward to the feedback, thanks for your time.

- Sean

This is not my original post. I removed a long post asking for help tackling the html and css code for the layout. Some replies might not make sense in relation to the current post

Kastchey · Mon 13/04/2009 19:50:03

Wait a second... if I got you correctly, you took a template website, then cut out the unnecessary parts and then replaced the template graphics with your own design, is that right?
Do you use Slice>Save for Web method? Photoshop should be able to arrange your elements into a nice, working table.

Sean · Mon 13/04/2009 20:25:15

Hey Kastchey,

Yeah, that's basically what I did. Took a free template, modified the graphics, deleted the stuff I didn't want and told PhotoShop to save it.

However, the original PSD that I modified was already 'sliced', and when I opened Dreamweaver, the index file would call for a load of redundant images that were no longer part of the design. Resulting in a series of broken images, and all sorts of crappery.

So, I had a go at slicing it myself.. and got this:

http://mynetimages.com/ce54c8e6_md.jpg

Of course, when I saved it.. I had no idea how to take my new slicey into Dreamweaver, as a working page.

What I'm trying to work out now, is how I get from Photoshop > Slice > Working Webpage.

If I want one of my sliced images, to act as a text-box, for example.. how would that work?

It's all so overwhelming, I don't know where to start.

I'm reading up on HTML now, browsing through tutorials, etc.. but it still seems very complicated.

When you say 'photoshop should be able to arrange your elements into a nice, working table'.... I get confused.

Photoshop sorts the images, sure. How do I get my images working as a web-page though?

Kastchey · Mon 13/04/2009 21:05:36

This should get you a directory containing all your slices as separate images plus a Photoshop-built html file.

Sean · Tue 14/04/2009 00:39:57

Heyas,

Thanks for the pic, had another look and realized what the issue was.

I had my options set-up to 'save images only', = no html for me

Fixed that, and have been given some guidelines from another forum regarding the coding.

I'll check back in, with a proper update tommorow. Still have a few things to try out before I ask for more crit.

--

For now,

I'd just like some feedback on the ART/IMAGES.

--

Thanks for your time Kastchey!

Stupot · Tue 14/04/2009 01:17:29

The artwork is fantasmagasmic.
But the tagline 'Broadcasting Since 2009' probably won't work until at least 2010 ;-)

ThreeOhFour · Tue 14/04/2009 03:13:49

Looks really nice.

The background in the third one looks a bit like the Atari logo

.

Sam. · Tue 14/04/2009 13:43:51

not sure if this is a coinicidence of two people finding the same stock image, but your logo looks alot like the logo for a charity i did some work for last year!

http://www.studentradio.org.uk/events/hearingaid/

GarageGothic · Tue 14/04/2009 14:07:40

Methinks they are both based on the standard "ear protection required" pictogram.

Sean · Tue 14/04/2009 14:49:42

@ Stupot - Thanks, I thought it looked pretty nice too

Trying to clean it up in places, so it's easier to look at though. Some spots are still a bit chaotic. I'm happy that the general style is appealing to other people! Thanks for the encouragement.

@ Ben - Thanks again. The third image is actually just the 'stock' template that I was basing my inital designs off. I've now decided to drop there code, so I'm re-arranging parts of the layout and coding everything afresh. Gives me maximum control, and I can't be accused of 'nicking' free code

The logo may well be based off of Atari's logo, it does look very similar. However, that third image has nothing to do with me, or my work

I try to original, wherever possible.

@ Zooty - Hi mate, sorry if you thought I was 'nicking' your idea. I've actually been careful about that, and am sourcing my images, textures, etc from http://www.cgtextures.com/

As Garage kindly pointed out, my logo is based on the 'ear protection required' sign. The image I used as a reference is in theory royalty-free.

Here's a snippet from cgtextures.com FAQ:

Do I need to pay royalties when I use the textures?

No, CGTextures is not like most stock photography sites. Textures can be downloaded for free and used for free.

I've never seen that image used as a logo before, but I didn't really look around much. I thought it looked cool so I cropped it, modified it and chucked at the top.

Sorry if you felt I was copying your work. That isn't the case. $:-\$

Regarding the coding side of things, I've decided to just drop the template altogether, re-work the layout in photoshop and tackle the coding myself using a combination of HTML/CSS. Hopefully it will be less painful than it sounds

Quick Edit - Cleaned up the first post, to make it more relevant to the critics lounge.

Sam. · Wed 15/04/2009 15:03:02

Not at all, just thought it was a nice coincidence, i didn't design the logo!

(No more off topic, I promise)

.. · Wed 15/04/2009 22:52:19

I'm a freelance webdesigner by trade so hopefully I can give you a few tips

It's a very nice design overal and very impressive if it's your first site.

The only practical issue I can forsee is with the background. Backgrounds for websites generally have to be fixed, or tiled so that they will still render smoothly and quickly in browsers for people with different screen sizes. In the original design the whole design has a grungey border, so that it'll look nice centered in the browser, with a plain colour surrounding it. My suggestion to you would be to do something similar, maybe cropping it slightly so that it fits nicely within the average screen size.

Great work though ! Can't wait to see what you come up with.