How to go ahead in web design?

Question

I am having a hard time learning web design. I read several books and I know a bit of how to do things. I also like to study with firebug how the "big guys" made their web sites. But when I try to realize of how a complex ecommerce site is done I usually catch myself of do not know what to do next. Lets say I can easily write content in html, but when I want to attach css rules it is really hard for me to think of what should go next and what it will change. It is really hard to explain my problem, but is there a method of how to implement things, like a correct order or smth? Maybe web designers think in blocks or they imagine everything in their heads the whole process or I just have to put a lot more time into this?

I just looking forward to these days when I will be writing html/css code whitout looking for help online or at the other sites :)

Answer 1

It looks like you're starting in the wrong place, especially as a designer. If you were primarily a programmer, I would understand, but since you're posting in a graphic design exchange, I'll jump to it. Correct me if I'm wrong, but I'll assume you have been crafting your designs with HTML, and then you are moving to CSS.

Here's the most important part: everyone designs differently, it's just how our heads work. For example, I find myself jumping from style to style as soon as I get bored of another. I work very non-linearly.

However, I, and most designers like me, always start in one place.

Anyway, most designers start on a piece of paper first, sketching out concepts and fleshing out ideas. Once you have a rudimentary concept, move onto Photoshop (or Illustrator, some swear by it, I don't). Here, I'd create static mockups of every single page on the site. Only then would I craft the HTML and CSS.

Of course, for E-Commerce sites, or any service-type sites, the next step is properly integrating the site with PHP or Ruby on Rails, which requires a whole 'nother book.

A helpful tip that I learned a little too late is to use a grid system, like 960.gs or inuit.css. Keep this grid in mind when you mockup your site.

Happy Designing!

Answer 2

My advice to you would be this. Often, we want to be able to know how to go about doing things the "right", the "correct" or the "best" way. I am guilty of this as well. In webdesign and in design in general, there are a lot of different ways to get the same outcome. In order for you to understand these different methods and which method will fit you, you can read articles, tutorials, books, watch videos, etc. However the MOST important thing is that you experiment, make mistakes, and immerse yourself in what your doing. This is especially important with programming (html, php, css or whatever floats your boat.) because you find might that there are a lot of nuances and hiccups that you won't understand without adequate experience.

Create a little sandbox where you can make files, test little snippets of code, and dissect different things. Try not to do things you already know (for me this is how I get stuck), constantly challenge yourself and try to learn things that you don't understand. Bookmark (or you can blog) tutorials, and other resources that look interesting but you might not have the time to read now.

I personally think that it's good to think in blocks too! For example if you know that you're going to make a commerce site. It's good to think about the design aspect, then the slicing/html/css aspect, then the backend php or asp that will drive the site, but be aware that they all relate to each other. If you don't think about the backend, the content, or the type of your site, your design might not be appropriate. Or if you slice the design a particular way, when adding content you might find that it's too hard to add content as you didn't make your design flexible. All this comes with experience, don't get frustrated if you can't figure out what to do next. Take a step back and compartmentalize your problem. Taking baby steps, and tackling a problem one step at a time makes things more manageable.

My general workflow goes something like this

1. Concept - what type of site?, how much content?, what main pages might be needed?, will there be a forum?, user login?, does the owner need a cms? would the content look better on a wide layout or centered? what type of layout would make the site more functional. colors etc etc. Basically this step is just getting an idea of what the site is all about so you can come up with a fitting design.

2. Design - I take all of the ideas I thought about in the concept stage and start designing! Sometimes I sketch my ideas out because I'm not quite sure what I want the site to look like. Sometimes I had a great idea in my head and jump straight to photoshop. I don't stop until I am completely happy. I generally follow this quote:

“Perfection is achieved perfection not when there is nothing left to add, but when there is nothing left to take away” – Antoine de Saint-Exupery

1. Slicing - Basically the html and css portion of the site. You can find a lot of tutorials on this.

2. Backend/Database - You can add PHP or ASP or another language to make the site more functional. Incorporating a forum a login system, user comments, a cms (although I've seen XML cms's as well), or a database to store information.

Sometimes steps 3 & 4 kinda get mushed together, because as I'm coding the PHP I see something in the css that doesn't work or needs to be added, changed, or deleted. Or sometimes I'll need to add some javascript in.

Other people have their own workflow, and you will develop yours as well. With experience, you will think about the process less, and it will become more intuitive.

Hope this helps! Good Luck! :)

PS: Asking questions is important too!

Answer 3

I have been in the IT industry for over 20 years now and can do a little of everything. One thing I have found is that things are constantly changing. To this day, I still have a network of friends that I bounce questions off to fix problems. I believe this is the norm. An old instructor back in my college days said that there is no way to know all the answers, but know where you can find them! I believe everyone here can relate to that!

So ask questions and gain insight.

The majority of my website design is implemented in the planning stage before I even start coding.

You must ask:

1. What is the purpose of the website?
2. Look and Feel of Web Site (use wire-frames, rough sketches to flesh it out)
3. Logical Structure

I use the internet to get ideas. Snagit (http://www.techsmith.com/snagit/) is a great piece of software that allows you to capture images in one simple click. I browse the internet looking for site with a common theme to the one I'm planning to build then I assemble these snippets into a collage that I use to inspire ideas.

I then use Photoshop or Fireworks to mock-up the site.

Using the Drupal CMS base, my personal choice for Website creation, I make a list of modules to implement in the site depending on functionality that's needed

With Drupal. I worry about implementing the theme last and work on function first. While creating a site, I choose a default theme, get the site functioning, and then use base starter theme like ZEN to code CSS on.

Another piece of software I have found very useful for CSS editing is Stylizer It is a great tool to do realtime CSS edits to a site on an external server

Hope this Helps!

Answer 4

Take a look at a website (lets say this one) that takes your fancy. Use the 'view page source' option on your browser menu (most browsers have this or equivalent). Look at the content. Look at included .js and .css files to see how the javascript and styles affect things.

Use your browser to download a whole web page to make it local, and try making it look how you want. Look up in docs anything which you don't know what it does.

A large number of web designers use templates, there are loads of free template sources online. You get to download the template and then customize if you wish to make it your own style.

Not so many people create a website from scratch - there's little point when there's so many resources available to give you a head start.

There are also loads of web based rapid application development tools to get web apps off the ground and you can learn a lot from trying out one of those (if you have programming experience).

Answer 5

It is important to remember that large, complex sites can be developed by a team, with individuals having a specialty. eCommerce site are, more often than not, packages already developed by one company that is then customized and populated by someone else. It is good to know what goes into making these sites, but it is also important to know when to not re-invent the wheel.

I just looking forward to these days when I will be writing html/css code whitout looking for help online or at the other sites

That will never happen, but rather it will happen less and less as you gain more experience. But even with the technologies I am most familiar with, I still sometimes have to go online to get help sorting things out. There is never anything wrong with asking for help with something. Otherwise, sites like this wouldn't need to exist.