| |
| |
| Foreword | |
| |
| |
| |
| |
| In Splendid Variety These Changes Come | |
| |
| |
| The birth of static hi-fi mockups | |
| |
| |
| The static mockup comfort zone | |
| |
| |
| The specialist invasion | |
| |
| |
| We're all interaction designers | |
| |
| |
| Jump from the waterfall | |
| |
| |
| The straw that broke… | |
| |
| |
| The elephant in the room | |
| |
| |
| This is not gospel | |
| |
| |
| This is a challenge | |
| |
| |
| |
| From the Content Out | |
| |
| |
| Microstructure vs. modular structure | |
| |
| |
| The lazy person's content inventory | |
| |
| |
| Our universal example: This book's website | |
| |
| |
| Progressive enhancement as design principle: The zero interface | |
| |
| |
| Creating the example content inventory | |
| |
| |
| Try it out | |
| |
| |
| |
| Content Reference Wireframes | |
| |
| |
| Stop making this stuff so complicated | |
| |
| |
| Baby steps: Creating low-fi web-based wireframes | |
| |
| |
| Setting up your base markup | |
| |
| |
| Setting up your base styles | |
| |
| |
| Adjusting the wireframe to be "mobile first" | |
| |
| |
| Adding navigation | |
| |
| |
| Creating variants for larger screen sizes | |
| |
| |
| Let's bust some myths | |
| |
| |
| Interaction designers should make wireframes | |
| |
| |
| Wireframes should be detailed | |
| |
| |
| Do content reference wireframes limit design choices? | |
| |
| |
| Isn't it too early to think about layout? | |
| |
| |
| What should I wireframe? | |
| |
| |
| When do I involve the client (a.k.a. "Where's my fancy deliverable?") | |
| |
| |
| Try it out | |
| |
| |
| |
| Designing in Text | |
| |
| |
| It's all content | |
| |
| |
| Starting design with plain text | |
| |
| |
| Marking up plain text | |
| |
| |
| The book page text in Markdown | |
| |
| |
| What changes mean at this point | |
| |
| |
| It's about thinking | |
| |
| |
| Converting plain text to HTML | |
| |
| |
| Using the command line | |
| |
| |
| Converting to HTML | |
| |
| |
| |
| Linear Design | |
| |
| |
| Developing a design language | |
| |
| |
| Using the Design Funnel | |
| |
| |
| Serve your design to actual devices | |
| |
| |
| Enhancing your structured content | |
| |
| |
| Introducing templates | |
| |
| |
| Your project folder so far | |
| |
| |
| Think and sketch | |
| |
| |
| Playing with type and color | |
| |
| |
| Don't do too much just yet | |
| |
| |
| |
| Breakpoint Graphs | |
| |
| |
| Documentation for breakpoints | |
| |
| |
| Anatomy of a breakpoint | |
| |
| |
| Visualizing breakpoints | |
| |
| |
| Breakpoint graph components | |
| |
| |
| Creating a simple breakpoint graph | |
| |
| |
| Major and minor breakpoints | |
| |
| |
| Adding more complexity | |
| |
| |
| A more complex example: A podcast player | |
| |
| |
| What we've covered | |
| |
| |
| |
| Designing for Breakpoints | |
| |
| |
| First, a bit about sketching | |
| |
| |
| How to sketch | |
| |
| |
| Sketching on devices | |
| |
| |
| Sketching as a habit | |
| |
| |
| Only sweat the major breakpoints (for now) | |
| |
| |
| Think about your content while sketching | |
| |
| |
| Text | |
| |
| |
| Navigation | |
| |
| |
| Tables | |
| |
| |
| What to do if you get stuck | |
| |
| |
| |
| Creating a Web-Based Design Mockup | |
| |
| |
| Hurdles to acceptance | |
| |
| |
| Clients (generally) don't care | |
| |
| |
| Other people | |
| |
| |
| You | |
| |
| |
| Presenting your mockups | |
| |
| |
| Let's get to work | |
| |
| |
| Evolving your responsive wireframe | |
| |
| |
| From static page to static site generator | |
| |
| |
| Templating | |
| |
| |
| Choosing an SSG | |
| |
| |
| Introducing Dexy | |
| |
| |
| Installing Dexy | |
| |
| |
| Get your assets in here! | |
| |
| |
| Including style sheets | |
| |
| |
| Adding content | |
| |
| |
| Sectioning content | |
| |
| |
| Dexy's command center: The dexy-yaml file | |
| |
| |
| Finishing your design mockup with CSS | |
| |
| |
| Multiple pages | |
| |
| |
| What we've covered | |
| |
| |
| |
| Presentation, Round One: Screenshots | |
| |
| |
| Why not present in the browser right away? | |
| |
| |
| The presentation/realism balance | |
| |
| |
| Screenshots: Going from web-based (back) to images | |
| |
| |
| How to make screenshots | |
| |
| |
| Manual screenshots | |
| |
| |
| Automated screenshots | |
| |
| |
| Presenting screenshots | |
| |
| |
| |
| Presentation, Round Two: In the Browser | |
| |
| |
| You'll find many bugs in your design | |
| |
| |
| Collaboration and communication | |
| |
| |
| How to present your interactive mockups | |
| |
| |
| Use devices to impress | |
| |
| |
| Explaining your design | |
| |
| |
| Testing and client review | |
| |
| |
| Client review | |
| |
| |
| Take good notes | |
| |
| |
| Using your notes and making revisions | |
| |
| |
| |
| Creating Design Guidelines | |
| |
| |
| Design manuals and the web | |
| |
| |
| The content and structure of design guidelines | |
| |
| |
| Websites are different | |
| |
| |
| My wish list for design guideline software | |
| |
| |
| Creating your design documentation | |
| |
| |
| Writing the documentation | |
| |
| |
| Inserting example material | |
| |
| |
| Creating screenshots | |
| |
| |
| Making the Dexy configuration file | |
| |
| |
| Testing your Dexy project | |
| |
| |
| Taking screenshots of specific elements | |
| |
| |
| Including rendered HTML | |
| |
| |
| Including syntax-highlighted code | |
| |
| |
| Making the documentation your own | |
| |
| |
| Now it's time to go | |
| |
| |
| Index | |