Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
General Design: wondering how the people on this forum go about making simple websites
Bottom of Page1 to 26 of 26
-
I'm just wondering how the people on this forum go about making simple websites... A lot of people I know use this kind of process:
1. Create the basic template in photoshop
2. Import that into ImageReady and slice up the images
3. Take that into Dreamweaver and organize the html
4. Make the other pages
What process do you all use? What software and tools and in what order? -
- CommentAuthorljromanoff
- CommentTimeMar 4th 2007
That's my process, except I slice and export in Photoshop and use Homesite instead of Dreamweaver. -
I start with a pen and paper. Ha. Sketch out my idea, decide on colors, code the structure for the site, and then add my images where I think they fit.
A bit odd, but it works most of the time. -
These are my process
1. Design a prototype in Fireworks
2. Create the HTML structure based on the design prototype.
3. Slice the Design, and create a css file -
- CommentAuthorbenmacgowan
- CommentTimeMar 5th 2007
My process is:
1. Design the layout in Photoshop
2. Slice and export in Photoshop
3. Create HTML and CSS in Notepad
4. Add content -
I mainly work in this way:
1.Sketch out design on paper.
2.Design in Illustrator and Photoshop.
3.Build wireframe and CSS in Dreamweaver.
4.Add Content. -
Yeah, I think we all basically do it the same way.
-
- CommentAuthorPettyRider
- CommentTimeMar 5th 2007 edited
Not so fast, Matt. I personally like to add the content first. Next, I build out my templates in Super Table Maker Pro +GIF. Then I pray to Cameron Moll that my designs end up looking like what I've already produced. Then I get on the internet and tell all the cool dudes at CSSBeauty how I do it all. -
Mine is:
1. Design the layout in fireworks n photoshop
2. Slice and export in fireworks
3. Create XHTML & CSS in dreamweaver
4. Add Content -
-
CommentAuthorkari.patila
- CommentTimeMar 5th 2007
1. Content
2. Photoshop something to go with the content
3. TextMate for the code
4. Preview and strip out everything non-essential
5. Fine-tune the typeface -
-
1) paper sketches sometimes
2) photoshop layout
3) photoshop slices
4) editplus template
5) editplus content fill -
1. scour istock for photographical inspiration
2. scour my 10,000+ font database for the perfect font
3. design and slice in photoshop
4. layout/css in dreamweaver (and exhaust the forums)
5. break down somewhere in step 4 when i run in to problems and the forums aren't providing the answers i seek =)
6. Turn in to client and recieve a "wow! that's exactly what I was hoping for!" -
I agree PettyRider, content comes first.
1. Get the content that will be needed together.
2. Sketch out the schematics based on the content.
3. Do a paper design.
4. Do a photoshop design.
5. Create the markup.
6. Apply the CSS. -
- CommentAuthorTadeasBilka
- CommentTimeMar 7th 2007
I prefer this way (which is not good for every "Web")
1. Work with pen and paper, decide which parts of the page are most important and put then on the right place.
2. Write simple structured code in XHTML (by hand)
3. Style and position the main structure and then the content
4. Eventually go into Photoshop and prepare required graphics, backgrounds etc.
5. Put it together
... making master templates, diving into PHP, MySQL...
As you probably noticed, I don't use Photoshop to design the page, I prefer designing the content and I found out everything goes to look different on web than in Photoshop (especially some text and fonts starts to look different and inappropriate).
And I have a question: Do you really think it is necessary to design a web page in Photoshop? -
I bet i have a very unusual process :)
- Design in Adobe Flash because i love the tools there, i can easily draw simple and advanced layouts.
- Then i export every part of the layout as EPS (Vector) and manipulate it and make the graphics with Photoshop.
- Then i use Dreamweaver for every code and for the final placement with CSS. -
1) Work out ideas in my head or on paper.
2) Hand code the main layout.
3) Make and insert images where needed.
I dunno maybe its just me but I don't like using dreamweaver, if you want some reasons why check this site here. -
- CommentAuthorfransgaard
- CommentTimeApr 23rd 2007
1: Define a main purpose of the site and define secondary functions. This step helps identify what is important and what is not and is important for any site but really crucial for simple, minimalistic sites
2: Think about how the user gets to the "goal" after entering the site. Navigation structure. I know user journeys are the realm of an IA but as designer I find it very useful to consider as well
3: Ideas on paper/ photoshop/ post-it's and/or anything really, image research
4: Mock up of several styles in Photoshop including photo selection
5: Choose 2, show client, together chose 1
6: Polish off the chosen design
7: Create the master HTML and CSS
8: Test
9: amend and create lower templates
10: test
11: make live -
1. Figure out what the hell it is (pen/paper/brain)
2. Figure out how to organize it (visio/brain)
3. Figure out what it should look like (pen/paper/illustrator/visio/brain)
4. Make it pretty (PhotoShop)
5. Code the bitch (Dreamweaver -- personal preference) -
1. Decide whats going on the site and what will go where [ Pen and Paper ]
2. Make the design [ Photoshop ]
3. Save the design as a .jpg with the quality set to maximum (that way I don't have to worry about layers etc.)
4. Code the design [ Notepad or Dreamweaver - depends how lazy I'm feeling - I normally go back and forwards between photoshop and notepad to cut out the images I need for the layout] -
1. Pen/pencil and paper to work out what goes where (always start here)
2. Browse for fonts, Images and anything else to mangle together
3. Photoshop the design
4. Code in dreamweaver making little changes in photoshop to images in order to make it fit together
5. Test :D -
1. Any idea from my sick mind >>.
2. Photoshop --->> Image Ready,
3. Frontpage and Notepad,
4. Preview in Firefox, Opera and IE
5. publish XD -
Frontpage what???????????
Anyone else here use Frontpage? I don't mean to give you a hard time, I just didn't think anyone was using it -- mind sharing what you like most about it? -
- CommentAuthorseth.aldridge
- CommentTimeApr 25th 2007
I create the initial design wire frame…get that approved. Then I add style and design elements to the wire frame and add filler content…get that approved. Then I grab Dreamweaver and create the XHTML/CSS template to insure my templates are XHTML/CSS/WAI friendly. Once that is done then I’ll take the templates and put them into Expression Engine…even if my client doesn’t purchase a CMS I’ll do this to make future content updates really, really easy. Once that is done then I’m pretty much done. I’ll do some fine tuning with the design and code to make sure it is user friendly and accessible then I take my check to the bank and buy food.
-
1. Sketch with pen and paper (Have it approved if possible)
2. Scan sketch
3. Create Black and White wire frame in potatoshop or illustrator
4. Get wireframe approved (if it hasn't already been approved in ealier stages...)
5. Mess around with the grid until it 'works' (approve?) (this should really happen all the time...)
6. Superimpose text and images in potatoshop or illustrator
7. Create a general html and css layout (html first, then the css)
8. Insert content (or set up textpattern or expression engine)
9. Make sure everything works in most browsers (including internet exploder) -
- CommentAuthorWhereIsThatDeafGuy
- CommentTimeMay 8th 2007
- Build content S.O.B. using semantic XHTML
- Using my wonderfully poor artistic skills, sketch layouts using plain ol' #2 pencil. This also include notes on color schemes, typography, usability, etc.
- Create prototype/template in Firefox browser (manually coding CSS/XHTML) according to sketch's specs
- Run the protype/template through web developer toolbar extension's grueling and painful validation and accessibility tools
- Ensure noscript is included if DOM Scripting/JavaScript is used
- Take 2 Advils before diving into cross-browser testing (IE, Opera, Mozilla, etc.) for any nasty bugs
- Curse in sign language at the browser for rendering a mangled page
- Hand off the prototype/template to co-worker to "pretty it up"
-
1. Design site diagram / flow chart in InDesign or Illustrator.
2. Get client sign-off on site diagram and receive deposit
3. Sketch "design" concepts
4. Refine concepts in InDesign, using illustrator and photoshop for artwork
5. Get client approval via PDF or color laser prints of prototyped pages - get second deposit
6. Build page frameworks in Dreamweaver, creating css, and artwork using photoshop and illustrator as I go
7. Review site in multiple browsers (and as of lately, verify code as valid hmtl/css - admittedly I was sloppy in the past)
8. Present to client as password protected online DEV site - get third deposit
9. Continue building pages, etc until site is done
10. debug again in multiple browsers and with friends and family "testing" site functions
11. Finish site, get final payment, and then turn over to client.
1 to 26 of 26