Sign In Start Free Trial

Book Overview & Buying
Table Of Contents
Feedback & Rating

Web Design Blueprints

By : LaGrone

5 (1)

Web Design Blueprints

5 (1)

By: LaGrone

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.

Preface

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Free Chapter

1. Responsive Web Design

1. Responsive Web Design

Introduction to responsive web design

Getting familiar with the basics

Using media queries for responsive design

Working with responsive media

Building responsive layouts

Summary

2. Flat UI

2. Flat UI

A brief history of flat design

Flat UI color

Creating a flat UI layout

Summary

3. Parallax Scrolling

3. Parallax Scrolling

Starting off

Color classes

Using SVG font icons

Getting the fonts

That's no moon!

OMG, it's full of stars!

Clouds, birds, and airplanes

The rocket

Terra firma

Next up, the CSS

Styling the objects with CSS

Styling the ground objects

Writing the JavaScript effects

Setting the row height

Spreading the objects

Spreading the clouds

Loading the page functions

Smoothening the scroll

Updating elements on the scroller

Collecting the moving elements

Creating functions for the element types

Setting the left positions

Creating the rocket's movement function

Finally, moving the earth

Summary

4. Single Page Applications

4. Single Page Applications

What is an SPA?

Getting to work

Getting the old files

Object and function conventions

Creating utility functions

Working with the home structure

Setting up other sections

Performing housekeeping

Creating a callBack function for the API

Summary

5. The Death Star Chapter

5. The Death Star Chapter

Where to begin?

Dropping in the parallax game

Loading elements from JSON

What can be done in the shared levels service

Editing the home JavaScript

Creating the other pages – credits and leaderboard

Creating the second level

Summary

Index

Index

Customer Reviews

5 (1)

5 star

100%

4 star

0%

3 star

0%

2 star

0%

1 star

0%

Chapter 2. Flat UI

Flat design is an increasingly popular trend in web design and is currently the dominant design style in mobile interfaces. Based on simplicity, minimalism, and efficiency, flat UI design eliminates much of the third dimension from the design. According to its advocates, it no longer is necessary to mimic the familiar third dimension in UI design, as people have accepted and adopted the mobile device or are practically born with it in their hands and don't need the third dimension anymore. The mobile device is now ubiquitous and can stand on its own.

No discussion of flat design is complete without a reference to what flat design is not. However, let's start our discussion not by defining it by what is not, but by what it is. Flat design is minimal and basic communication of the interactive and content elements of a design, be it native or web. What it does not exhibit is that ugly word, skeuomorphism—using 3D objects to represent elements in...

Visually different images

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Web Design Blueprints

Search

Your notes and bookmarks