GKG3013 Web Design. Jong Sze Joon& Auzani Zeda Mohamed Kassim Faculty of Applied and Creative Arts Universiti Malaysia Sarawak

Save this PDF as:
Size: px
Start display at page:

Download "GKG3013 Web Design. Jong Sze Joon& Auzani Zeda Mohamed Kassim Faculty of Applied and Creative Arts Universiti Malaysia Sarawak"

Transcription

1 GKG3013 Web Design Jong Sze Joon& Auzani Zeda Mohamed Kassim Faculty of Applied and Creative Arts Universiti Malaysia Sarawak

2 Learning Unit 7 Presenting Your Design

3 Learning Units Objectives The aim of this unit is to develop students' understanding on the most significant elements in web design. By the end of this unit, students should be able to: 1. Construct web comps from wireframe. 2. Propose design directions in a presentation.

4 Topics 1. Building Your Web Comps 2. Moodboard 3. Web Background Graphics 4. Developing Design Directions 5. Constructing from Wireframes 6. Constructing Mock-Ups

5 Building a Web Comp A comp, in web-design parlance, is a mock-up of what the finished website will look like.

6 Software 1. Photoshop 2. Illustrator 3. Fireworks 4. Flash 5. Dreamweaver

7 Photoshop For creating, editing, and manipulating bitmaps, no other tool on the market holds a candle to Photoshop. Most web comps, as page designs are called in the industry, are built in Photoshop. It is the agency and in-house standard; most developers expect to be handed Photoshop comps before they build the actual website. Typically, there is one Photoshop file per web-page template. Photoshop allows you to make extensive use of layers and layer sets, keeping distinct (and helping you organize) all the components that make up your design.

8 Photoshop Take a look at Figure on the right for a peek at the numerous layers and layer sets that go into making one web page. It's a best practice to name and organize your layers so that other designers can make sense of your document. The file extension for native Photoshop source files is.psd.

9 Illustrator Illustrator is the standard for producing vector graphics. Often you'll need to create custom icons, buttons, or illustrations in web design and it's easiest to use Illustrator for such tasks. You can then import these illustrations into Photoshop or Fireworks to fold into your web comp. All web comps are built and assembled in either Fireworks or Photoshop. Illustrator merely contributes graphic pieces or is used to create individual web graphics you may export in various web formats, including SVG, PNG, and JPEG.

10 Fireworks Fireworks a fantastic tool for creating web graphics, it also empowers us non-techies to add interactivity to our graphics for example, links, rollover buttons, and drop-down menus that we can load and test in a browser at the click of a button. It is a good way to demonstrate proposed menu designs to clients, or to generate click-through user tests quickly. The only edge that Photoshop has over Fireworks is in bitmap image enhancement and manipulation. However, you can do all those things in Photoshop and then import the result into Fireworks to work into your web layout. You can also export your Fireworks file as a Photoshop layered file, or import Photoshop layered files, so it has some good versatility.

11 Flash Flash allows you to create highly interactive web applications with ActionScript and design animations that leverage the tight file sizes as well as the scalability of vector graphics. Flash files are output as.swf files can be embedded directly in your web page. Flash movies (as.swf files) can be so interactive and complex that you can build an entire site experience just with Flash. The HTML page just presents the Flash file and Flash takes over from there. The downside to Flash is that it requires end users to have the proper Flash plug-in and version installed on their browser to view. Apple iphone and ipad Safari browsers do not display.swf files.

12 Dreamweaver Dreamweaver is not a graphic-design tool; it's for building HTML pages and CSS files. What many people get confused about is that, on the one hand, you have your web-page comp designed in either Fireworks or Photoshop to look exactly the way your web page is going to look online down to the last details of your scroll bars and footers. You have developers who must re-create your comp designs in HTML, often using a tool like Dreamweaver. Why do developers have to re-create your designs? Developers must rebuild your page. Your comps serve not only as the piecemeal art source and layout to follow but also as the color, button, border, and text source needed to derive CSS styles.

13 Moodboard A mood board is simply a collage of font choices, colors, and imagery (of anything from other websites to print ads) that captures a tone or a feeling. The idea is to explore tones that might inform the direction of your web designs.

14

15

16 Moodboard Because most web projects have a lengthy upfront information design phase, clients are often itching to see something visual. Mood boards are a great way to put early visuals in front of impatient clients and get a sense of what they like, what they don't like, and why before you dive into creating design directions. In addition, many clients have trouble verbalizing the visual look they're going for, so mood boards are a great way to kick-start the conversation.

17 Web Background Graphics Designing a nice background for your website is an important detail that can add a lot of polish to your design. Considering that you do not know what sort of monitor people will have when viewing your site, you must account for all scenarios. While it's important to ensure that all main content and navigation fits within a 1,000-pixel-wide space, what happens to your site when it's viewed on a large cinematic monitor?

18 Web Background Graphics Here are a few suggestions and examples for you to consider: 1) Pick a solid, complimentary background color. At the very least, choose a solid color for your site's background that compliments the design. Don't just leave the background white because you simply forgot about it. If white is appropriate, then choose white. Generally, more muted colors are better. If someone widens the browser window and gets a blast of bright orange, it's probably not the best user experience.

19

20 Web Background Graphics 2) Use a repeating background tile. Create a small graphic (can be any size) that can seamlessly repeat across and down the page. Use Photoshop to place four copies of your tile end-to-end around the original tile's perimeter to see how all the edges line up. The advantage to using tiles is that regardless of whether you're using CSS code or HTML, one relatively small graphic is all it takes to fill a large area. This saves on download time.

21

22 Web Background Graphics 3) Create a background tile that is a long, skinny horizontal strip. With CSS, you can determine that a pattern repeats in just one direction: either x (horizontally across the page) or y (vertically down the page). If you create a tall, thin strip, say a gradation, you can have it repeat across the page only. You should then compliment this by setting a solid background color that matches the bottom color of your tile. That way, if users scroll down the page, they cannot see where your tile ends and the background color begins.

23

24 Web Background Graphics 4) Create a background tile that is much larger than your web page. Many people think of background tiles as small, square graphics that work like a floor tile in a house. You can create a background tile that is a) much larger than your web page b) is of any proportions c) doesn't even repeat This is a great way to create an "environment" behind your website, and reveal a nice surprise for people who widen their browser windows.

25

26 Developing Design Directions After the information-architecture phase and an optional "mood board" presentation, the first visual presentation to your client is the "Design Directions" presentation. This is a highly anticipated event in all web-design projects; it's when the client gets to see your proposed ideas for what the website could look like. Your comps should be complete graphical mock-ups of web pages including all the HTML components, such as forms, text, and buttons. The idea is to show visually what the final page will look like without building the actual page in HTML. Best practice here is to develop not one but at least three different design options that you can present to the client.

27 Developing Design Directions Variations can be made in terms of font, layout, or color scheme. Each design direction that you present should include a set of two pages the home page and one sub-level page This way, the client can see how the proposed graphic treatment works throughout the site. It also forces you, the designer, to ensure your design can accommodate the rest of the site. The designs should also show how the navigation works. After you prepare a few different designs, you can organize them into a polished presentation.

28

29

30 Working from Wireframes When you set out to develop your design options, you'll be working from the wireframes the diagrams showing the page's structure, content, and navigation. Since you'll develop both a home page and a subpage, take these two wireframes and use them as your guide much the way a builder refers to blueprints. Wireframes should be pretty much locked in, or at least at 90 percent complete, by the time you start on your design directions.

31

32 Working from Wireframes The wireframes can serve as a checklist of website aspects for your design to accommodate from navigation to content elements. A designer should not be confined to the exact layout and proportions represented in the wirefames. You are not relegated to simply "coloring inside the lines." Use the wireframes to inform yourself about what's important, how much content to accommodate, and how the navigation works. The way you present these items visually is up to you.

33

34

35 Constructing Mock-Ups For the most part, you don't need to provide working HTML prototypes for your client presentations. Simple JPEG images should suffice to give a client a good idea of how the site will function. If you need to show how a complex interaction will work, you may consider showing a series of mock-ups in storyboard form rather than spending the extra time to make the online component really work.

36 Presentation Guideline 1. GROUP NAME 2. GROUP MEMBERS with PHOTOS & ROLES 3. INTRODUCTION of THE WEBSITE 4. REFERENCE of OTHER WEBSITES (INSPIRATIONS) 5. MOOD BOARD 6. GANTT CHART 7. SITEMAP 8. WIREFRAME 9. MOCK UP

37 Reference 1. Bell, M. (2011). Build a Website for Free. Indianapolis, IN: Pearson Education. 2. Strauss, R. (2001). Developing Effective Websites: A Project Manager s Guide. Boston, MA: Focal Press. 3. Lopuck, L. (2012). Web Design For Dummies, 3 rd Edition. Hoboken, New Jersey: John Wiley & Sons. 4. Dawson, A. (2011). Distinctive Design A Practical Guide to a Useful, Beautiful Web. West Sussex, UK: John Wiley & Sons. 5. Eccher, C. (2011). Professional Web Design Techniques and Templates. Boston: MA. Course Technology. 6. Smith, J. & Osborn, J. (2011). Web Design with HTML and CSS Digital Classroom. Indianapolis: IN. John Wiley & Sons. 7. Stocks, E. J. (2009). Sexy Web Design. Victoria: Australia. SitePoint.

38 Homework 1. Read Building a Web-Page Template from Scratch document 2. Finalized Your Site map and Wireframe layout. 3. Build your Webpage Template based on your Wireframe layout. 4. Print your Mock-ups according to your design specification. 5. Creatively present a 6-minute presentation. 6. Update you Gantt Chart schedule. 7. Document your work in a proper booklet.

GKG3013 Web Design. Jong Sze Joon& Auzani Zeda Mohamed Kassim Faculty of Applied and Creative Arts Universiti Malaysia Sarawak

GKG3013 Web Design. Jong Sze Joon& Auzani Zeda Mohamed Kassim Faculty of Applied and Creative Arts Universiti Malaysia Sarawak GKG3013 Web Design Jong Sze Joon& Auzani Zeda Mohamed Kassim Faculty of Applied and Creative Arts Universiti Malaysia Sarawak Learning Unit 3 Web Design Basics Unit Learning Objectives The aim of this

More information

Dreamweaver Domain 2: Planning Site Design and Page Layout

Dreamweaver Domain 2: Planning Site Design and Page Layout Dreamweaver Domain 2: Planning Site Design and Page Layout Adobe Creative Suite 5 ACA Certification Preparation: Featuring Dreamweaver, Flash, and Photoshop 1 Objectives Identify best practices for designing

More information

Fireworks CS4 Tutorial Part 1: Intro

Fireworks CS4 Tutorial Part 1: Intro Fireworks CS4 Tutorial Part 1: Intro This Adobe Fireworks CS4 Tutorial will help you familiarize yourself with this image editing software and help you create a layout for a website. Fireworks CS4 is the

More information

Creative Cloud for Web Design

Creative Cloud for Web Design Creative Cloud for Web Design Level: Duration: Time: Cost: Fast Track - Introduction 5 Days 9:30 AM - 4:30 PM 997 Overview Like the Dreamweaver Jumpstart course, the Creative Suite for Web Design course

More information

Adobe Dreamweaver Exam Objectives

Adobe Dreamweaver Exam Objectives Adobe Dreamweaver audience needs for a website. 1.2 Identify webpage content that is relevant to the website purpose and appropriate for the target audience. 1.3 Demonstrate knowledge of standard copyright

More information

We hold these truths to be self-evident... 3. Fireworks can create CSS. However, see article 2 for clarification.

We hold these truths to be self-evident... 3. Fireworks can create CSS. However, see article 2 for clarification. We hold these truths to be self-evident... 1. Fireworks is a DESIGN program. 2. While Fireworks can design a website or interface, it should not be used for live websites only prototypes and presentations.

More information

Application Note. Building a Website Using Dreamweaver without Programming. Nan Xia. MSU ECE 480 Team 5

Application Note. Building a Website Using Dreamweaver without Programming. Nan Xia. MSU ECE 480 Team 5 Application Note Building a Website Using Dreamweaver without Programming Nan Xia MSU ECE 480 Team 5 11/16/2012 Table of Contents Abstract... 3 Introduction and Background... 3 Keywords... 3 Procedure...

More information

Adobe Creative Suite: Introduction for Web Design

Adobe Creative Suite: Introduction for Web Design coursemonster.com/uk Adobe Creative Suite: Introduction for Web Design View training dates» Overview Website design can be confusing to get started with. But with our Adobe Certified Instructor led class

More information

Web design and planning

Web design and planning Project 2 Web design and planning Timing: 12 to 18 hours Project overview In this project, student teams work on a project to build a website for a client. Each team might have a different client, depending

More information

Dreamweaver and Fireworks MX Integration Brian Hogan

Dreamweaver and Fireworks MX Integration Brian Hogan Dreamweaver and Fireworks MX Integration Brian Hogan This tutorial will take you through the necessary steps to create a template-based web site using Macromedia Dreamweaver and Macromedia Fireworks. The

More information

Web design & planning

Web design & planning Instructor Guide Timing: 12 to 18 hours Level: Ages 15 and up Web design & planning Project Overview In this project, student teams work on a project to build a website for a client. The client selects

More information

You can make your own layout / theme for your PowerPoint project.

You can make your own layout / theme for your PowerPoint project. About the PowerPoint Intermediate Workshop The purpose of the PowerPoint Intermediate workshop is to inform users more about the design aspect of making presentations. We will build on the skills learned

More information

Web Design Specialist

Web Design Specialist UKWDA Training: CIW Web Design Series Web Design Specialist Course Description CIW Web Design Specialist is for those who want to develop the skills to specialise in website design and builds upon existing

More information

Fireworks 3 Animation and Rollovers

Fireworks 3 Animation and Rollovers Fireworks 3 Animation and Rollovers What is Fireworks Fireworks is Web graphics program designed by Macromedia. It enables users to create any sort of graphics as well as to import GIF, JPEG, PNG photos

More information

Outline. CIW Web Design Specialist. Course Content

Outline. CIW Web Design Specialist. Course Content CIW Web Design Specialist Description The Web Design Specialist course (formerly titled Design Methodology and Technology) teaches you how to design and publish Web sites. General topics include Web Site

More information

Creating Online Surveys with Qualtrics Survey Tool

Creating Online Surveys with Qualtrics Survey Tool Creating Online Surveys with Qualtrics Survey Tool Copyright 2015, Faculty and Staff Training, West Chester University. A member of the Pennsylvania State System of Higher Education. No portion of this

More information

Adobe Flash Catalyst CS5.5

Adobe Flash Catalyst CS5.5 Adobe Flash Catalyst CS5.5 Create expressive interfaces and interactive content without writing code Use a new efficient workflow to collaborate intelligently and roundtrip files with developers who use

More information

How to create pop-up menus

How to create pop-up menus How to create pop-up menus Pop-up menus are menus that are displayed in a browser when a site visitor moves the pointer over or clicks a trigger image. Items in a pop-up menu can have URL links attached

More information

COURSE OUTLINE FACULTY OF INFORMATION AND COMMUNICATION TECHNOLOGY UNIVERSITI TEKNIKAL MALAYSIA MELAKA

COURSE OUTLINE FACULTY OF INFORMATION AND COMMUNICATION TECHNOLOGY UNIVERSITI TEKNIKAL MALAYSIA MELAKA COURSE OUTLINE FACULTY OF INFORMATION AND COMMUNICATION TECHNOLOGY UNIVERSITI TEKNIKAL MALAYSIA MELAKA ADOBE DREAMWEAVER AUTHORING TOOL DTM 3612 SEMESTER 1 SESI 2010/2011 DTM 3612 ADOBE DREAMWEAVER AUTHORING

More information

San Joaquin County Office of Education Career & Technical Education Web Design ~ Course Outline CBEDS#: 4601

San Joaquin County Office of Education Career & Technical Education Web Design ~ Course Outline CBEDS#: 4601 Web Design Course Outline I II 1 Course Content 5 5 Student Evaluation Employment Opportunities 2 XHTML 10 10 Creating an HTML Document Formatting Text with HTML Adding Graphics with Multimedia Using forms

More information

File types There are certain image file types that can be used in a web page. They are:

File types There are certain image file types that can be used in a web page. They are: Using Images in web design (Dreamweaver CC) In this document: Image file types for web pages Inserting an image Resizing an image in Dreamweaver CSS properties for image alignment and responsiveness nigelbuckner

More information

Creating an Email with Constant Contact. A step-by-step guide

Creating an Email with Constant Contact. A step-by-step guide Creating an Email with Constant Contact A step-by-step guide About this Manual Once your Constant Contact account is established, use this manual as a guide to help you create your email campaign Here

More information

WIX: Building a Website with a Template. Choosing a Template First you will need to choose a template from the Create section of the Wix website.

WIX: Building a Website with a Template. Choosing a Template First you will need to choose a template from the Create section of the Wix website. WIX: Building a Website with a Template Choosing a Template First you will need to choose a template from the Create section of the Wix website. To choose a template: 1. Go to wix.com. 2. From the top

More information

ART 170: Web Design 1

ART 170: Web Design 1 Banner Design Project Overview & Objectives Everyone will design a banner for a veterinary clinic. Objective Summary of the Project General objectives for the project in its entirety are: Design a banner

More information

Google Sites: Creating, editing, and sharing a site

Google Sites: Creating, editing, and sharing a site Google Sites: Creating, editing, and sharing a site Google Sites is an application that makes building a website for your organization as easy as editing a document. With Google Sites, teams can quickly

More information

IE Class Web Design Curriculum

IE Class Web Design Curriculum Course Outline Web Technologies 130.279 IE Class Web Design Curriculum Unit 1: Foundations s The Foundation lessons will provide students with a general understanding of computers, how the internet works,

More information

Joomla User Manual, Version 1.5

Joomla User Manual, Version 1.5 Joomla User Manual, Version 1.5 Joomla is a content management system that enables you to make and update Web pages easily. Many aspects, including its ease of use and the ability to add to its capabilities,

More information

ACE: Illustrator CC Exam Guide

ACE: Illustrator CC Exam Guide Adobe Training Services Exam Guide ACE: Illustrator CC Exam Guide Adobe Training Services provides this exam guide to help prepare partners, customers, and consultants who are actively seeking accreditation

More information

m ac romed ia Fl a s h Curriculum Guide

m ac romed ia Fl a s h Curriculum Guide m ac romed ia Fl a s h Curriculum Guide 1997 1998 Macromedia, Inc. All rights reserved. Macromedia, the Macromedia logo, Dreamweaver, Director, Fireworks, Flash, Fontographer, FreeHand, and Xtra are trademarks

More information

for Modern Web Design Andy Blanchard / Chris Keller

for Modern Web Design Andy Blanchard / Chris Keller Tools for Modern Web Design Andy Blanchard / Chris Keller @BlanchardCG @tomgeekery The Tools Design Good old Pencil and Paper UXPin, Balsamiq or Adobe CS Browser Tools Development Storage and Communication

More information

THE DO'S AND DON'TS OF WEB DESIGN

THE DO'S AND DON'TS OF WEB DESIGN THE DO'S AND DON'TS OF WEB DESIGN There are many good and bad things you can do in web design; the following is a list of some of those options and how you should deal with them. 1. No page counters: Page

More information

Our Process: Website Design & Development

Our Process: Website Design & Development Our Process: Website Design & Development HOW WE BUILD YOUR VIRTUAL HABITAT The process for building your website is a lot like building a new home. Like any good architect, this means asking questions

More information

CURRICULUM MAP. Web Design I Mr. Gault

CURRICULUM MAP. Web Design I Mr. Gault CURRICULUM MAP Web Design I Mr. Gault MONTH August- September ESSENTIAL QUESTIONS What is HTML and how is it used in today s web design? How is Dreamweaver used to create web pages? HTML TOPIC Dreamweaver

More information

To be productive in today s graphic s industry, a designer, artist, or. photographer needs to have some basic knowledge of various file

To be productive in today s graphic s industry, a designer, artist, or. photographer needs to have some basic knowledge of various file An Artist s Digital Toolkit Allan Wood, for educational use only Understanding File Formats File Formats To be productive in today s graphic s industry, a designer, artist, or photographer needs to have

More information

CREATING YOUR OWN PROFESSIONAL WEBSITE

CREATING YOUR OWN PROFESSIONAL WEBSITE First go to Google s main page (www.google.com). If you don t already have a Gmail account you will need one to continue. Click on the Gmail link and continue. 1 Go ahead and sign in if you already have

More information

Skills for Employment Investment Project (SEIP)

Skills for Employment Investment Project (SEIP) Skills for Employment Investment Project (SEIP) Standards/ Curriculum Format For Web Design Course Duration: Three Months 1 Course Structure and Requirements Course Title: Web Design Course Objectives:

More information

How-to Guide: MIT DLC Drupal Cloud Theme

How-to Guide: MIT DLC Drupal Cloud Theme How-to Guide: MIT DLC Drupal Cloud Theme This guide will show you how to take your initial Drupal Cloud site... and turn it into something more like this, using the MIT DLC Drupal Cloud theme. See this

More information

Making a Web Page with Microsoft Publisher 2003

Making a Web Page with Microsoft Publisher 2003 Making a Web Page with Microsoft Publisher 2003 The first thing to consider when making a Web page or a Web site is the architecture of the site. How many pages will you have and how will they link to

More information

DESIGN GUIDELINES FOR GENER8 WEBSITES

DESIGN GUIDELINES FOR GENER8 WEBSITES ONLINE COMMUNICATION SERVICES FACTSHEET - DESIGN Created by: Mark Selan Version 1.1 Date Last Modified: April 2008 DESIGN GUIDELINES FOR GENER8 WEBSITES The purpose of this document is to provide Online

More information

NDSU Technology Learning & Media Center. Introduction to Google Sites

NDSU Technology Learning & Media Center. Introduction to Google Sites NDSU Technology Learning & Media Center QBB 150C 231-5130 www.ndsu.edu/its/tlmc Introduction to Google Sites Get Help at the TLMC 1. Get help with class projects on a walk-in basis; student learning assistants

More information

imageprograf Software Solutions Advanced Software Features for Your Canon imageprograf

imageprograf Software Solutions Advanced Software Features for Your Canon imageprograf imageprograf Software Solutions Advanced Software Features for Your Canon imageprograf New Gallery Wrap Feature CREATIVE AND WORKFLOW SOLUTIONS IN THE BOX SOFTWARE SOLUTIONS Canon includes innovative software

More information

History Explorer. View and Export Logged Print Job Information WHITE PAPER

History Explorer. View and Export Logged Print Job Information WHITE PAPER History Explorer View and Export Logged Print Job Information WHITE PAPER Contents Overview 3 Logging Information to the System Database 4 Logging Print Job Information from BarTender Designer 4 Logging

More information

Proposal for Dental Therapy in Minnesota Project

Proposal for Dental Therapy in Minnesota Project Proposal for Dental Therapy in Minnesota Project Craig Creeger (651) 361-0457 2/12/14 9:53 AM I d like to thank- you for giving me the opportunity to submit this proposal. If you have any questions, don

More information

Using the Jive for ios App

Using the Jive for ios App Using the Jive for ios App TOC 2 Contents App Overview...3 System Requirements... 4 Release Notes...5 Which Version Am I Using?... 6 Connecting to Your Community... 11 Getting Started...12 Using Your Inbox...13

More information

Creating a Digital Signature for Fillable PDF Forms

Creating a Digital Signature for Fillable PDF Forms Creating a Digital Signature for Fillable PDF Forms If you have a smart-phone or another way to get a digital image of your signature on your computer, such as a scanner or emailing from a copier, and

More information

So you say you want something printed...

So you say you want something printed... So you say you want something printed... Well, that s great! You ve come to the right place. Whether you re having us design and edit your work, or you fancy yourself a designer and plan to hand over your

More information

Adobe Dreamweaver CC 14 Tutorial

Adobe Dreamweaver CC 14 Tutorial Adobe Dreamweaver CC 14 Tutorial GETTING STARTED This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site

More information

SmallBiz Dynamic Theme User Guide

SmallBiz Dynamic Theme User Guide SmallBiz Dynamic Theme User Guide Table of Contents Introduction... 3 Create Your Website in Just 5 Minutes... 3 Before Your Installation Begins... 4 Installing the Small Biz Theme... 4 Customizing the

More information

Website Builder Overview

Website Builder Overview Website Builder Overview The Website Builder tool gives users the ability to create and manage their own website, which can be used to communicate with students and parents outside of the classroom. Users

More information

Hello. What s inside? Ready to build a website?

Hello. What s inside? Ready to build a website? Beginner s guide Hello Ready to build a website? Our easy-to-use software allows to create and customise the style and layout of your site without you having to understand any coding or HTML. In this guide

More information

Client Admin Site Adding/Editing Content Under Site Builder/Site Navigation Tutorial by Commerce Promote

Client Admin Site Adding/Editing Content Under Site Builder/Site Navigation Tutorial by Commerce Promote SiteBuilder (Adding/Editing Content) Enable web pages on your website Add and format text and images Upload images Create Image Links Create Sub Levels Create Hyperlinks Upload Data files (ppt,xls,word

More information

a bright bold creative web design agency

a bright bold creative web design agency a bright bold creative web design agency People ignore design that ignores people. - Frank Chimero Design is not just what it looks like. Design is how it works. - Steve Jobs JADU SPACECRAFT AN INTRODUCTION

More information

Creating an Email with Constant Contact. A step-by-step guide

Creating an Email with Constant Contact. A step-by-step guide Creating an Email with Constant Contact A step-by-step guide About this Manual Once your Constant Contact account is established, use this manual as a guide to help you create your email campaign Here

More information

Dreamweaver: Getting Started Website Structure Why is this relevant?

Dreamweaver: Getting Started Website Structure Why is this relevant? Dreamweaver: Getting Started Dreamweaver is a Graphic Designer s tool to create websites as he or she designs. As part of the Adobe Creative Suite, Dreamweaver is able to work in conjunction with Photoshop,

More information

GCE APPLIED ICT A2 COURSEWORK TIPS

GCE APPLIED ICT A2 COURSEWORK TIPS GCE APPLIED ICT A2 COURSEWORK TIPS COURSEWORK TIPS A2 GCE APPLIED ICT If you are studying for the six-unit GCE Single Award or the twelve-unit Double Award, then you may study some of the following coursework

More information

Creating a Web Page Using Rapid Web Designer (RWD) Computer Services Department SHERBURNE- EARLVILLE CSD

Creating a Web Page Using Rapid Web Designer (RWD) Computer Services Department SHERBURNE- EARLVILLE CSD Creating a Web Page Using Rapid Web Designer (RWD) Computer Services Department SHERBURNE- EARLVILLE CSD Table of Contents Part 1: Page Tab...3 Diagram 1b: Page Tab...3 Part 2: Header...4 Part 3: Navigation

More information

Web Design Scope and Sequence Student Outcomes (Objectives Skills/Verbs)

Web Design Scope and Sequence Student Outcomes (Objectives Skills/Verbs) Title/ Length of Unit Resources: Standard/ Strand Essential Questions 1. recur throughout life 2. are key inquiries within discipline 3. help student make sense of core content Web Design Scope and Sequence

More information

User s manual 1. Introduction 2. Installation & Requirements 3. Your Tom s Planner account & login 4. Open & Save 5. Grid 6. Blue timeline 7.

User s manual 1. Introduction 2. Installation & Requirements 3. Your Tom s Planner account & login 4. Open & Save 5. Grid 6. Blue timeline 7. User s manual 1. Introduction 3 2. Installation & Requirements 3 3. Your Tom s Planner account & login 4 4. Open & Save 4 5. Grid 6 Rows and groups 6 Columns 7 Time blocks 10 Icons 10 Comments 11 Dependencies

More information

Website Basics. An Introductory Guide to the Process and Terminology of Website Development. By Brockton James. Webmaster and Co-owner,

Website Basics. An Introductory Guide to the Process and Terminology of Website Development. By Brockton James. Webmaster and Co-owner, Website Basics An Introductory Guide to the Process and Terminology of Website Development By Brockton James Webmaster and Co-owner, P.O. Box 152, Magalia CA 95954 (530) 877-9682 or (530) 873-0984 email:

More information

Table of Contents. What is ProSite? What is Behance? How do ProSite & Behance work together? Get Started in 6 Easy Steps.

Table of Contents. What is ProSite? What is Behance? How do ProSite & Behance work together? Get Started in 6 Easy Steps. The Beginners Guide Table of Contents 03 04 05 06 34 35 What is ProSite? What is Behance? How do ProSite & Behance work together? Get Started in 6 Easy Steps See Live Examples Need More Help? What is ProSite?

More information

Learners will develop skills in planning and managing information to produce an interactive website.

Learners will develop skills in planning and managing information to produce an interactive website. Unit IT9: Website Design Level: 1 Unit type: IT Guided learning: 40 hours Unit in brief Learners will develop skills in planning and managing information to produce an interactive website. Unit introduction

More information

DESIGN A WEB SITE USING PUBLISHER Before you begin, plan your Web site

DESIGN A WEB SITE USING PUBLISHER Before you begin, plan your Web site Page 1 of 22 DESIGN A WEB SITE USING PUBLISHER Before you begin, plan your Web site Before you create your Web site, ask yourself these questions: What do I want the site to do? Whom do I want to visit

More information

Create a Newsletter with iwork by Lorrie Jackson

Create a Newsletter with iwork by Lorrie Jackson Education World EducationWorld.com Create a Newsletter with iwork by Lorrie Jackson WHY A TECHTORIAL? What will I learn today? You will learn how to create a newsletter using iwork's Pages program. What

More information

How to make a custom Joomla template!

How to make a custom Joomla template! How to make a custom Joomla template! Part 2 NOTE: This Tutorial has been donated by a Thomas Nielsen. This work is licensed under a Creative Commons Attributon NonCommercial ShareAlike 2.5 License. Lets

More information

SiteBuilder 2.1 Manual

SiteBuilder 2.1 Manual SiteBuilder 2.1 Manual Copyright 2004 Yahoo! Inc. All rights reserved. Yahoo! SiteBuilder About This Guide With Yahoo! SiteBuilder, you can build a great web site without even knowing HTML. If you can

More information

Carbine Design. Carbine Design. Validation and Design Guide

Carbine Design. Carbine Design. Validation and Design Guide Carbine Design Validation and Design Guide Persona JDAssistant Manager, Web Design Company JD is a 9-year-old assistant manager for a web design company, who has been assigned with hiring their new developers.

More information

Functions of Software Programs

Functions of Software Programs Functions of Software Programs The Design Center contains a wide array of graphic design, web, video, and audio editing software. Many of these applications, such as Photoshop and Final Cut Pro are powerful,

More information

38 Essential Website Redesign Terms You Need to Know

38 Essential Website Redesign Terms You Need to Know 38 Essential Website Redesign Terms You Need to Know Every industry has its buzzwords, and web design is no different. If your head is spinning from seemingly endless jargon, or if you re getting ready

More information

Graphic Design. Background: The part of an artwork that appears to be farthest from the viewer, or in the distance of the scene.

Graphic Design. Background: The part of an artwork that appears to be farthest from the viewer, or in the distance of the scene. Graphic Design Active Layer- When you create multi layers for your images the active layer, or the only one that will be affected by your actions, is the one with a blue background in your layers palette.

More information

Creating a Restaurant Website

Creating a Restaurant Website 11 Creating a Restaurant Website In This Lesson This lesson looks at the process of creating a small business website, in this case for a restaurant. Starting from a needs analysis, this lesson shows you

More information

Generate Android App

Generate Android App Generate Android App This paper describes how someone with no programming experience can generate an Android application in minutes without writing any code. The application, also called an APK file can

More information

css href title software blog domain HTML div style address img h2 tag maintainingwebpages browser technology login network multimedia font-family

css href title software blog domain HTML div style address img h2 tag maintainingwebpages browser technology login network multimedia font-family technology software href browser communication public login address img links social network HTML div style font-family url media h2 tag handbook: id domain TextEdit blog title PORT JERVIS CENTRAL SCHOOL

More information

Contents The Design Chooser... Mail Designer Pro 2 at a glance... The contents window... Working with text... Your first mail design...

Contents The Design Chooser... Mail Designer Pro 2 at a glance... The contents window... Working with text... Your first mail design... Mail Designer Pro 2 Contents The Design Chooser... 4 Mail Designer Pro 2 at a glance... 5 The contents window... 6 Your first mail design... 9 Creating a new design... 9 Working with layout blocks... 9

More information

css href title software blog domain HTML div style address img h2 tag maintainingwebpages browser technology login network multimedia font-family

css href title software blog domain HTML div style address img h2 tag maintainingwebpages browser technology login network multimedia font-family technology software href browser communication public login address img links social network HTML div style font-family url media h2 tag handbook: id domain TextEdit blog title CANAJOHARIE CENTRAL SCHOOL

More information

MICROSOFT EXPRESSION WEB WORKSHOP. Peg Fisher Email: pegfisher@embarqmail.com Pat Phillips Email: v-paphil@microsoft.com

MICROSOFT EXPRESSION WEB WORKSHOP. Peg Fisher Email: pegfisher@embarqmail.com Pat Phillips Email: v-paphil@microsoft.com MICROSOFT EXPRESSION WEB WORKSHOP Peg Fisher Email: pegfisher@embarqmail.com Pat Phillips Email: v-paphil@microsoft.com FREE CURRICULUM RESOURCES One semester - 8 modules including: History of the Web

More information

Joomla! template Blendvision v 1.0 Customization Manual

Joomla! template Blendvision v 1.0 Customization Manual Joomla! template Blendvision v 1.0 Customization Manual Blendvision template requires Helix II system plugin installed and enabled Download from: http://www.joomshaper.com/joomla-templates/helix-ii Don

More information

A Beginner s Guide to PowerPoint 2010

A Beginner s Guide to PowerPoint 2010 A Beginner s Guide to PowerPoint 2010 I. The Opening Screen You will see the default opening screen is actually composed of three parts: 1. The Slides/Outline tabs on the left which displays thumbnails

More information

Customizing your Blackboard Course

Customizing your Blackboard Course Customizing your Blackboard Course Changing the visual appearance Menu Buttons Changing your course buttons can add a splash of color to your course and make it more visually appealing to your students.

More information

Chapter 10: Multimedia and the Web

Chapter 10: Multimedia and the Web Understanding Computers Today and Tomorrow 12 th Edition Chapter 10: Multimedia and the Web Learning Objectives Define Web-based multimedia and list some advantages and disadvantages of using multimedia.

More information

Class Assignment. College Bus Graphics Design VCP 118-2 DIGITAL IMAGING III ASSIGNMENT DUE OCTOBER 25 TH FALL 2010

Class Assignment. College Bus Graphics Design VCP 118-2 DIGITAL IMAGING III ASSIGNMENT DUE OCTOBER 25 TH FALL 2010 FALL 2010 Class Assignment CECIL COLLEGE College Bus Graphics Design Choosing the right graphics for a job can be an overwhelming task. To begin the selection process, it is critical to ask two important

More information

Using Microsoft Word. Working With Objects

Using Microsoft Word. Working With Objects Using Microsoft Word Many Word documents will require elements that were created in programs other than Word, such as the picture to the right. Nontext elements in a document are referred to as Objects

More information

OmniUpdate Training (Advanced OU users level 7+)

OmniUpdate Training (Advanced OU users level 7+) (Advanced OU users level 7+) University Web Team The Web Team is a part of the Office of University Communication and Marketing s Creative Services Department. Our responsibility is to build, migrate,

More information

Airangel s WiFi Portal Best Practice Guidelines Get the most out of your WiFi infrastructure

Airangel s WiFi Portal Best Practice Guidelines Get the most out of your WiFi infrastructure CONTROL PERSONALISE SOCIALISE www.airangel.com Airangel s WiFi Portal Best Practice Guidelines Get the most out of your WiFi infrastructure Contents Why is my portal design so important? Page 03 - You

More information

Web Design for Programmers. Brian Hogan NAPCS Slides and content 2008 Brian P. Hogan Do not reproduce in any form without permission

Web Design for Programmers. Brian Hogan NAPCS Slides and content 2008 Brian P. Hogan Do not reproduce in any form without permission Web Design for Programmers Brian Hogan NAPCS Slides and content 2008 Brian P. Hogan Do not reproduce in any form without permission Quick Disclaimers This is a crash course! Many topics are simplified

More information

ILLUSTRATION BY 123KLAN www.123klan.com

ILLUSTRATION BY 123KLAN www.123klan.com ILLUSTRATION BY 123KLAN www.123klan.com 62 Computer Arts_May 2004 Tutorial CREATIVE SUITE WEB DESIGN IN ADOBE CS We show you four different methods for prepping your Web designs, using ImageReady CS, Photoshop

More information

MassArt Studio Foundation: Visual Language Digital Media Cookbook, Fall 2013

MassArt Studio Foundation: Visual Language Digital Media Cookbook, Fall 2013 INPUT OUTPUT 08 / IMAGE QUALITY & VIEWING In this section we will cover common image file formats you are likely to come across and examine image quality in terms of resolution and bit depth. We will cover

More information

INFOPATH FORMS FOR OUTLOOK, SHAREPOINT, OR THE WEB

INFOPATH FORMS FOR OUTLOOK, SHAREPOINT, OR THE WEB INFOPATH FORMS FOR OUTLOOK, SHAREPOINT, OR THE WEB GINI COURTER, TRIAD CONSULTING If you currently create forms using Word, Excel, or even Adobe Acrobat, it s time to step up to a best-in-class form designer:

More information

ITP 101 Project 3 - Dreamweaver

ITP 101 Project 3 - Dreamweaver ITP 101 Project 3 - Dreamweaver Project Objectives You will also learn how to make a website outlining your company s products, location, and contact info. Project Details USC provides its students with

More information

Chapter 6 Build, Buy, or Reuse Solutions: Develop a Website to Market the App

Chapter 6 Build, Buy, or Reuse Solutions: Develop a Website to Market the App This is Build, Buy, or Reuse Solutions: Develop a Website to Market the App, chapter 6 from the book Designing Business Information Systems: Apps, Websites, and More (index.html) (v. 1.0). This book is

More information

Create your own teacher or class website using Google Sites

Create your own teacher or class website using Google Sites Create your own teacher or class website using Google Sites To create a site in Google Sites, you must first login to your school Google Apps account. 1. In the top-right corner of any apps, you can click

More information

Getting Started with WebSite Tonight

Getting Started with WebSite Tonight Getting Started with WebSite Tonight WebSite Tonight Getting Started Guide Version 3.0 (12.2010) Copyright 2010. All rights reserved. Distribution of this work or derivative of this work is prohibited

More information

Artisteer. User Manual

Artisteer. User Manual Artisteer User Manual Table of Contents What Is Artisteer?...4 How to work with Artisteer interface?...5 Quick Start Guide...6 Downloading Artisteer...6 System Requirements...7 Installing Artisteer...8

More information

Lesson 5 Inserting Hyperlinks & Action Buttons

Lesson 5 Inserting Hyperlinks & Action Buttons Lesson 5 Inserting Hyperlinks & Action Buttons Introduction A hyperlink is a graphic or piece of text that links to another web page, document, or slide. By clicking on the hyperlink will activate it and

More information

Form Management Admin Guide

Form Management Admin Guide Form Management Admin Guide Getting around the navigation Model Management (Admin/Technical). Create, edit and manage the basic template of content models. Form Builder - Lets you create properties in

More information

Welcome to MailChimp.

Welcome to MailChimp. Welcome to MailChimp. Email doesn't need to be overwhelming. This guide will help you get your first campaign off the ground. We ll also offer tips for managing your list, viewing your reports, and making

More information

ADOBE DREAMWEAVER CS3 TUTORIAL

ADOBE DREAMWEAVER CS3 TUTORIAL ADOBE DREAMWEAVER CS3 TUTORIAL 1 TABLE OF CONTENTS I. GETTING S TARTED... 2 II. CREATING A WEBPAGE... 2 III. DESIGN AND LAYOUT... 3 IV. INSERTING AND USING TABLES... 4 A. WHY USE TABLES... 4 B. HOW TO

More information

Information Architecture. Proposal Document. Charlotte Baxter

Information Architecture. Proposal Document. Charlotte Baxter Proposal Document Contents 1. Abstract 3 2. Goals 4 3. User Experience 5 3.1 Audience 5 3.2 Competitive Analysis 5 4. Content 7 4.1 Page Content 7 4.2 Audio Content 8 4.3 Video Content 8 4.4 Functional

More information

WP Popup Magic User Guide

WP Popup Magic User Guide WP Popup Magic User Guide Plugin version 2.6+ Prepared by Scott Bernadot WP Popup Magic User Guide Page 1 Introduction Thank you so much for your purchase! We're excited to present you with the most magical

More information

Digital Web Design Syllabus/Online Course Plan

Digital Web Design Syllabus/Online Course Plan Digital Web Design Syllabus/Online Course Plan Certificated Teacher: Date: 2015-2016 Desired Results Digital Web Design: Grades 9 12 Credit: X one semester (.5) two semesters (1) Estimate of hours per

More information