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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
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
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
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
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.
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...
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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,
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,
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
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
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
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
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
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
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
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
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:
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
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
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
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
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
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
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
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
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
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
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
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
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
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,
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
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
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
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
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:
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?
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
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
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
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
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.
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,
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
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.
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
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
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
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
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
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
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
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.
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.
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
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
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
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
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:
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
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
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
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
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
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
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