Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Advanced Search Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Web Design Blueprints
  • Table Of Contents Toc
  • Feedback & Rating feedback
Web Design Blueprints

Web Design Blueprints

By : LaGrone
5 (1)
Buy this Book
close
close
Web Design Blueprints

Web Design Blueprints

5 (1)
By: LaGrone
Buy this Book

Overview of this book

The book delivers simple instructions on how to design and build modern Web using the latest trends in web development. You will learn how to design responsive websites, created with modern Flat User Interface design patterns, build deep-scrolling websites with parallax 3D effects, and roll-your-own single-page applications. Finally, you'll work through an awesome chapter that combines them all. Each chapter features actual lines of code that you can apply right away.
Table of Contents (7 chapters)
close
close
close
Preface
Icon
Preface
Icon
What this book covers
Icon
What you need for this book
Icon
Who this book is for
Icon
Conventions
Icon
Reader feedback
Icon
Customer support
Lock Free Chapter
1
1. Responsive Web Design
Icon
1. Responsive Web Design
Icon
Introduction to responsive web design
Icon
Getting familiar with the basics
Icon
Using media queries for responsive design
Icon
Working with responsive media
Icon
Building responsive layouts
Icon
Summary
2
2. Flat UI
chevron up
Icon
2. Flat UI
Icon
A brief history of flat design
Icon
Flat UI color
Icon
Creating a flat UI layout
Icon
Summary
3
3. Parallax Scrolling
Icon
3. Parallax Scrolling
Icon
Starting off
Icon
Color classes
Icon
Using SVG font icons
Icon
Getting the fonts
Icon
That's no moon!
Icon
OMG, it's full of stars!
Icon
Clouds, birds, and airplanes
Icon
The rocket
Icon
Terra firma
Icon
Next up, the CSS
Icon
Styling the objects with CSS
Icon
Styling the ground objects
Icon
Writing the JavaScript effects
Icon
Setting the row height
Icon
Spreading the objects
Icon
Spreading the clouds
Icon
Loading the page functions
Icon
Smoothening the scroll
Icon
Updating elements on the scroller
Icon
Collecting the moving elements
Icon
Creating functions for the element types
Icon
Setting the left positions
Icon
Creating the rocket's movement function
Icon
Finally, moving the earth
Icon
Summary
4
4. Single Page Applications
Icon
4. Single Page Applications
Icon
What is an SPA?
Icon
Getting to work
Icon
Getting the old files
Icon
Object and function conventions
Icon
Creating utility functions
Icon
Working with the home structure
Icon
Setting up other sections
Icon
Performing housekeeping
Icon
Creating a callBack function for the API
Icon
Summary
5
5. The Death Star Chapter
Icon
5. The Death Star Chapter
Icon
Where to begin?
Icon
Dropping in the parallax game
Icon
Loading elements from JSON
Icon
What can be done in the shared levels service
Icon
Editing the home JavaScript
Icon
Creating the other pages – credits and leaderboard
Icon
Creating the second level
Icon
Summary
6
Index
Icon
Index

Flat UI color

Flat UI brings about a dramatic change in the way color is used in web design. Since the designs are no longer skeuomorphic, designers are more reliant on color and color contrast to relay information on the screen.

Flat UI tends to use more saturated, bright colors instead of grey, white, or black. You can use many different shades, as long as the tone and depth of the colors match. Often, the more simple color palettes are used, but the primary objective is to use colors that help convey the content as opposed to using color to mimic a 3D everyday object. The key is to go for simplicity.

There are a number of online tools to help you create a flat UI color palette. You can take a look at http://flatuicolors.com for a good sample of color codes. You can also visit http://www.colorhexa.com/ for a good color-matching tool.

Sample color swatches for flat UI

This section has a few sample color swatches for you to view. Each swatch has descriptions and reasons you might want to use...

Visually different images
CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
Web Design Blueprints
End of Section 2
Next Section
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon