design Archives - Web Teacher

Review: Writing Interactive Fiction with Twine

product

Writing Interactive Fiction with Twine by Melissa Ford is from Que Publishing (2016). This book is part software manual, part writing workshop.

The software described in the book, Twine, is free to download. There are sites mentioned in the book where you can publish your completed interactive fiction. If you have your own web site, Twine stories can be published there.

If you loved the choose your own adventure books from a few years ago, this is the modern version of that type of storytelling.

Twine can be used to create more than stories. It can create games, puzzles, and role-playing games. It’s meant for game designers and game players who have lots of ideas of their own for exciting games. (I think it would also be a great way for people who love to write fan fiction to work their way into a more high tech approach to storytelling.)

In terms of writing advice, the book talks about story structure, character building, creating settings, balancing pacing and action, keeping players engaged, and the all important storytelling rule to “show, don’t tell.”

The approach to the software used in the book is step by step. You should read the book with Twine open on your computer so you can try out all the ideas and suggestions and learn how to write in the Twine languages.

The book instructs in the use of macros in a choice of Twine languages. It also explains how to create variables, conditional statements, and arrays. With the help of macros for history, either, random, click, mouseover, prompt, count, append, prepend, replace, remove and more, a user can create a complex and exciting interactive world. There are built-in Twine functions to control turns, display, actions and more.

A Twine writer can use HTML and some CSS to change fonts, backgrounds, sidebars, links and more. You can import Google fonts with the stylesheet. Twine lets you add images to your story.

If you are interested in creating interactive fiction or games that you can easily share with others, you should take a look at Twine as your software tool. This book will make you an expert user with an easy to follow, step-by-step approach.

Summary: Melissa Ford shows you how to create a game or puzzle using Twine software, and helps you be a better writer in the process.

A review by Virginia DeBolt of Writing Interactive Fiction with Twine (rating: 5 stars)

Disclosure: I received a free copy of this book from the publisher for this review. Opinions are my own. Links to Amazon are affiliate links. Here is my review policy.

5 Cool New Color Scheme Tools

How do you pick a color scheme for your design projects? Do you browse various color palettes? Perhaps you employ tried-and-true color wheels. Both are good ways to develop color schemes, but if you want to discover fresh new schemes you might want to give the following five new and cool color scheme tools a try.

1. Interaction of Color

You might be familiar with Josef Alber’s “Interaction of Color,” a must-read for all graphic designers published by Yale University Press. Now, meet the iPad app, which features Alber’s teachings alongside interactive plates and videos. The app lets you learn more about color theory and helps you pick the perfect color scheme with its palette tool, which behaves “like paper.”

2. Flat UI Colors

If you’re into flat design – the modern web and mobile design trend – then you’ll love this free flat UI color tool, which lets you easily copy numerical RGB and hex values for the most popular colors used in the Flat UI Pro palette. The only way this application could be better is if it included suggestions for complementary colors based on the colors you’ve added to your palette.

3. ColoRotate

A new kind of color scheme development tool that lets you build palettes in 3-D, ColorRotate is available on the web or as an interactive iPad app. Click and drag your way to a new custom color scheme, then tweak adjustments on the sliding scale. Or, browse some of the other color scheme creations crafted by users who came before you.

4. Colorzilla

The ultimate color tool for Chrome, even if it’s still in beta. Colorzilla lets you get the color of any pixel on any page, generate CSS and CSS gradients, analyze any URL to generate a color palette, and, of course, pick colors to add to a saved palette. If you use Google Chrome, add the Colorzilla extension to your browser (it’s free) and start picking colors today.

5. ColorBug

A light yet incredibly useful color scheme application for Windows, ColorBug is essentially a color picker tool that lets you drag and drop colors to multiple palettes, then make adjustments to those palettes right in the application. You can select different color code formats, create instant CSS gradients, and even generate color swatches for popular design applications such as Adobe Swatch Exchange (.ase).

Have you tried any of these color scheme tools? Which is your favorite, and how did it stack up to your usual method of color palette selection? Let us know in the comments!

[Ed.: This is an updated version of a post that was published earlier on Web Teacher.]

Guest Author’s Bio: Brian Morris writes for the PsPrint Design & Printing Blog. PsPrint is an online commercial printing company. Follow PsPrint on Twitter @PsPrint and Facebook.

Broadband Use Drops Slightly; Smart Phone Use Climbs

The Pew Research Center released a new survey on home broadband use in 2015 that has implications for web designers. The overall finding is that fewer people have home broadband, while more people rely on their smart phones for Internet access.

The changes are slight, but possibly significant. Home broadband adoption has plateaued. It now stands at 67% of Americans, down slightly from 70% in 2013.

Pew Internet Survey results for movement from broadband toward smartphones. African Americans, those with relatively low household incomes and those living in rural areas show the most change.

The cost of broadband is a major problem cited by many of those surveyed.

The monthly cost of broadband is prohibitive to many — The monthly cost of broadband is prohibitive to 43% of those who do not have it

24% of Americans do not have cable or satellite. 15% are former subscribers who ‘cut the cord.’ Young adults, in particular, expect to be able to use their smartphones to access almost anything they want, apply for jobs, follow the news, access government services and more.

The implications for web designers

websites should work well on mobile devices
websites should download quickly with a minimal hit on a users data plan

Flash is Dead. Long Live Animate

Flash has had a few hard years. HTML5 whupped its ass. So it’s going away.

Sort of.

In its place, Adobe will give us Animate CC, which loses the loser of a name but retains much of the function. There will be added functions, as well. Here’s Adobe’s announcement of the change.

To summarize the changes, here’s how Adobe describes what the new software will do:

Drawing, illustration and authoring

Vector art brushes – Modify the path of a stroke after it’s been drawn, and scale them to any resolution without losing quality. You can also make custom brushes and import brushes created with Adobe Capture CC.

360° rotatable canvas – Rotate the canvas on any pivot point as you draw to get the perfect angle and strokes. You can even use this feature with a Wacom Cintiq!

Improved pencils and brushes – Draw smooth, precise vector outlines along a curve and get faster live previews.

Easier audio syncing – Control audio looping directly on the timeline, without having to code.

Faster color changing – Naming tagged colors lets you change one color and have it automatically update your entire project.

Colored onion skinning – Easily orchestrate complex animations now that adjacent frames can have different color and alpha values.

CreativeSync integration

Adobe Stock – Browse and license millions of high-quality photos, illustrations and vector graphics directly in Animate CC. You can even add life to static content by adding animations to them.

Creative Cloud Libraries – Access colors, vector graphics and brushes directly as you work.

Output capabilities

Multiplatform support: HTML5 Canvas, WebGL, Flash (SWF), AIR, video, and custom platforms (such as SVG) via extensions.

4K+ video export – Export videos with custom resolutions for the latest Ultra HD and Hi-DPI displays.

Custom resolution export – Revitalize older content by resizing and optimizing them for any resolution, such as Ultra HD and Hi-DPI displays.

.OAM support – Export your project as an .OAM file for easy importing to Adobe Muse, InDesign, DPS and Dreamweaver.

The new Adobe Animate CC will be released in January 2016.

O’Reilly EBook: Design for Voice Interfaces

O’Reilly Media is offering an ebook called Design for Voice Interfaces: Building Products that Talk by Laura Klein. It’s only 30 pages long and worth reading. It gives a brief background, talks about current issues in designing VUI and concludes with a few helpful resources to get you started learning more about it.

You definitely can’t beat the price for this informative book. It’s free.

Suggestions from a Web Educator for the Dreamweaver Folks at Adobe

I’ve been teaching Dreamweaver again. Yeah, I do it all the time, I know. I have some ideas about what Dreamweaver needs to do to make life easier for newbies who haven’t been using the product forever like I have.

The New Document Options

These suggestions deal with the options for people who are opening a new file and starting to work on a new site.

Get rid of the fixed width layouts.
Provide a 1, 2 and 3 column responsive layout
The Fluid Grid layouts are very complex. Find a way to make them more user friendly. In fact, if there were enough useful responsive layouts provided in the layouts category, fluid grids could go away, period.

The CSS Designer

Regarding the CSS Designer interface, when media queries are present, even if all the CSS rules are in a single stylesheet, the CSS Designer lists them as separate stylesheets. It would be clearer if the terminology was different. Perhaps something like “save the styles in” or “locate the style in” to indicate where to place them in the single stylesheet.

In the panel where the selectors are listed, it would be very helpful if some sort of divider or identifier could be included to indicate which selectors went with which part of a stylesheet. When there are media queries, there are several selectors by the same name. Yes, I know that the selectors at the end of the stylesheet would be the ones used in the @media rules, but that isn’t obvious to someone rather new at CSS.

Why Adobe Should Care About This

I see people who are new to Dreamweaver in my classes. If Adobe wants them to convert to subscribers and users, they need to pay attention to the learning curve on the product. I can’t tell you statistics on how many of the people who come to learn Dreamweaver go away thinking maybe they’ll use WordPress instead, but it’s a good percent. Putting aside my female tendency to be modest – I’m a good teacher. I’m doing everything humanly possible to make successful Dreamweaver users out of my students. Some attention from the Adobe Dreamweaver team should go into the same consideration.

Review: Badass: Making Users Awesome

product

Badass: Making Users Awesome by Kathy Sierra is from O’Reilly (2015). This book is about motivation and skills and progress and brain science. It shows you how to use motivation and skill levels and learning progress by being badass, by modeling badass, and by giving you the badass version of learning how to be badass.

If you know who Kathy Sierra is and what she’s already done as a writer and programmer, you’ll recognize what she’s talking about in this book. It’s been her topic before and she’s come back to it with a powerful teaching device – this book. Kathy’s premise is you don’t just want a great product, you want great users. You want users who find it easy to learn to be experts with your product. Even when your product is complicated and hard to learn to use at an expert level, if you approach helping users the right way, they will reach the badass level as users.

The book if full of lively graphics, funny illustrations, and simple but powerful charts.

This chart shows exactly how I feel about every new upgrade of Dreamweaver CC. Each time I open it, I go back into the suck zone on something. Getting the labels on form fields – oh, no, I suck. Creating a new selector in the style sheet – oh, no, I suck. Using the fucking fluid layout grid – oh, no, I suck. Kathy explains how to help users avoid that oh, no, I suck sensation with upgrades and with new skills mastery in general. The people at Adobe are definitely not using all of Kathy’s suggestions to help users move to badass with updates to their products.

Even something as basic as practicing a skill to get better at it has brain science examples to help you design experiences for users that let them practice the right way. There are also chapters on how to help users filter out brain spam so they can concentrate on things that matter. Here’s the table of contents:

Just looking at the table of contents tells you a lot about how this book works, and how Kathy Sierra uses her deep understanding of brain science and user experience to craft an experience for you that will leave you feeling badass.

If you want to learn how to create and market a product that your users will love using and will recommend to others, read this book. After you’ve read it, go back and look at how it was written. What were you asked to do as you read? How were you helped to understand the points made? How were you helped and supported as a reader to become an expert in making users awesome? What patterns and perceptions sneaked into your brain without you knowing how it happened?

Kathy Sierra has always been about creating awesome users, and this book can help you be about that, too.

Welcome back to the conversation, Kathy. You were missed.

A review by Virginia DeBolt of Badass: Making Users Awesome (rating: 5 stars)

Summary: Kathy Sierra shows you how to make your users keep coming back by helping them be badass at using your product.

Disclosure: I received a free copy of this book from the publisher for this review. Opinions are my own. Links to Amazon are affiliate links. Here is my review policy. .