What is Your Design Process BEFORE Coding?

I always open up Photoshop and try to make a mockup of my designs before going into Dreamweaver to code, but I find it hard to think up ideas right on the spot. What are some ways to ensure that your designs are creative and looking great?

 

take your time, a good design is not rushed, also check out lots of other sites for inspiration, look at lots so that you don't get focused on just one design. My resources on my site should be a great help for you.

http://www.brightboxstudios.com

please let me know if you need help with ideas. also paper sketches are always my very beginning, allowing me to do anything I want as quick and custom as I would like, then I use fireworks and move on to dreamweaver!

Reuben

 

Sometimes I'll try to sit down and sketch it out, but I'm not very artistic so it's difficult to get deeper into details than just "2 columns with a header, logo to the left, and footer". Thanks for the link though, I can start bookmarking sites that I find as "inspirational" to help aide in my designs.

 

no problem man! if u copy the parts of the resources on my page you like, it may let you import them as an html file into your bookmarks in firefox..Its an exported file from mine.

If you need and professional design done, let me know, we can work some stuff out im sure


aim, skype: kangaroobin302

 

sketching it out is the best after design in photoshop
but I also keep in mind while I design in photoshop that what is the use of the section and imagine how I could xhtml without too much efforts

 

I usually take paper and a pencil and start sketching ideas. The i decide on the style guide. I choose the style of the elements that will be used and only then i open photoshop. Don't worry if it doesn't happen the first time. It's not rare occasion for me to make things more than once.

 

look at a template i would see as fitting, pimp it out with my own ideas and presto....
works like a harm every time and I've NEVER had a customer complain
Try this ...it works

 

Everytime I start I break down a site into it's basic geometric shapes. I use the photoshop shapes tool and just place my shapes where I want them to go. I then save that layout, so I have built up a library of about 50 layouts of just shapes. Once I have the shapes where I want them, I then start to flesh out the site with more details. But seeing things as shapes really helps for me. And since I have a library of my own, when i get stuck I just mix and match layout ideas from my old layouts I saved.

 

I also like to start with pencil and paper...there is something about the intimacy of the process that helps my creativity more than simply creating a mockup in Photoshop.

After I get a general feel for what I want to do, I move on to Photoshop to fine tune things. I will admit that sometimes I skip this phase, though...I have a programming background, and sometimes it's easier and quicker for me to start coding in XHTML and CSS and work on the fly.

I also tend to keep things very simple and general in the beginning...the specifics tend to come easier once I've delved into the design process a little.

 

I design the images as I need them, making an empty skeleton of the page in HTML to get roughly how I want it.

 

Do you use a template for the design or do you just look at a template for inspiration? Just curious. Can you describe with more detail what your process is like? Looks interesting. Thanks!

 

I always try to write down the features that I want on my main page. From there, I try to ensure that the layout is done in a way that the sub pages look good while keeping those features that I want to show across the website (whether that just be navigation, or other menus).

 

Works for me too.

 

I've developed a process that has worked very well for me:

1. Mockup EVERYTHING in fireworks. This means graphics, content, icons, etc... Tweak away at the template until it is just right. It's so much easier to fix things or change your mind in a mockup than in code.

2. Slice the layout in Fireworks using the least number of images necessary to code the design. Use guides to section off square portions of the layout and use them as borders for your slices. Rename each slice to match what you want the images to be named on export. Export the images.

3. This step saves more time and frustration for me than any other. Take a blank sheet of copier paper and draw the gridlines from your design. Take measurements in fireworks and write them down in the squares you've drawn. For example you draw a long rectangle representing the header and then right down the measurements (ie 976px width, 55px height) any background and text colors (ie #fff background, #000 text) and the name of any css ids/classes you'll need to create your style sheet (ie #header) and so on with image names, fonts, etc.. This becomes a reference for your layout at a glance so you aren't having to constantly look back at the mockup.

4. Whip out your favorite html editor (notepad++) and create your skeleton layout by recreating your drawn out rectangles into a div structure. It's then childs play to do your style sheet since you know exactly what colors, sizes, fonts, floats, backgrounds, etc you need.

In this way I can rapidly create a design from scratch in less than a day even if I spend a lot of extra time polishing the mockup.

 

...thats reduculous

just export you entire fireworks sliced project into dreamweaver and it auto creates your code with space for everything

 

I mainly design as I code. I lay out the containers with coloured backgrounds, then as the page starts to take shape it inspires me as to what artwork to include.

 

Sure works fine for table based layouts.... and the SmartCSS exporter works well for very loose designs. Once you have effects that rely on overlapped elements or transparency this is lost. Not to mention the fact you have to troubleshoot the crappy code that is generated if you have to make a change. If you want the lightest, most compliant code and image layout you have to do it by hand. As they say, It's hard work to take the easy way out.

 

...also a waste of time

please look at my first post, it is the best and easiest way to design websites

 

You forgot to add the words "that are garbage, and inaccessible."

Slicing? What decade did you learn web design? Sliced sites are almost gaurenteed to be HUGE compared to a properly-built and CODED (not sliced) website. You want a robot to build a site for you (DW)? That's fine an dandy, but please don't do it for anyone with a legitimate business. Companies want their sites to be accessible to everyone-- that means not just teenagers with high-speed internet access. It means everyone. The blind. Those on dial-up. People with 800x600 monitors. They surf too. (not that we don't all see crap company websites out there, but they are not serving those companies as well as good sites do).

Waste of time? Sorry, I disagree, bothering to spend time doing things right is a sign that you should be doing it at all. Having dreambeaver write your code for you is a sign that you shouldn't be coding, except for yourself (notice I'm not saying "using dreambeaver as a tool", I'm saying "having it write the code for you"). Because you're not. A robot is doing it for you, and doing it badly. I guess if I had a robot suit that played basketball really well, I could call myself a basketball player, a pro even, and tell everyone that training and developing real skills is a rediculous[sic] waste of time cause being a great ball player is so easy with this suit that does it for you...

I'm not trying to be evil here, rooben, but I just very strongly disagree with you : ) Everyone does have different ways of setting up, designing, and building websites, but there is a point somewhere where one can say, the right way and the wrong way. Especially for those of us who spent a lot of time learning the hows and whys of HTML and CSS, and test our brains out for every kind of surfer, because we care about quality and accessibility.

 

I tend to need a starting point. It's very difficult to just invent something from a blank sheet of paper, for all but the most world renowned of artists / creative people.

If there's a decent logo to work from, I tend to go from there (it usually gives an idea of the colours and general styling to aim for), then sketch out some ideas on paper, then try to translate it into Dreamweaver and see what comes out. If it looks reasonable, I then construct it properly in the code view.