 |
February 23 '10, 12:20 AM (#1)
|
|
|
New Member!
Join Date: February 2010
Location: Iceland
Posts: 6
|
Website designing approaches
So, usually when I start a website, I just map out the layout on paper, then start coding. I'll usually get half way through all the coding and layout stuff before I completely redo all the CSS. Then, once I finish the site, I usually go back in and make some more CSS themes if I have time.
I've seen a lot of people actually draw out what they want the actual website to look like in an image editing software first. Then, once they have the design and graphics ready, they start coding and laying out. I was thinking of trying this approach and seeing how well it goes. What design approaches to you guys take? Opinions, suggestions?
|
|
February 24 '10, 03:39 PM (#2)
|
|
|
WDF Staff
Join Date: April 2004
Location: Cottage Grove, Minnesota
Posts: 3,359
|
I like to see the page as it should look ... as a PDF file,
and then determine how I will do the layout based on how it looks.
It's important to know how wide the page will be (fluid or fixed),
and how the various areas (or sections) of the page will grow with text/content.
Knowing the changes in content will determine how to handle any background
images or color ... in some cases, it will require the design to change. A good thing
to catch right away, as it can save a lot of time.
Try doing it that way ...
Make an actual mock-page with graphics and text and then look at it side-by-side
with CSS layouts like these: http://layouts.ironmyers.com/
See if you can match a particular CSS layout with your design. Break apart any
necessary background images and work with fluid (or changing content). You
might find that designing your own CSS templates, themes, and layouts will be
much easier to do.
|
|
February 27 '10, 05:57 AM (#3)
|
|
|
WDF Addict!
Join Date: January 2010
Location: bangalore
Posts: 190
|
I usually prefer designing in photoshop the complete page. And then start coding.This way i know before hand how the outcome should look.
|
|
March 1 '10, 04:33 AM (#4)
|
|
|
WDF Member
Join Date: January 2010
Posts: 51
|
I also design the comp in photoshop then code as well. Prior I usually do some rough pen sketchs on paper to get an idea before diving into photoshop.
|
|
March 3 '10, 05:49 AM (#5)
|
|
|
[insert witty comment here]
Join Date: June 2008
Location: Sydney, Australia
Posts: 495
|
I play with mockups in photoshop, until the client is satisfied with the design, then I code it up. No slicing btw - hand coding all the way, with Notepad++. Dreamweaver is overrated.
This way, I do a quick design, thus not wasting unnecsssary time on the coding, which I find is the more time-consuming part.
|
|
March 3 '10, 05:51 AM (#6)
|
|
|
New Member!
Join Date: February 2010
Location: 3 Locust Street, Suite A Assonet, MA 02702
Posts: 4
|
I just focus on these e key elements :
- pages should load quickly and provide something to read almost instantly;
- pages should be well laid out and easy to assess i.e. work out what they are about;
- pages should be static i.e. they do not jump about as images load;
- pages should be"search engine friendly";
- pages should be easy to navigate so that you can find what you want;
- and most importantly, the content is useful and worthwhile.
|
|
March 3 '10, 05:55 AM (#7)
|
|
|
[insert witty comment here]
Join Date: June 2008
Location: Sydney, Australia
Posts: 495
|
Quote:
|
Originally Posted by joomlads07
I just focus on these e key elements :
- pages should load quickly and provide something to read almost instantly;
- pages should be well laid out and easy to assess i.e. work out what they are about;
- pages should be static i.e. they do not jump about as images load;
- pages should be"search engine friendly";
- pages should be easy to navigate so that you can find what you want;
- and most importantly, the content is useful and worthwhile.
|
Some great advice!
|
|
March 4 '10, 12:22 AM (#8)
|
|
|
<div id="learn"></div>
Join Date: February 2008
Location: Port Huron, Michigan
Posts: 965
|
Quote:
|
Originally Posted by diddy
Dreamweaver is overrated.
|
Diddy, don't get me started!
|
|
March 4 '10, 12:28 AM (#9)
|
|
|
[insert witty comment here]
Join Date: June 2008
Location: Sydney, Australia
Posts: 495
|
Quote:
|
Originally Posted by aeroweb99
Diddy, don't get me started!
|
....on how DreamWeaver is overrated, or are you against me too?
I'm a strict code-it-by-hand person, and then simply go to the browser and hit "refresh". I have absolutely no need for a WYSIWYG editor, so Notepad++ works absoltuely fine for me. Plus it can write all kinds of stuff from html and css to php, asp, java, python etc. It's great. (and it's free!  )
|
|
March 4 '10, 10:40 AM (#10)
|
|
|
<div id="learn"></div>
Join Date: February 2008
Location: Port Huron, Michigan
Posts: 965
|
I'm for DW. But this thread will get out of control if we start that debate.
In a nutshell:
- You can still hand code in DW.
- The CSS features alone will save you tons of time, and it's all semantic, w3c and all that.
- It has a great ftp
- I don't have to worry about typo's, which can lead to very valuable time to find
- Link and file updating across pages are very handy
- The wysiwyg is actually pretty darn accurate
- It highlights your div boxes so you can see exactly where they are, which is handy for positioning
- You can work with the css file without having to switch pages or programs, it's all in one view
- Drag from an href link to a file in the files pane, takes literally 1 second, so no time to type and no typos
I could go on. However, I don't use it for any backend coding, which I would imagine may be a whole different story.
|
|
March 23 '10, 04:57 PM (#11)
|
|
|
WDF Regular
Join Date: October 2008
Posts: 250
|
I use macromedia fireworks (others use photoshop) and I design my website to the pixel within this. I can then copy the images (all correctly sized) straight into my website.
Personally, I find it is easier to get measurements correct in fireworks before I start coding rather than spending hours tweaking, correcting code, correcting images, tweaking, correcting code, correcting images etc.
|
|
March 25 '10, 07:18 AM (#12)
|
|
|
Account Closed
Join Date: November 2009
Posts: 19
|
Use Photoshop for image editing and creating other graphics. If you are not familiar with Photoshop then let me tell you that its not at all difficult to learn. There are a number of tutorials available online to teach to web designing with the help of Photoshop.
|
|
March 30 '10, 09:09 PM (#13)
|
|
|
New Member!
Join Date: March 2010
Location: Australia NSW
Posts: 12
|
like jj1 I use Adobe Fireworks to build a mockup and play with colours, graphics text, layouts until I like what I see, I'm a visual person and I like to see every element of the design together, then I start slicing and putting it straight into Dreamweaver (hand coding is over rated  ).
I do still draw a very basic "stick figure" layout on paper if a design idea comes to mind and I'm doing something else at the time.
|
|
April 3 '10, 12:54 PM (#14)
|
|
|
New Member!
Join Date: April 2010
Posts: 1
|
Good advice.... it help a lot. What important in a website is that it is user friendly and fun to explore.
|
|
April 3 '10, 08:20 PM (#15)
|
|
|
New Member!
Join Date: March 2010
Location: Australia NSW
Posts: 12
|
totally agree, often the simplest designs are the best, I always try and keep the text on the home page to a minimum and aligned to the left, nothing worse than trying to force your eyes to read centered text. I also like to use Verdana font I hate crappy cheap looking fonts LOL I guess it's a designer thing
|
|
May 20 '10, 07:25 PM (#16)
|
|
|
WDF Member
Join Date: April 2010
Posts: 21
|
I start mock-ups in photoshop and illustrator. Starting with colours, graphics, a basic layout, content and information. I create about 3 different designs, with either the client picking the best one, or a majority vote (not leaving the final design for me to decide)! I then create as many pages as needed, then convert it to a pdf.
I find printing out the layout and having it as a hard-copy infront of you really helps when you are designing the webpage.
Personally, I use Dreamweaver, as I don't really know any different.
|
|
May 21 '10, 03:33 AM (#17)
|
|
|
Registered User
Join Date: May 2010
Posts: 1
|
Hi
I want to have a website for myself. Is anyone know best web designing service in Australia which gives full maintenance and support and 100% commitment to satisfy all my needs.
|
|
May 21 '10, 02:25 PM (#18)
|
|
|
WDF Staff
Join Date: April 2004
Location: Cottage Grove, Minnesota
Posts: 3,359
|
Rennimark ...
I think you know that you can use Google:
http://www.google.com/#hl=en&source=...7671ef050a6f1e
If you're planning on getting a link placed on WDF for SEO purposes, it won't
last on here very long ... Just so you know ... I'm keeping an eye on it.
|
|
May 25 '10, 09:35 PM (#19)
|
|
|
New Member!
Join Date: April 2010
Location: Gold Coast
Posts: 18
|
Pesonally the fisrt thing I do is research the clients company Im designing the site for. This includes getting them to fill out a 'project questionaire' this will help provide you with some basic information about the project and assist you to understand their needs (ie. logo colours and font style, what they want to achive with the site, what they actually do).
Then I will start doing a number of different 'home page' full colour mock-ups in Adobe Illustrator and Photoshop. Usually about 3 is more than enough. Once the client has agreed on an initial design I will then go back to Illustrator and Photoshop and complete the final mock-ups with a storyboard PDF of the 'main pages' (ie index, about, services, contact etc). This storyboard will contain snapshots of each page as well as info about functionality, colous, font styles, images need, sizes etc.
This is usually given to the client along side a 'project management' document which outlines the entire project including an overview, goals and milestones, design considerations, site resolutions and restrictions, testing strategies, a fee summary and an outline of your copyright. This document must then be signed off by the client and myself and a deposit must be made BEFORE I begin to code it.
Once this is done I then optimize and slice any relevent images needed for the site and start coding in Adobe Dreamweaver.
Hope this helps.
Cheers Aliesha
|
|
May 28 '10, 09:00 AM (#20)
|
|
|
WDF Regular
Join Date: November 2008
Posts: 411
|
I prefer to make a sketch first and than orient on it while coding in order to receive exactly what I want.
|
|
|
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
|
|
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|
| Advertisement |
|
|
|