Interactive Writing & Design

More Story Examples Ideas

A great newspaper story that uses parallax effectively:

http://www.nzherald.co.nz/indepth/national/black-gold/

Another good example of using scrolling to tell a story:

https://arrivabusandcoach.co.uk/buses-the-weird-and-wonderful

A previous students’ video project from the ‘storytelling’ class – may giveyou some ideas:

Not a *story*, per se, but an example of animating on scroll:

http://student.elon.edu/ddimos/Parallax/

Posted in Uncategorized | Leave a comment

Story Examples from Class

http://www.nytimes.com/projects/2012/snow-fall/

http://www.visioncritical.com/evolution-of-insight/

http://www.imove.com/american-homes-through-the-decades

http://inequality.is/

http://www.r2d3.us/visual-intro-to-machine-learning-part-1/

http://www.nytimes.com/projects/2013/high-rise/

Posted in Uncategorized | Leave a comment

Storytelling Rubric

We’ve learned about many tools to tell stories:

  • @keyframes CSS animation
  • SVG and animation
  • The <audio> tag
  • Parallax
  • Controlling on-traditional layouts with buttons / fixed navigation
  • YouTube and the <video> tag

I’d like you to now use these tools (and maybe others) to tell a story on a one-page website. It can scroll vertically or horizontally (or both), and it’ll probably be pretty ‘tall.’

I’m defining ‘story’ as anything that has a beginning, middle and end. The more broad your topic, the more it’ll be interesting to others. In other words, don’t tell a story about that time you ate too many enchiladas, unless you think it’s the best story out there.

The telling of your story should impel the user to continue to read it. Your colors, fonts, animations, data and A/V should support the story visually.

Some things to make sure that you do:

  • Give your page a title.
  • Pick a font and color scheme that supports the theme of your story.
  • Consider using Font Awesome, Google Icons, or other plugins to improve the quality of your buttons.
  • Consider using a fixed navigation, or no navigation at all.
  • Be sure to test your project to ensure it all ‘works’ at more than one resolution. It does not have to be responsive, but if your animations are triggered by scroll position, you’ll need a fixed-width wrapper to ensure that they show up at the right time.
  • Video can be used, but your storytelling cannot rely on video playback. We are not making a site that holds videos and audio files; we are making a site that tells a story, and those are some of our available tools.
  • Avoid bitmap/JPG imagery. Use and animate SVG instead.
  • Avoid trying to do character animation – it is not what we’re doing. So no ‘walking’ people or animating the act of ‘smiling.’ Try to find another way to illustrate your point.

This project will be due Friday, November 17.

Posted in Uncategorized | Leave a comment

Optimizing SVG

The SVG code we get from Illustrator can be a little messy. Here are two sites that can help clean it up:

https://jakearchibald.github.io/svgomg/

http://petercollingridge.appspot.com/svg-optimiser

Posted in Uncategorized | Comments Off on Optimizing SVG

Exporting & Animating SVG

Here’s a great video explaining the best setting for exporting an SVG from Illustrator:

…and here’s a great example of making a text animation, from Illustrator to HTML/CSS:

Keep in mind that his workflow is slightly different from ours – I think because of differences in the versions of Illustrator.

Posted in Uncategorized | Comments Off on Exporting & Animating SVG

@keyframes CSS Animation & SVG

Here’s the basics of CSS Animation:

animation

…and here’s a solid tutorial on the basics:

https://webdesign.tutsplus.com/tutorials/a-beginners-introduction-to-css-animation–cms-21068

Remember there’s also loads of stuff on the IM server and my CodePen.

There’s also a CSS Animation class on Lynda, taught by Val Head, and an SVG Advanced Animation class taught by Sarah Drasner. Both are excellent.

Posted in Uncategorized | Comments Off on @keyframes CSS Animation & SVG

Bootstrap Cheat Sheet

Thanks to Mara for finding this!

https://hackerthemes.com/bootstrap-cheatsheet/

Posted in Uncategorized | Comments Off on Bootstrap Cheat Sheet

Frameworks Rubric

Our assignment is to re-design the home page of a local non-profit. Please note that we are not imitating or re-creating the existing Website layout, but instead using frameworks and mockups to make a new layout.

You will re-make the (same) site using three frameworks: Skeleton, Ratchet, and Bootstrap. I have made ‘boilerplates’ for each framework and put them on the sever – please use them. Each framework has its own rubric requirements, but all frameworks need to employ:

  • A nav bar
  • A footer
  • Images, either in carousels or as part of the layout
  • Buttons
  • Social Media links

First, choose among a handful of local non-profit Websites:

Piedmont Rescue Mission

Burlington Housing Authority

Habitat for Humanity: Alamance County

Kopper Top Life Learning Center

The Biscuit Foundation

If you would like your project to be for a different non-profit, that’s fine – but you have to get prior approval.

Next, make mockups of how you plan to re-design the site. Be sure to mock up both desktop and mobile versions. I encourage you to make separate mockups for each framework, as each has its own components and layout abilities. But you do not have to hand in your mockups, so do whatever seems right. But please note that using a responsive, grid-based framework is a lot easier with a mockup.

Then lay out your site using Skeleton’s row/column system. Skeleton is a responsive framework, so be careful not to write a bunch of CSS that affects your layout (like lots of margin or padding), as you may ‘break’ the responsiveness of the site (but you could always write your own media queries!). Remember that Skeleton is mobile-first, so it’s own media queries go in the opposite direction as the ones we did for our resume.

Skeleton is very, very basic. Your site will be very basic. Don’t overdo it. Remember that this is a layout assignment, so don’t get distracted by fonts and colors.

Add the site content in, test responsiveness, clean up / adjust whatever you need, the end. Make links link to ‘#.’

Next, walk through the same process with Ratchet. Ratchet does not allow you to control ‘layout’ so much, as you should not have any side-by-side content on mobile. But it’s full of components. I want you to use as many components as necessary in Ratchet to make the site as interactive and impressive as possible.

Finally, lay out the site using Bootstrap. Remember that Bootstrap uses the same base-12 responsive grid as Skeleton, so you can essentially establish the same layout as you did with Skeleton. But also remember that Bootstrap has tons of utility classes – Skeleton has three – that allow you to control layout much more specifically, as well as adjust layout based on screen size. Please make the Bootstrap version of your site much more visually interesting and creatively laid out than your Skeleton version.

Bootstrap should pose the most significant challenge in this assignment. As a reminder, Lynda has a whole class on Bootstrap 4 – even with my complaints about it, it’s well worth your time. Also, I’ve made a completed version of a Bootstrap re-design of a site on the server. It’s called ‘mdc,’ and you can compare it to the original at: http://mdcinc.org/

 

Posted in Uncategorized | Comments Off on Frameworks Rubric

Ratchet, JavaScript and Skeleton Links

I’ve made some basic Pens of both Ratchet and Skeleton, which you can reference if you’re having any issues (the documentation on both frameworks is pretty limited).

Ratchet: https://codepen.io/bwalsh5/pen/mBmGJw/

Skeleton: https://codepen.io/bwalsh5/pen/KXMEBd

We also discussed loading JavaScript files using async, which solves one of the most common JS errors ever. Here’s more on what async means:

Thinking Async

 

Posted in Uncategorized | Comments Off on Ratchet, JavaScript and Skeleton Links

Skeleton Links

Get Skeleton:

http://getskeleton.com/

Some tutorials, not vetted:

Getting Started with Skeleton, the Simple CSS Boilerplate

 

https://webdesign.tutsplus.com/series/build-a-responsive-layout-with-skeleton–webdesign-15624

https://webdesign.tutsplus.com/tutorials/building-html-page-structure-with-skeleton–cms-23253

Posted in Uncategorized | Comments Off on Skeleton Links