Web Page Design
This web design lesson focuses on digital design for the Web using Adobe Photoshop and Macromedia Fireworks. It’s time to review the storyboards that you created in Lesson IV.
Your goal at this point is to use the storyboard designs that you sketched to create Web page screens. You want to utilize the content you gathered and developed while working in the last web design lesson.
After successfully completing this web design lesson, you will have Web page screen designs that will be output into table- or layer-based HTML files. The files you will generate are going to be HTML files, but will not be functional Web pages.
They will not have working links, pop-up windows or multimedia. The pages that are generated in this stage come from Macromedia fireworks or Adobe Photoshop.
In this web design lesson, you will learn how to develop screen designs that will be turned into Web pages. When we open these pages in Macromedia Dreamweaver, we will be able to an extensive Web functionality and integrate flash-based multimedia.
The main thrust of this web design lesson is to provide you with enough basic skills to get your portfolio pages designed and exported using professional level tools.
Once you have completed the process, you’ll be empowered to continue to develop Web pages throughout your career. As a learning tool, the Web portfolio makes you get involved with digital tools. So far, we spent a lot of time working on paper.
This is a good thing, because otherwise there is a good chance that we might be highly confused when we begin to use digital tools. Web portfolio design and Web design in general cannot begin simply by using digital tools.
As we have stressed in this text, there must be conceptualization and content development. We need to have the ideas and materials available, before we manipulate those using digital tools.
Computers give us choices in applications and in workflow methods. We see this in the sheer number of different companies that produce the same software.
You can use Microsoft Word or WordPerfect for word processing. Each yields a text document, but the difference lies in the preference of you, the user. You might think Word is easier or more intuitive.
Or maybe you are used to WordPerfect from a previous job, so you make it y our tool of choice. The point here is that there are many software packages available for Web design and development.
There are also many ways to approach designing Web pages on a computer. The processes I will be demonstrating and using for the Web portfolio design presented in this web design tutorial are used in professional design shops. Most importantly, they are tools and techniques that I have used and taught successfully. I am a designer, so I take a designer’s approach more than that of a programmers approach.
In this web design lesson, we will spend some time discussing how to create Web pages from scratch in Macromedia Dreamweaver without working extensively in an image editing application first. This method may appeal to you if you have a Web portfolio that is filled with text and text documents as opposed to a more graphics-filled Web portfolio.
If graphics are the majority of the content or the design is complicated, using an image editing application for Web screen layout and design is a better method than simply using Dreamweaver.
For multimedia and motion, we must use specialized applications. You will learn more about multimedia applications and have an opportunity to execute some techniques later on in the text, but in this stage, you will be planning and assuming positions for multimedia items in the screen designs.
The multimedia items, which are Macromedia Flash movies will be added later on. Eventually, you will work to discover new methods and tools on your own. Then, you will adapt to the techniques and applications that you feel provide the easiest workflow to creating Web pages.
Here are some of the digital tools we will be using to create Web pages for the Web portfolio:
- We will be creating our graphical Web page designs and individual graphics using Adobe Photoshop and Macromedia Fireworks.
- We will be using Macromedia Dreamweaver to perform Web develop- ment and to add functionality to our Web pages. For motion graphics and multimedia.
- We will be using Adobe Audition to edit audio.
- We will be using Macromedia Flash to create motion graphics and multimedia. Digital tools are important to master, but it is also important to pay attention to the visual aspects of the Web portfolio.
Too many times I have seen bad designs that alienate the user with blinking text and horrific color choices. The look and feel of the Web portfolio should not be intimidating, it should be inviting.