31,19 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Fachliteratur
- Sprache: Englisch
Web design is the process of creating websites. It encompasses several different aspects, including webpage layout, content production, and graphic design. This book offers you everything you need to know to build your websites.
The book starts off by explaining the importance of web design and the basic design components used in website development. It'll show you insider tips to work quickly and efficiently with web technologies such as HTML5, CSS3, and JavaScript, concluding with a project on creating a static site with good layout. Once you've got that locked down, we'll get our hands dirty by diving straight into learning JavaScript and JQuery, ending with a project on creating dynamic content for your website. After getting our basic website up and running with the dynamic functionalities you'll move on to building your own responsive websites using more advanced techniques such as Bootstrap. Later you will learn smart ways to add dynamic content, and modern UI techniques such as Adaptive UI and Material Design. This will help you understand important concepts such as server-side rendering and UI components. Finally we take a look at various developer tools to ease your web development process.
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Seitenzahl: 236
Veröffentlichungsjahr: 2018
Ähnliche
Practical Web Design
Copyright © 2018 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
Commissioning Editor: Kunal ChaudhariAcquisition Editor: Nigel FernandesContent Development Editor: Arun NadarTechnical Editor: Surabhi KulkarniCopy Editor: Safis EditingProject Coordinator: Sheejal ShahProofreader: Safis EditingIndexer: Mariammal ChettiyarGraphics: Jason MonteiroProduction Coordinator: Shantanu Zagade
First published: April 2018
Production reference: 1240418
Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK.
ISBN 978-1-78839-503-8
www.packtpub.com
Mapt is an online digital library that gives you full access to over 5,000 books and videos, as well as industry leading tools to help you plan your personal development and advance your career. For more information, please visit our website.
Why subscribe?
Spend less time learning and more time coding with practical eBooks and Videos from over 4,000 industry professionals
Improve your learning with Skill Plans built especially for you
Get a free eBook or video every month
Mapt is fully searchable
Copy and paste, print, and bookmark content
PacktPub.com
Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at [email protected] for more details.
At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters, and receive exclusive discounts and offers on Packt books and eBooks.
Contributers
About the author
Philippe Hong is a French award-winning designer, UI/UX, and front-end developer. He's a creative person who's passionate about making the best possible experience for people. The judge at CSSDA, he won several awards, such as two Website of the day awards, Bemyapp Games WorldCup, Dailymotion Best Mobile application, and many others. He has had the privilege to work with well-known brands and is an actively engaged designer who takes pleasure in writing and talking about design on different occasions.
About the reviewers
Marija Zaric is a freelance web designer living in Belgrade, Serbia, with a focus on individual and commercial clients who demand websites that are modern, creative, simple, and responsive. She works with clients from the USA and all over the world, helping them present their services in a unique and professional way. Marija was a technical reviewer for the books Responsive Media in HTML5, Mastering Responsive Web Design, Responsive Web Design Patterns, and Mastering Bootstrap 4 for Packt Publishing.
Kang Hong Chen is an artist and developer currently based in London, UK. He has previously worked on the core development team of Airtasker, ustwo, and now is working at Net a Porter. He has collaborated with Philippe on design system software such as Sketch Export Generator. Ed blogs at edsnider [dot] net and can be found on Twitter at twitter [dot] com/edsnider.
Packt is searching for authors like you
If you're interested in becoming an author for Packt, please visit authors.packtpub.com and apply today. We have worked with thousands of developers and tech professionals, just like you, to help them share their insight with the global tech community. You can make a general application, apply for a specific hot topic that we are recruiting an author for, or submit your own idea.
Table of Contents
Title Page
Copyright and Credits
Practical Web Design
PacktPub.com
Why subscribe?
PacktPub.com
Contributers
About the author
About the reviewers
Packt is searching for authors like you
Preface
Who this book is for
What this book covers
To get the most out of this book
Download the example code files
Download the color images
Conventions used
Get in touch
Reviews
Evolution of Web Design
The first ever website
Table-based layouts
Introduction of Flash
CSS – the savior
Web 2.0
The rise of the mobile
Responsive web design
Flat design
What's next?
Summary
Web Design and its Components
Grids
The cons
Call to Action
Making it obvious
Using contrasting color
Compelling copy
Placement
Breadcrumb
The search bar
The submit button
Making it noticeable
Placing the search bar correctly
Icons
Describing in a nutshell  
Drawing attention of the users
Directional
Modal
Typography
Choosing a font that connects your brand
Serif fonts
Sans-serif
Casual scripts
Don't use too much typeface
Colors
What colors mean
Usability
Simplicity
Navigability
Accessibility
Consistency
So, how can we be consistent?
Design
Content
Interactions
Summary
Website-Designing Workflow
Our situation
Goal identification
What is the purpose of the website?
Who is the website for?
Is this useful for our audience?
What do they expect to find or do there?
Does the website need to follow a brand or have its own brand identity?
Are there any competitors? If there are, how is the website different than others?
Defining the scope
Creating wireframes
Designing
Get inspiration
Improve
Invent
Implementing, testing, and launching
Summary
Responsive Versus Adaptive Design
Responsive design
Adaptive design
So which one is the best?
The takeaway
Summary
Learning HTML5
Our main tool
What is HTML?
HTML tags
HTML attributes
HTML structure
Creating our first page
HTML elements
Titles and paragraphs
Links and images
Summary
Learning CSS3
The different ways to use CSS
CSS formatting
Parent and child elements
Classes and IDs
CSS box model  
The boxes
Block and inline
CSS layout and dividers
The basic layout
Formatting and indenting your HTML
Styling our class
Summary
Building Your Own Website
Our design
Installing HTML Boilerplate
Editing index.html
Creating our web page
Images folder
Installing our font
Importing Google Font
Adding normalize.css
The header
Creating a menu
Inserting links
Adding a logo
Right-hand side menu
Adding a Facebook like button
Styling our header
Adding the hero section
CSS flexbox
Positioning in CSS
Position static
Position relative
Position absolute
Position fixed
Position sticky
Blog section
Creating the ABOUT US section
Adding the Partner section
Adding the footer section
Summary
Making Our Website Responsive
What are media queries? 
Opening the inspector
Desktop first
Designing the menu
What is jQuery? 
jQuery syntax
Making the hero section responsive
Making the Blog section responsive
Making the ABOUT US section responsive
Making the footer section responsive
Summary
Adding Interaction and Dynamic Content
CSS pseudo-classes
Sticky navigation 
JS Plugin: Waypoints
CSS animation
Adding a dynamic Instagram feed
Installing Instafeed.js
Getting images from your user account
Finding our userID and TokenAccess
Getting our access token
Displaying the feed
Summary
Optimizing and Launching Our Website
Creating a favicon
Site performance optimization
Optimizing images
Optimizing our code
Basic SEO improvement
What is search engine optimization?
Meta description
Valid HTML
Keywords
Links
Launching our website
Buying a domain name
Google analytics
Google Search Console
Summary
What is Bootstrap?
What is Bootstrap?
Components
Bootstrap Grid system
Media queries
Summary
Building a Website with Bootstrap
Installing Bootstrap 
Setting up our project 
Bootstrap navbar 
Coding the Bootstrap navigation
Styling our navigation bar 
Styling the hero section
Styling the Blog section
Styling the about section 
Styling the partner section
Styling the footer
Summary
Introduction to Client-Side Rendering
What is server-side rendering?
What is client-side rendering?
Pros and cons of server and client-side rendering
Server-side rendering
Client-side rendering
Introducing to VueJS
Setting up VueJS
Creating a weather application in VueJS
Vue Material
Components
OpenWeather API
The API call
Summary
Tools to Help Your Workflow
HTML Boilerplate
Lorem Ipsum
CSS preprocessor – LESS
CSS preprocessor – SCSS
ColorZilla
Foundation
Fontastic
webflow
Modernizr
CSS3 Generator
git
CodeKit
Animate.css
TinyPNG
Unsplash
Summary
Other Books You May Enjoy
Leave a review - let other readers know what you think
Preface
I'm still amazed when I see how the web has evolved since I started working in this field. I have always liked the fact that the internet is a fast-moving technology—technology, design, process, and everything changes so quickly.
Practical Web Design is a complete hands-on book of Web designer. Every chapter has been thoroughly revised to deliver information, tips, and approaches that are easy to understand and simple to use.
The first part of this book is about the fundamentals of web design. It focuses on its history, evolution, and also the principal components. We will finish this book with a step-by-step design workflow and a comparison between Responsive design and Adaptive design.
The second part of this book will teach you how to build and implement your website from scratch, with an introduction to Bootstrap framework, client-side rendering, and the best tools for your design workflow.
Who this book is for
Practical web design teaches readers the fundamentals of web design and how to build a Responsive website with interaction and dynamic content from scratch. It's the perfect book for anyone who wants to learn web design and frontend development. It's suitable for people with no experience but also great for anyone with some experience and are willing to improve it.
What this book covers
Chapter 1, Evolution of Web Design, is about the history of web design, from the beginning of the web with Sir Tim Berners-Lee, how the World Wide Web started, to its evolution now.
Chapter 2, Web Design and its Components, is about components in web design. This book will help you understand each component, their usage, and why it's useful in your design.
Chapter 3, Website Designing Workflow, is about web design workflow. This book will go through all the processes from start to launch, from concept to launch, step by step.
Chapter 4, Responsive Versus Adaptive Design, compares the Responsive design and Adaptive design. It will show you which process will suit your project best.
Chapter 5, Learning HTML5, teaches you the basic of HTML5, how to build and structure an HTML page.
Chapter 6, Learning CSS3, helps you to understand the fundamentals of CSS, how to stylize your HTML page with CSS.
Chapter 7, Building Your Own Website, goes through all the processes of building a website and introduces the HTML Boilerplate and help you step your project correctly.
Chapter 8, Making Our Website Responsive, shows you step by step how to make your website Responsive with an introduction to jQuery.
Chapter 9, Adding Interaction and Dynamic Content, add interaction and dynamic content to your website and teaches you how to call an API and show information on your website.
Chapter 10, Optimizing and Launching Our Website, teaches you how to optimize your website using different tools and analytics.
Chapter 11, What is Bootstrap?, explores all the possibilities with Bootstrap Framework, including Bootstrap Grid System, buttons, and forms.
Chapter 12, Building a Website with Bootstrap, builds a website with Bootstrap Framework and helps you understand the difference and the advantage of it.
Chapter 13, Introduction to Client-Side Rendering, introduces you the world of client-side rendering, with a quick example of a Weather Project.
Chapter 14, Tools to Help Your Workflow, lists the best tools to enhance your design workflow.
To get the most out of this book
To get the most out of this book, it's best to have a bit of design experience, but it's not necessary. You can go through this course without any knowledge whatsoever.
Furthermore, you'll need a computer running on Windows, or OS X; the latest version of your favorite internet browser (Chrome, Firefox, or Safari); and a code editor, in this book, we'll use Atom.
Download the example code files
You can download the example code files for this book from your account at www.packtpub.com. If you purchased this book elsewhere, you can visit www.packtpub.com/support and register to have the files emailed directly to you.
You can download the code files by following these steps:
Log in or register at
www.packtpub.com
.
Select the
SUPPORT
tab.
Click on
Code Downloads & Errata
.
Enter the name of the book in the
Search
box and follow the onscreen instructions.
Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:
WinRAR/7-Zip for Windows
Zipeg/iZip/UnRarX for Mac
7-Zip/PeaZip for Linux
The code bundle for the book is also hosted on GitHub at https://github.com/PacktPublishing/Practical-Web-Design. In case there's an update to the code, it will be updated on the existing GitHub repository.
We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!
Download the color images
We also provide a PDF file that has color images of the screenshots/diagrams used in this book. You can download it here: https://www.packtpub.com/sites/default/files/downloads/PracticalWebDesign_ColorImages.pdf.
Conventions used
There are a number of text conventions used throughout this book.
CodeInText: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: "Let's create this folder and call it Racing Club Website."
A block of code is set as follows:
<html> <!--This is our HTML main tag--> <head> <!--This is our head tag where we put our title and script and all infos relative to our page.--> <title>My Page Title</title> </head> <body> <!--This is where all our content will go--> <h1>John Doe</h1> </body></html>
When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
.content { background-color: red;
width: 75%;
}.sidebar { background-color: green;
width: 25%;
}
Bold: Indicates a new term, an important word, or words that you see onscreen. For example, words in menus or dialog boxes appear in the text like this. Here is an example: "then click on the three dots at the right-hand corner and click on Show device frame."
Get in touch
Feedback from our readers is always welcome.
General feedback: Email [email protected] and mention the book title in the subject of your message. If you have questions about any aspect of this book, please email us at [email protected].
Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details.
Piracy: If you come across any illegal copies of our works in any form on the Internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.
If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.
Reviews
Please leave a review. Once you have read and used this book, why not leave a review on the site that you purchased it from? Potential readers can then see and use your unbiased opinion to make purchase decisions, we at Packt can understand what you think about our products, and our authors can see your feedback on their book. Thank you!
For more information about Packt, please visit packtpub.com.
Evolution of Web Design
I still remember back when I was a kid, I used to browse the internet with my 56k modem. It seemed terrific at the time! Websites were loading very slowly, but they were designed to minimize the consumption of data we were using since each kbit was calculated as usage (no unlimited internet, ha!). To understand how web design works, I strongly think that we need to know the history behind it, how developers and designers were designing websites when it first started in 1991 with Tim Berners-Lee's first website. The evolution of web design with table-based sites, animated text and GIF images, free page builders, and the introduction of Flash by Macromedia in 1996 was a significant advancement in the world of web design. It will really help you understand the web design principles of why and where it was heading. Let's go through these key aspects to have a precise idea of how web design has evolved and to analyze its importance in our day-to-day life in contemporary society.
In this chapter, we will cover the following:
The first ever website:
The beginning of the World Wide Web
Table-based layouts:
Introducing table markup in HTML
Introduction of Flash:
The renaissance of web design
CSS—the savior:
A new way of designing websites
Web 2.0:
JavaScript—A new intelligence for web
The rise of the mobile:
The boom of mobile web design
Responsive web design:
Designing for mobile and desktop
Flat design:
The rise of a new design trend
The first ever website
The first ever website was created by a scientist named Sir Tim Berners-Lee in 1990. He was a British computer scientist at CERN, the European Organization for Nuclear Research. It was basically a text-based website with a few links. A copy of the original page from 1992 still exists online. It simply existed to serve and tell people what the World Wide Web (WWW) was:
Most websites to follow were pretty much the same. There were entirely text-based with simple HTML markup:
<h1>
for titles
<p>
for paragraphs
<a>
for links (we will go through all this markup in our HTML course)
The following version of HTML further allowed people to insert images, <img>, and tables, <table>, thus creating more possibilities.
In 1994, the WWW Consortium (W3C) was formed to set and establish the standard of the web (https://www.w3.org/). It was mainly to discourage and prevent private companies from building their own web language, as it would create chaos on the web. The W3C to this day continues to deliver standards for the open web, such as the new HTML5 or CSS3.
Here are some examples of websites in the 90s. The following screenshot shows how the Yahoo web page used to look back in 1994:
The following screenshot shows how the Google web page used to look back in 1996:
Table-based layouts
Web design became more interesting with the introduction of table markups in HTML. Web designers saw the opportunity to structure their design with the original table markup (sneaky as they always are). Sites were still text heavy, but at least they could separate the content into different columns, rows, and other navigation elements. The usage of spacer GIFs, introduced in David's Siegel's book Creating Killer Sites in 1996, allowed web designers to play with white space (basically, small transparent GIFs were placed in between the content), and by incorporating a sliced image background, users would have an illusion of a simple structure, whereas in reality there was a table layout behind it. Designers could finally play around with some graphic design elements as it grew rapidly in popularity, such as having visit counters, animated GIFs, and so on. Texts and images were literally dancing across websites everywhere.
We can see this in this website from 3drealms in 1996, which shows all the fancy elements designers used to add to their websites:
We can also see the evolution of the Yahoo web page in 2002:
Introduction of Flash
Flash, previously Macromedia Flash and currently Adobe Flash, was created in 1996. It was like a renaissance for web design. People would probably make fun of you if you built your website with Flash today, but back then it was the killer tool to create interactive and graphics websites. Designers were able to add animation, custom fonts and shapes, 3D buttons, splash pages, and all in one tool-Flash. The whole was encapsulated into one file to be read into the user's browser. It was like magic. Unfortunately, that magic was inconvenient. It was not Search Engine Optimization (SEO)-friendly and was very heavy in terms of resources for your computer.
Flash started to decline when Apple decided to stop supporting Flash in their iOS software back in 2010 (https://www.apple.com/hotnews/thoughts-on-flash/). With the new features of HTML5/CSS3, where you are able to create animation and add multimedia content, designers and developers soon diverted from Flash, at least for web design.
Here are some examples of Flash websites. This screenshot shows a very basic flash website that uses sliders, animations, and interactions. You can check this website at http://www.richard-goodwin.com/flash/indexn.html.
Here's one impressive Flash website that was around when I started web design, Immersive Garden:
CSS – the savior
Cascading Style Sheets (CSS) became more popular in the 2000s with their increasing support in web browsers. CSS defines how the HTML is displayed, and this has allowed designers to separate the content and the design, making websites easier to maintain and quicker to load. You could change the entire look of a CSS-based website without touching the content.
CSS really made the difference as an alternative to Flash. Recommended by the W3C as a best practice, it provides a cleaner semantic, resulting in better SEO.
However, one downside of CSS was the lack of support from various browsers: one browser would support the newest feature, while another would not. It was a nightmare for developers.
We'll look into this with further details in Chapter 6, Building Your Own Website, of the book. Here are some design changes in Yahoo's website (2009):
Web 2.0
The early 2000s saw the rise of JavaScript. This is when things really started to move towards the web we know today. JavaScript was the first means of adding intelligence to the web. Designers were able to add interaction, complex navigation, and multimedia applications to their design.
While the very beginning of the web seemed to focus mainly on design and aesthetics, it soon, however, became user-centered with usability as the main focus. Designers were also more aware of color distribution, placements, attention to typography, and the usage of icons instead of text links. At last, the evolution of Web 2.0 also saw the growth of SEO, as content driving. These techniques, such as keyword optimization, tagging, and inbound and outbound links, are still being used now. The web industry really saw the importance of SEO, and this became the main focus of web design during this time.
Here are some examples of websites:
We can see the difference in terms of the design. The layout and content are more structured. With MySpace website, developers started to create applications for people to interact with:
The rise of the mobile
I still remember when the first iPhone came out. It was pretty clear to me that I would not buy one. I clearly didn't know myself at the time. The iPhone ultimately started the boom of mobile browsing. Nobody in the web industry saw this coming; how could users browse a website on a screen so small? It was clearly not user-friendly at all. Web designers started to design a second website that would show only on mobile. I still remember those links started with m.domainname.com. It was definitely a hassle to maintain two websites. People were starting to access websites from their mobile more and more.
In 2016, for the first time in the world, mobile and tablet internet usage exceeded desktop usage:
Responsive web design
The first time we heard the term responsive web design, it was from Ethan Marcotte in 2011. In his book on responsive design, he described a new way of designing for the desktop but also for the mobile interface, basically proposing to use the same content, but a different layout for the design on each screen. The introduction of the 960 grid system also helped this responsive issue (https://960.gs). The most popular versions being used were either 12 or 16 columns. It became a standard for designers to design their websites using 12 columns for desktop and downgrading progressively for mobile viewing. With the introduction of media queries with CSS3, it became easier for designers to design websites for mobile screens.
We will be exploring this subject in further detail in the next chapter.
Media queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (for example, a smartphone screen compared to a computer screen). From left to right, we have the iPhone, iPad, and desktop version. This is a perfect example of a grid system and media queries (https://www.wired.com/2011/09/the-boston-globe-embraces-responsive-design/):
Flat design
You've probably heard of this term. If not, flat design is the term given to the style of design in which elements do not have stylistic shapes and characters, such as gradient, drop shadows, textures, and any type of design that makes it look real and three dimensional. It's usually described as the opposite of rich design, which in contrast is used to make elements feel more tactile, real, and usable for users when they're navigating.
People often say that flat design originated from the Swiss Style. If you haven't heard of this, Swiss Style (also known as International Typographic Style) was the dominant design style back in the 1940-50s and started in Switzerland:
