Planning Your Website
What you’ll learn in this lesson:
• Defining the goals of web design
• Understanding the difference between wireframes, prototypes, and mockups
In this lesson, you’ll learn how to improve your website by clearly defi ning what you want the site to do during the planning process
This lesson does not use any lesson fi les, so you do not need to load any fi les before starting this lesson.
Enhance your understanding of the lesson's features by watching the accompanying video tutorial, available at www.digitalclassroombooks.com Access the video using the URL provided during your book registration.
The goals of web design
To create well-designed websites, it's essential to grasp the fundamentals of design Effective design enhances user experiences, making life easier while also being visually appealing For instance, a well-structured online store simplifies the process for customers to find desired products, as well as discover new ones they weren't aware of.
The goals of web design
Well-designed road signs are easily visible from a distance, allowing drivers to quickly comprehend their messages, even at high speeds Similarly, a well-crafted chair not only provides comfort but also complements the room's aesthetic.
A store, a sign, and a chair are all designed with a specifi c intent
Designers meticulously plan outcomes by leveraging their skills, experience, and resources like materials and budget Various disciplines necessitate distinct design tools For instance, web designers must effectively organize and convey information, presenting it in a visually appealing manner with the tools at their disposal.
Web design presents unique challenges due to its rapid evolution and the changing definition of the discipline Initially focused on creating pages for web browsers, web design now requires consideration of various devices, including mobile phones, tablets, and other consumer electronics The distinction between mobile design and web design is diminishing as mobile technology advances This continuous evolution is what makes the field of web design particularly exciting for many professionals.
Web design is an evolving field that benefits from the principles of print design While there are distinct differences between the two, comparing and contrasting them can provide valuable insights for designers, allowing them to build on established concepts rather than starting from scratch.
The diff erence between print design and web design
Print media focuses on visual engagement, while web media emphasizes interactive experiences Various formats such as books, magazines, posters, newspapers, brochures, and advertisements convey messages through text and images Designers aim to incorporate a call to action in their creations, encouraging customers to take specific actions prompted by the design.
The goals of web design
• A visually exciting movie poster’s call to action might be, “Go see this movie!”
• A political campaign displays signs with the call to action, “Vote for me!”
• An advertisement in a magazine off ering a free sample might have the call to action,
“Contact us to learn more!”
In this 19th century advertisement the call to action implores the customer to see the product before going home
When comparing a print flyer for a shoe sale to its online version, the print flyer features a compelling call to action: “Show up at the store this Saturday to buy these shoes at a discount.” This enticing message, combined with well-organized information, effectively motivates customers to visit the store The designer enhances the flyer’s appeal through the strategic use of color, typography, and engaging images, which collectively emphasize the value of the sale and capture the attention of potential buyers.
The print designer's role is considered complete once the file is sent to the printer, after which the responsibility shifts to the salesperson to finalize the sale when the customer arrives in the store.
The goals of web design
The web designer plays a crucial role in guiding potential customers through their online shopping experience When a customer visits the shoe store's website, they can easily find a button to view shoes on sale To facilitate informed decisions, the site should provide detailed information, such as a table displaying available sizes, colors, and brands Additionally, the design of the shopping cart process is essential for a seamless purchasing experience.
The ultimate goal for a shoe store owner is for the customer to purchase shoes, whether in-store or online In both scenarios, information is conveyed from the store to the customer, but the website designer plays a vital role throughout the entire sales process Understanding that the web is an active medium is essential, and this design process is known as user interaction design.
The web demands user interaction
The experience of a website is defi ned by the interaction the user has with it For example, a user clicks on navigation or scrolls down to read a page.
Reading a book exemplifies user interaction, particularly in the Western world where individuals read from left to right This process involves turning pages and scanning page numbers and tables of contents to locate specific chapters or topics.
When designing web pages, it's essential to recognize that users engage in various online activities, such as searching for information, checking the weather, transferring money, and booking flights Designers must consider these actions and anticipate the motivations behind users' visits to create an effective and user-friendly experience.
You not only can read an online newspaper, but search, print, email, tweet, comment and listen
The goals of web design
Defi ning the user experience
Balancing user interaction is crucial; providing too many options can be as detrimental as offering too few Designers must ensure that users can navigate multiple pathways without feeling lost Ultimately, the cumulative effect of a user's interactions with a website defines the overall user experience.
User experience is the key factor that sets websites apart from printed materials This critical aspect has led to the emergence of web professionals known as information architects, who focus on the organization and structure of a website and its navigation Information architecture, in its purest form, does not address elements like color, typography, or graphics In larger design agencies, it is common for information architects to work alongside designers, particularly during the initial phases of website design.
Web Design Tools
What you’ll learn in this lesson:
• Fundamentals of web page technology
• The roles of HTML, CSS, and JavaScript
• The evolution of web standards
In this lesson, you’ll learn the fundamentals the Internet and the
World Wide Web work and how designing for web diff ers from other methods of communication
In this lesson, you will be working with various files located in the web02lessons folder Ensure that you have downloaded the weblessons folder to your hard drive from www.digitalclassroombooks.com/webdesign.
See “Loading lesson fi les” in the Starting Up section of this book.
Enhance your understanding of the lesson's features by watching the accompanying video tutorial, available at www.digitalclassroombooks.com Access the video using the URL provided during your book registration.
Understanding the structure and function of the Internet and the World Wide Web is essential for effectively delivering your web design projects This lesson will provide insights into how websites are hosted and how the pages you create are displayed on visitors' computer screens and mobile devices globally.
The Internet and World Wide Web domain names
The Internet operates on the principle that every computer can connect with one another through a unique address, similar to how homes and businesses have physical addresses for mail delivery This unique identifier for Internet-connected devices is known as a TCP/IP address, which stands for Transmission Control Protocol/Internet Protocol While the technical details may not be essential, it's important to understand that TCP/IP facilitates the transmission of digital information packets, such as websites, across networks, allowing them to be reassembled at their intended destinations These TCP/IP addresses are commonly known as IP addresses.
Internet small “packets” and adds a header
IP adds a header ETHERNET adds a header
Packets are re-assembled at the second computer The protocol
“checks” to make sure all the information sent has been received
A simplifi ed diagram of how fi les are sent over the Internet
In the early 1990s, Sir Tim Berners-Lee harnessed the interconnected nature of the Internet to develop a system that allowed his colleagues to remotely access data stored on his computer.
A user anywhere in the world who had access to the Internet could connect to a server and
27 Lesson 2, Fundamentals of the Web
2 request a page, which would then display on the user’s computer Berners-Lee dubbed it the
The World Wide Web began with a basic version of the first web browser, and while web browsers and the information they provide have significantly evolved, the underlying technical concepts remain unchanged.
One computer with a TCP/IP address is able to request information, such as a web page, from a computer located at another TCP/IP address.
Researchers such as Berners-Lee appreciated the instant access to documents, and the World
The World Wide Web initially served as a platform for academic research, but its commercial applications rapidly developed In 1994, only a few websites existed, yet by 1999, this number skyrocketed to over six million.
Although not technically the fi rst web browser, the Mosaic browser released in 1993 triggered the popularity of websites worldwide
Domain names are essential for navigating the Internet, typically formatted with "www" at the beginning and ".com" at the end.
Domains can also include various endings such as org, edu, and gov.
Domain names exist because it’s not very convenient for you to use or remember IP addresses
Domain Name Servers (DNS) translate easy-to-understand domain names into IP addresses
A DNS converts a familiar string of letters, the “domain name,” to the numbered IP address
Instead of entering the IP address 72.32.147.166 in a web browser, you can simply use the domain name www.digitalclassroombooks.com The Domain Name System (DNS) translates your domain request into the corresponding IP address, directing your request to the correct web server.
A web server is a powerful computer similar to a desktop PC, typically operating on Microsoft Windows Web Server or UNIX It is equipped with enhanced processing capabilities and redundant systems to manage traffic from thousands of users simultaneously By maintaining a constant Internet connection, web servers ensure that websites remain accessible 24/7.
Most companies require their web servers to be operational 24/7, leading them to rely on web hosting companies for maintenance These firms ensure that websites remain accessible and functional Small websites are typically hosted on shared servers, while more demanding sites or those handling sensitive information often require dedicated servers, which come at a higher cost Even large corporations frequently utilize hosting services, although some may choose to manage their own web servers internally.
The language of the web
HTML, or Hypertext Markup Language, utilizes tags to enclose plain text, defining both its appearance and function Web browsers interpret these tags to display the content appropriately.
Do you want to have lunch?
The phrase "Do you want to have lunch?" is enclosed within paragraph tags, specifically the opening tag
and the closing tag
These tags are typically not visible in the browser, as the browser retrieves the text from the web server and formats it as a paragraph for display on the viewer's screen.HTML enables designers to create hyperlinks, which are clickable text, images, buttons, or other elements that allow users to access additional content By clicking a hyperlink, users can open new web pages, sites, documents, videos, or animations.
The evolution of the web and web standards
HTML is interpreted by web browsers, such as Internet Explorer, Firefox, Safari, and Chrome
Web designers must recognize that identical HTML code can render differently across various web browsers Due to the differing interpretations of HTML by browsers, it is essential to incorporate browser testing into your design process, a topic we will explore further in Lesson 10.
In the early days of the web, some browser developers created proprietary HTML tags
They created tags that were supported by only their browser, as they hoped that the unique capabilities might draw more users.
29 Lesson 2, Fundamentals of the Web
Soon designers discovered they could not rely on the same HTML code for all browsers
Graphics, Color, and Transparency
What you’ll learn in this lesson:
• Creating and editing HTML using a text editor
• Introduction to using Dreamweaver and Expression Web for site design and management
• Using web browsers for testing and troubleshooting
Web design tools vary from basic utilities to advanced software solutions, and your selection may depend on personal preference, project requirements, or employer-provided tools This article offers an overview of popular web design tools.
In this lesson, you will be working with various files located in the web03lessons folder Ensure that you have downloaded the weblessons folder to your hard drive from www.digitalclassroombooks.com/webdesign.
See “Loading lesson fi les” in the Starting Up section of this book.
Enhance your understanding of the lesson's features by watching the accompanying video tutorial Access the video at www.digitalclassroombooks.com using the URL you received upon registering your book.
Web editors versus WYSIWYG tools
This lesson offers an overview of web design tools along with step-by-step exercises It features web editors that are available as fully functional trial versions at no cost To get started, download and install the recommended software tools, including a text editor like TextWrangler for Mac or Visual Web Developer Express Additionally, you will need a program with a visual design surface, such as Dreamweaver or Expression Web.
Web editors versus WYSIWYG tools
HTML and CSS are fundamentally based on text, allowing even basic text editors like TextEdit and Notepad to create web pages However, these simple tools lack essential features for web design and development, such as code syntax checking, site folder organization, and file uploads to web servers In contrast, fully featured web editors and design tools like Adobe Dreamweaver and Microsoft Expression Web offer WYSIWYG environments that combine visual layout, code editing, and website management Additionally, robust text editors and coding tools that support web markup and programming languages like HTML, CSS, JavaScript, and PHP provide further capabilities for website creation This overview will explore the advantages and disadvantages of each category of web design tools.
Web editors versus WYSIWYG tools
Plain text editors like Notepad and TextEdit come pre-installed with Mac OS and Windows, making them easily accessible and free However, they are not tailored for web design, requiring users to have a strong understanding of coding languages, as they offer no assistance in writing code Additionally, these basic editors do not provide features for previewing web pages in a browser or checking for syntax errors and broken links.
Writing HTML and CSS in a plain text editor provides little guidance
While the default text editors available on Mac OS and Windows can serve as a last resort, they are generally not recommended as primary tools for web design.
Web editors versus WYSIWYG tools
Using Notepad or TextEdit as a web editor
Windows Notepad can be found on any Windows system in the Accessories panel You can create an HTML document by following these steps:
1 Choose Start > Programs > Accessories > Notepad, and when the Notepad window appears, choose File > New.
By default, the fi le is saved in the text (.txt) format and so any HTML tags that the fi le contains cannot be interpreted by a web browser.
2 In Notepad, select File > Save As Change the fi le extension from txt to html in the fi le name fi eld.
3 Specify “All Files” in the Save as type fi eld Set the Encoding value to UTF-8 instead of ANSI; this is the necessary encoding for HTML pages.
If you work on a Mac OS computer, you can use the TextEdit application to create or modify HTML and CSS fi les.
1 On your Mac, open the Applications folder and locate the TextEdit application.
TextEdit typically opens and saves documents in rtf (rich text format) by default To effectively use TextEdit for HTML, you need to adjust the application preferences.
2 Choose TextEdit > Preferences The Preferences dialog box opens.
3 In the New Document tab, click to select the Plain text radio button With this option selected, TextEdit creates only plain text without any formatting applied to the text.
To configure TextEdit for HTML file creation, navigate to the Open and Save tab and select the options to ignore rich text commands in both HTML and RTF files Additionally, ensure that the option to add a ".txt" extension to plain text files is deselected, as you will be saving your files with the ".html" extension.
In the HTML Saving Options group, select XHTML 1.0 Transitional as the document type, ensure the Styling menu is configured to Embedded CSS, and set the Encoding menu to Unicode (UTF-8).
To apply the new preferences in TextEdit, close the Preferences dialog and exit the application by selecting TextEdit > Quit TextEdit Restart TextEdit by double-clicking its icon in the Applications folder, and the updated settings will take effect.
Web editors versus WYSIWYG tools
Text editors for web design
Advanced text editors offer numerous benefits that enhance coding efficiency and ease of use In this article, we will explore some of these advantages.
Code coloring enhances the readability of HTML and CSS by visually distinguishing syntax from content, whether you're creating a new page or editing an existing one Different colors are assigned to tags, attributes, and values, making it simpler to locate specific code and identify errors for correction.
Neglecting to include a closing bracket or quotation mark can lead to incorrect color coding in your content Once you become familiar with colored syntax, it becomes easier to identify errors in HTML Additionally, many modern text editors offer the option to customize syntax colors for better visibility.
Code coloring visually separates the tags from the content
Line numbers, invisible characters, and other visual aids
Most text editors display line numbers in editable documents, aiding in navigation and collaboration among designers and developers Additionally, these tools facilitate the visibility of hidden characters like line breaks and carriage returns.
Web editors versus WYSIWYG tools