7 Replies Latest reply on Nov 4, 2009 1:44 PM by Mr. Benrud

    Page Design or Page Mock-Up Tutorials

    Mr. Benrud

      Hello Everyone,

       

      I'm a high school web design teacher and I'm looking for a few good Fireworks page design or page mock-up tutorials. I want my students to see different design ideas and the steps/procedures different designers use while designing their sites.

       

      Any ideas?

       

      Thanks for your help and have a great week!

       

      Todd

        • 1. Re: Page Design or Page Mock-Up Tutorials
          pixlor Level 4

          I don't think you're going to find many "here's how I did this site in Fireworks" tutorials. I think what you should concentrate on are three things:

           

          1. The basic principle of examining a design and slicing it
          2. Re-producing a sliced design in HTML, CSS, and images
          3. Creating a design

           

          Once you understand the basics, they can be applied to any situation.

           

           

          Here's a tutorial on using Fireworks to design a site (author uses Photoshop, but Fireworks can be used, instead):

          http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt1.html

           

          Here's a tutorial on slicing (not FW specific, but important info)

          http://www.slicingguide.com/

           

          Here's an excellent tutorial on creating a CSS-based design (great for beginners):

          http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-i n-easy-to-understand-steps/

          This one's good, too:

          http://articles.sitepoint.com/article/html-css-beginners-guide

           

          A few () things you can do with Fireworks:

          http://www.smashingmagazine.com/2009/07/27/tutorials-and-resources-for-adobe-fireworks/

          http://www.noupe.com/adobe/40-high-quality-adobe-fireworks-tutorials-and-resources.html

          http://firetuts.com/

           

           

          And...for ideas on what designers are doing these days:

          http://www.designmeltdown.com/

          http://cssbrigit.com/

          (View>Source or View>Page Source to find out how a page is put together.)

           

          What might be a good learning flow for your students is

           

          • work through the nettuts+ tutorial
          • read/study the slicing tutorial
          • choose a design from one of the inspiration sites and develop a page from scratch with a similar look
          • 2. Re: Page Design or Page Mock-Up Tutorials
            Michel Bozgounov Level 2

            Two more resources, which may be of some interest to you:

             

            http://www.adobe.com/devnet/fireworks/articles/standards_compliant_design.html

            http://www.adobe.com/devnet/fireworks/articles/fireworks_web_design_css.html

             

            These deal more with how to prepare and export your design/design mock up, made in Fireworks, as CSS/XHTML code. They may be useful to you, too, I hope. :-)

            • 3. Re: Page Design or Page Mock-Up Tutorials
              pixlor Level 4

              Oops. I'm sorry, the "(author uses Photoshop, but Fireworks can be used, instead)" should go on the nettuts+ tutorial:

               

              Here's an excellent tutorial on creating a CSS-based design (great for beginners, author uses Photoshop, but Fireworks can be used, instead):

              http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first -website-in-easy-to-understand-steps/

               

              I mis-edited and put the phrase on the wrong line.

              • 4. Re: Page Design or Page Mock-Up Tutorials
                Mr. Benrud Level 1

                Thanks for your ideas. They look like great resources and I'll work through all of them in the next few days.

                 

                Does anyone have or know of additional tutorials that might be a little more "beginner"? Maybe not so .CSS intensive? I'm looking tutorials that show different design techniques, how to organize layers and how to slice the prototype.

                 

                Thanks again for all of your help and have a great day!

                Todd

                • 5. Re: Page Design or Page Mock-Up Tutorials
                  Michel Bozgounov Level 2

                  This is a good tutorial about Pages, Layers, States:

                   

                  http://www.adobe.com/devnet/fireworks/articles/pages_states_layers.html

                   

                  Fireworks is primarily a graphic design tool, not a CSS/XHTML tool, although Fireworks now can export CSS which is not bad.

                   

                  If you have any other specific questions, feel free to ask!

                  • 6. Re: Page Design or Page Mock-Up Tutorials
                    pixlor Level 4

                    Does anyone have or know of additional tutorials that might be a little more "beginner"? Maybe not so .CSS intensive? I'm looking tutorials that show different design techniques, how to organize layers and how to slice the prototype.

                     

                     

                    If you're going to make modern Web pages, you need to know some CSS. That's just how it is. You can't rely only on HTML elements to produce a modern design. You don't need to know everything, but you need to know about divs and spans (and how to float them for columns) and you need to know text styling.

                     

                    Design is not specific to Fireworks, nor any other graphics program. Most designs do reflect (consciously or unconsciously) an understanding of what is possible or not, easy or not, with HTML and CSS according to the designer's capabilities. You can examine current designs without regard to the graphics program the designer used to implement the prototype, be it Fireworks, Illustrator, Photoshop, Paint Shop Pro, GIMP, MS Paint, or what have you. If you look at almost any design, you will be see that it is built up of rectangles and text. Some of the rectangles may be photos. Some of the rectangles may not have opaque pixels throughout. Some of the rectangles may overlap. But they are there! Fireworks makes rectangles very well. Print out a Web page, any Web page, and you can draw the rectangles on it.

                     

                    The concept of slicing a design into the graphics that are needed, based on what areas of the design need to be flexible and what portions of the design can be made into repeating graphics and which are non-repeating is also not specific to Fireworks.

                     

                    Organizing layers in Fireworks is similar to a number of graphics programs, but not all. I don't know about others, but I usually make layers in logical groupings that I might need to turn on and off to work with a low level of distraction. In my last project, I had a design with a header, a content section, and a footer, all of which resided on a background that had a tiling image across the top. I didn't worry about the content section in Fireworks; I did that in Drewamweaver. For my layout in Fireworks, I had these layers:

                     

                    Colors - Rectangles of the colors I want to use in my design. It's much easier to have something I can dip the eyedropper tool into than to copy and paste a hex code into the color mixer. I usually keep this layer off, unless I need to set a color.

                    Logo - The logo had a number of elements (and I was tweaking colors and opacities) so I put this on its own layer.

                    Navigation - The text for the navigation buttons (no specific backgrounds for these in this design).

                    (Usually, I put the logo and navigation together in a Header layer, but I needed to export them separately and it was more convenient for me to put them on separate layers, alternating their visibility for export.)

                    Content - Some placeholding text so I could try various colors and placement of text (header and paragraph padding and margin then set in the CSS file).

                    Content Background - I needed images as the backgrounds for the divs for my header/navigation, content, and footer section. By having the background on its own layer, I could slice and export just those sections, without the elements from the layers above. I did this, because I put a faint drop shadow on the content section, so I wanted to export these slices as a PNG8 against a transparent canvas.

                    Background - This is the page background, which contains the tiling bar across the top. Since I can turn off the visibility of all the layers above this one, it's easy for me to slice a section for the tiling image I want.

                    Bitmap - This is a screen capture of an early version I laid out in Illustrator. I normally start in Fireworks, but I had a vector pattern whose colors I needed to modify for this design (not possible in Fireworks) and I put curves on the top and bottom of my central content area (easier in Illustrator). I used this layer as a guide for adding the elements in Fireworks. Another time you might have this sort of layer is if you sketch a design on paper and scan it in.

                     

                    I guess...think about it almost as a collage you build up for a final effect: that's your design. Then, when you want to export the pieces you use to build your Web page, it may be easier if some of the objects are out of the way. And, of course, if you find you haven't got the layers in the most effective way for how you're working, it's easy to add a new layer and move objects around.

                     

                    But this is just how I work. I don't know about anybody else.

                    • 7. Re: Page Design or Page Mock-Up Tutorials
                      Mr. Benrud Level 1

                       

                       

                      Pixlor,

                       

                      Thank you very much for your detailed and thoughtful response. My students and I greatly appreciate it.

                       

                      Currently I teach high school students static html web page design, a little .php (includes and form handlers) and some very basic .css. I usually don't teach .CSS and .PHP until students already have a firm understanding of dreamweaver/fireworks basics, file structure/organization, common web site elements/assets and the planning/design process(audience/objectives). I've found if I introduce too much "code" too soon that a handful of students get "turned off" or "overloaded" and choose to drop this "elective" course. No numbers = no course. That is why I’m trying to limit the .css code right now.

                       

                      Thanks again for all of your help.

                       

                      If anyone does have tutorials that demonstrate page design/mock-up techniques in fireworks I would love to see them. Or if anyone has ideas on how to simply introduce .css to “code” adverse high school student please post them here.

                       

                      Thanks again everyone,

                      Todd