My very first site.....help!

Hi guys

Ive spent the last 3 months working hard at learning html/css. I’m aiming to eventually be a developer, not a designer.

Suddenly I’ve been asked to build a site for a friend. He cannot afford to get it designed and developed so I will also be tackling it free of charge, which I’m happy to do for the practice. It only needs to be 4-5 pages. Its to advertise a short film he has made with his film production company.

My css/html knowledge is solid but still very basic. My photoshop is very basic indeed. I’m reasonably confident with most of the coding side of things for the purposes of this site, although it will be stretching me also (no bad thing!). Ive told him to forget anything that might require more complex stuff like Javascript!

Where I need help is with how to organise the whole process. I want to tackle things in a methodical, organised way but dont really know where to start. A couple of questions:

  1. Whats the basic design process?
  2. Any tips on how to organise myself in terms of the development process?

I want to keep things clean and structured and get off to a good start so any advice/links you can offer will be greatly appreciated. Right now, at the start, it all feels a bit overwhelming!

Thanks :slight_smile:

Hi murphaloid. Welcome to SitePoint. :slight_smile:

In my view, the best place to start is with the content. Look at what the site needs to present, what it needs to say and display. Text? Images? Video? Logo? Get all these materials first, see how they relate to each other, how they most logically relate to each other, and let that inform the structure and layout of the site. Form this, knock up an initial wireframe (a basic blocking out of where all the bits will go) and get that approved. Then add in some design and get coding! :slight_smile:

Start with an sketch of the website then do an design for the website.
After that slice the design into small components; then you are ready to code the website.

Good Luck

Take a look at the smashingmagazine inspiration category, themeforest etc. and see some minimalistic designs. In your case this can do the trick, since, if you do it right, it will be elegant and simple and won’t show your lack of experience in Photoshop. Plan the content as it will appear and then it’s easier to make it work in a layout.

Ok…great advice from all of you …thank you :slight_smile:

Just one more question…the site Im doing needs to have one box which will contain dates/venues, and is the only part of the site that will need regular updating by the client. Is it possible to embed something in there that will make it simple for the client to update?

I second Ralph’s approach.

As for an editable content box, there are any number of ways to do that.

The simplest way would be to use a server-side include to include a separate file into that space, then you can just edit that one file all by itself.

In PHP, a server-side include would look like:


<?php include "myfile.php" ?>

That would require you to run on a server with PHP (which is very common). You could also do the same with just about any other server-side language and it’s the same idea. You would just keep the list of dates in that file, so when you need to edit those you just throw open that file.

There are “better” ways to do it, but you obviously get a lot more complex. :wink:

thanks for that samanime…what you said actually went way over my head, but I wil figure it out when Im ready.

Basically you’re saying that I can get on with designing and building the site, and that I can set it up later for the client to easily update the box, right?

cheers

Is there any reason why you can’t use WordPress? If you load it to a folder and use the index page for whatever you like to build you will have a site up and running in a day and have an index page (and whatever others you want to add of course) you can build on for your learning curve.

Here is a site I have a WordPress Blog on And here is a site that all in all hour wise took me say about a day to build (including setting up all the WordPress pages and configurations) [URL=“http://hirecaricaturist.com/”]That is here.

That has a slide show on it that is free to use and I can point you to download if it would be of use for display purposes?

The WordPress installations use the Theme Suffusion by Sayontan Sinha over at www.Aquoid.com which comes with 17 design choices (colours) and masses of configuration options.

I even have a Project thing going on where we go through the set up

If your friend wants to be able to have content that is up datable perhaps WordPress is worth considering (There will be plugins that do what you need) and if so I would suggest giving the Suffusion Theme (Framework) a look over - Oh it’s free btw > http://wordpress.org/extend/themes/suffusion

PS There is no need to be afraid of Javascript with jQuery

If I can do it believe me anyone can handle it as all you need do is connect it

I agree with the answer that you should start by gathering the content and work through that to decide how to organize the site, what your keywords will be, which terms make most sense to use for your target audience, etc. Try to work through that before getting into how things should look.

As part of content gathering find out if there are any logos or color schemes from biz cards, letterheads, signs, brochures etc. that you may want to match.

A few notes on graphics with benefit of hindsight. Save all the original images; you may need to go back to them someday. Save all your creations as layered psds; you might need to re-edit them someday. Save them where you will be able to easily find them. Use “save for web” when making versions to use on your site to get as small a file size as possible with adequate appearance.

Record what fonts you use in your graphics (and where the fonts came from) Record the source of any graphics you use that you did not create yourself. Record what colors you decide to use for backgrounds, etc. It is a lot easier if you have a handy reference sheet than to have to go back and dig through your code.

As someone who has done free sites for others figuring out a CMS solution so they can do their own updates sounds like an excellent idea. I haven’t done that yet. If you do end up doing updates, set up a standard format for them to send the info, perhaps even develop a form. This helps keep the work on your end to a minimum (not having to figure out what day of the week a particular date falls on, etc.)

It can be helpful to have your friend tell you a few sites in general he likes (a general idea of his taste.) Also to look with him specifically at a few sites that serve the same function as the site you are designing to find ideas to incorporate or avoid.

Not really true. Yes, you learn a lot over the years, but it doesn’t take too long to learn enough to make a nice website—especially with the tools available today, such as CMSs and pre-made templates.

In my opinion it is difficult for one person to do and to know about so many different aspects to designing a website. It would take years of working in a team in a professional environment to gather all the skills necessary to put up a good site, let alone a beautifully designed site. Sorry don’t mean to discourage you. All I want to way is that you have a very challenging task ahead. Good luck.

Most of the sites I work on are small sites, not much bigger than the 4-5 pages you’re envisaging for this site. I’ve never had a problem with doing these on my own. Come to that, I’m entirely self-taught and have never had a chance to work in a team. My sites are built with valid, semantic HTML and valid CSS. Whether or not they’re beautifully designed is a matter of personal taste, but my clients have all been very happy with them.

So don’t be put off - and you know where to come for help if you need it. :slight_smile:

Great!

Thanks for all those answers guys. Some food for thought there and a few very useful tips :slight_smile:

Here’s a link that may come in handy: http://www.webstyleguide.com/index.html

As someone who is relatively new to web design, I’m a big fan of books–here are three I’ve found very helpful:

  • “Sexy Web Design” by Elliot Jay Stocks
    This book is almost entirely about the process of planning a site, plus some design tips (don’t be put off by the title).

  • “Learning Web Design” Jennifer Niederst Robbins
    This is a great, well written book for beginners. I’m sure some of it would be too basic for you, but it includes lots of good technical information about handing graphics.

  • “Smashing CSS” by Eric A. Meyer
    This is a great book for really understanding how CSS works and how flexible it can be.

While it’s true that many different skills are used in creating a website, part of the fun is honing those skills over time. For now, if design and graphics aren’t your strength, keep it simple.

Karen Sue suggested you ask your friend to show you sites he likes (actually all her suggestions were great). This will not only give you an idea of their taste, but their expectations. If everything they like is very complex and beyond your current skills, it will give you jumping-off point for a conversation about what you can and can’t do.