Design a Website

• Web Design Tutorial Series
  • Web Site Design

    Design a website using Adobe CS5 software

    Wondering how to design a website? You've come to the right place. Learn to easily design a website using Adobe Fireworks CS5 and build it into a CSS website using Adobe Dreamweaver CS5. The cool website we are going to create step-by-step is shown below:

    

    Beginner's Note: Adobe Fireworks CS5 is the rapid graphic/web design application we would be using to design the website's visual interface and to prepare images for the web site from it. Adobe Dreamweaver CS5 is the web authoring tool (HTML editor) we would be using to:

    1. Create our website's template from the images exported from Adobe Fireworks. The template or common structure for the website is called a Dreamweaver Template and is saved as a .DWT file.
    2. Build the final website by creating the web pages from the Dreamweaver template and linking them together.

    Prerequisite Knowledge

    This tutorial series teaches you how to create a full-fledged website using Adobe Fireworks CS5 and Adobe Dreamweaver CS5 and thus assumes you are familiar with some design software and HTML editor, even if you are new to Adobe Fireworks and/or Adobe Dreamweaver. Knowing how websites work and having some knowledge of XHTML and CSS programming, will be an added advantage and should make your task easier. However, we have ensured that even a beginner would be able to follow our instructions.

    Software Required

    Adobe Fireworks CS4/CS5 and Adobe Dreamweaver CS4/CS5. If you are using a lower version of these software please read the CS3 or below version of this web design tutorial series - How to make a website.

    Compatible Versions of Dreamweaver and Fireworks for this Tutorial

    Dreamweaver CS4 | Dreamweaver CS5/CS5.5
    and Fireworks CS4 | Fireworks CS5/CS5.5
    Note: For lower versions of Dreamweaver and Fireworks, screenshot images may differ. Please read the CS3 & below version of this web design tutorial series - How to make a Website. Recommended Versions: Dreamweaver CS5.5 and Fireworks CS5.5

    Website Design Basics

    If you are a beginner-to-intermediate level designer we recommend you read our articles on How to build an Effective Website and Design Guidelines first.

    Without hindering a website's usability (simple and quick access to information, services or products), a web designer's ultimate aim for a website's design is to reach the optimal balance between its attractiveness (targeted look-and-feel with necessary design effects), load time considerations (optimizing design elements for reasonable web page size) and user friendliness (easy-to-use navigation and user interactions plus well laid-out easily readable content) - without entirely compromising on either of them. On the programming front, no compromise must be made in building a well coded and error free website that ensures a uniform user experience - web standards compliant (W3C valid XHTML/HTML and CSS), accessible and cross browser compatible. Please read our design concept article.

    Before designing a web site the designer needs to be fully aware of what type of website he/she is going to design. Unless you have some clear goals in mind it would be difficult for you to start off on the actual design. A good way to get started on your website is to decide on the structure (layout and navigation), colors and overall theme beforehand. We started with the idea of needing a sophisticated design with a simple layout and the following color scheme:

    Color Palette - Purple & Pink Passion

    #CC3366#56003D#FF99CC#DA89BE#F7BBE3#B32D58#FF9999

    Steps to Design a Website

    Lets now look at the various steps we will be taking to design and build the sample website.

    Web Site Design with Dreamweaver CS5 & Fireworks CS5 (or CS4 versions)

    
    This free website design tutorial series teaches layout design with Adobe Fireworks CS5 and CSS/XHTML website conversion with Adobe Dreamweaver CS5. Learn CSS Web Design by following these simple steps:
    

    1. Introduction: Design a Website
    2. Layout Design: Design your website layout with Adobe Fireworks CS5
       1. Design your website Header and Footer
       2. Design your website Background and Navigation
       3. Place Photos and Content into your website design
    3. Export Images: Slice and Export your website images with Adobe Fireworks CS5
    4. Dreamweaver Site: Set-up your website in Adobe Dreamweaver CS5
    5. CSS Tutorial: CSS & XHTML Programming to build your website with Adobe Dreamweaver CS5
    6. CSS Styles: Format your web site text using CSS style sheets in Adobe Dreamweaver CS5

    Now Lets get you started on your website design!
    Continue to Step 2: Design your website layout with Adobe Fireworks CS5

    Related Links :: Design Concept | Website Designing | Best Design Software
    Design a Website | Website Header | Website Background
    Website Navigation Tips | Web Design Tips | Design Ideas

Please like, +1, link to and share this SmartWebby resource if you found it helpful. Thanks for your encouragement!