Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.5a is a product of Lussumo. More Information: Documentation, Community Support.
-
- CommentAuthorStrontiumDog67
- CommentTimeNov 16th 2006
What comes first in designing a CSS website:
A design (made in Photoshop/Fireworkds), text turned off cut up the template using Image Ready, and then code.
Or do you code the site first, and create assets to place on the page, until you find a design you like?
I'm interested to know what is the prefered process for CSS web designers.
ade -
I think it's a matter of preference, many will tell you designing the site first helps, others will say coding first (layout) then creating images is the best way to go.
I've done it both ways, lately I find myself coding the CSS/XHTML first, then creating images. -
-
CommentAuthoradjustafresh
- CommentTimeNov 16th 2006
If you're working with a site that already has well-defined content, I would suggest starting with the XHTML--creating a well-formed, valid and accessible document. From there, I would open up Photoshop to do the graphic design, make comps, cut-up graphics, etc. Once the designs are approved, I code the CSS to style the XHTML document.
If the content is unclear I begin with the graphic design, then move on to coding the XHTML and CSS simultaneously.
I've also built XHTML/CSS templates that are essentially functional wireframes without graphical elements. This is a great way to focus on layout and content, especially if you're doing usability testing or working out the functionality of the website. The graphics are then designed and layered over the top of the wireframe (through CSS) once the layout and functionality are finalized.
So, as is the case with just about everything... it depends. -
-
I will start with a wireframe -- determine my core layout.
I will then color-in the wireframe, using Photoshop to determine aesthetic look/feel
I then go to code and start building the site and incorporating graphics from Photoshop as necessary. -
1.) Make a site map. Brainstorm and sketch visual ideas on paper. Get a few ideas to go forward on.
2.) Use Illustrator or Photoshop to mock up a visual demo. (Rarely, I may make a working demo in simple HTML.) A few options get presented to the client and I get a go-ahead on one.
3.) Usually, I will end up dissecting the AI/PSD file to create the graphics for the site. The visual demos tend to be pixel-perfect.
4.) HTML, style to fit, add scripted interactivity and accessible fallback, and (of course) fudge anything I'd forgotten about in the planning stages.
(and, of course)
4b.) Try to get the formmail script working.
4c.) Try to get the formmail script working.
4d.) Try to get the formmail script working.
4e.) Contact the host and find out that sendmail locked up a day ago. The formmail worked fine the first time. :) -
I Agree with the obvious necessity of getting a sitemap + a good idea of how to organize the content.
I then go for the mocking up.
Try out Fireworks.
Do. (They even have a free 30 days demo!)
I used to do the Illustrator+Photoshop thing but this is so much more precise and fast. At first it's a bit unsetlling if you're used to the "legacy" adobe stuff, but it just kicks Photoshop or ImageReady's ass.
1 to 6 of 6