One of the new kids on the block is Adobe XD, which offers a streamlined environment for designing for screens, with some great features not found in other products, along with prototyping tools built right into the application. Josef Boutte created this prototype in Adobe XD and then created a video walk through of his prototype in my Design for Mobile class. Students will be doing more and more work like this, and tools for evaluating quality in this genre are still evolving.

It is an exciting time to be in this field!

Although other topics have since pushed microinteractions out of the spotlight, it remains one of my favorite topics and provides a really interesting lens into the creation of experiences for users.

The examples provided here are by Patsy Diaz, who did a particularly good job putting together a portfolio of microinteractions that we explored in class and she adapted to her own unique style.

Microinteraction #1 Sliding Boxes

This is a fairly common interaction seen around the web, where a hover or a tap reveals more information. Patsy did a great job exploring it and creating a functional example.

Microinteraction #2  Turn Box

The early days of the web and really boring contact forms are over. There are much better ways of achieving that interaction today. Patsy provides a great example.

Microinteraction #3 Shrinking Navigation

A useful technique for keeping navigation present but somewhat out of the way as you scroll down the screen. Check out Patsy’s implementation.

Microinteraction #4 Lazy Loading Images

Waiting for images to load is no fun. This is a modern approach to a problem that has existed since the beginning of the web. Load a low resolution blurry image, and as the full size version comes in, replace it. See it in action!

Microinteraction #5 Roll Over

Roll over interactions have been around for along time, but they have needed some serious updating in the age of touch devices where there is no mouse to roll over, and tapping with your finger is not at all the same interaction. It is fun to figure out all the permutations that need to work when you add just one more input device. Try it out in both a browser and on a mobile device.

Also during my time teaching this course, the web has grown up. Screens got big and screens got small. Now screens are every size imaginable and in some ways, the web is pushing beyond the screen altogether. Interfaces and artificial intelligence are all around us now, but learning how to design for the web and for people who are using screens, remains a challenging and exciting. I love it when students do interesting and unique things in this environment.

Juan’s project is a good example of that. He was always thinking outside the box (even though there are a lot of boxes!). I really enjoyed having Juan in class and I am very please that my introduction of him to the awesome people over at Joint Medias has turned into a long term gig for him. I am sure we will be seeing great work from Juan for a long time to come.

Students are tasked with building a website for a restaurant that extends the experience and can be used properly on a mobile device. They have to determine what the restaurant’s market is and design and build a site that would appeal to their audience. The example provided here, by Amanda Burnham, is from a few years ago, but I really like it. Amanda is an amazing designer and web professional, and I very lucky to have had her in my classes. She has since graduated, and you can check out her professional portfolio site.

Navigation and providing pathways to content is a major point of discussion in this course. Even though we all know the web is non-linear, it is very hard to get used to designing for an environment where your audience could enter at any point, have some set of things they want from the website, be able to achieve their goals and have the experience they want.

This particular solution, by Marco Vasquez really captured the spirit of the project, and created a great example of what I want from students, which is the ability to conceptualize a design solution, and then do the necessary production.

Shown here is a screen shot of Marco’s Photoshop file, which is well organized with layers and well defined guides for his grid. You can also view the finished HTML and CSS version of the page.

We met a few times and thought about themes that might tie our work together in some way. The work is very different, which is great because we each stand out in our own way. We chose the title “Under Construction” as something that relates to all our work. As a first show as new members, it is a nod to the fact that all three of us are trying to figure this thing out.

The work I chose to show is related to the random, recursive JavaScript programming I have been working on since 2014. This work is deeply interesting to me from a few different perspectives which include aesthetic, historic and existential points of view.

Aesthetic

Beauty is very important to me. Visual relationships that “feel right”. Compositions that are dynamic. Color is very important to me. I feel like I have been studying color for over 20 years now. I enjoy images that I can keep looking at and continue to reveal themselves over time. The fact that the images this JavaScript program creates are continually changing, is extremely rewarding for me visually. I can watch it for hours.

There are lots of places in the development of the program where I made aesthetic choices about what to include and what not to include. Considering the end resulting visuals are completely computer generated, indirectly, there is a lot of the artist’s hand in the making of the work. And I find that fascinating and fun.

Historic

“At a certain moment the canvas began to appear to one American painter after another as an arena in which to act. What was to go on the canvas was not a picture but an event.”

— Harold Rosenberg

I am very much influenced by the abstract expressionists. The quote from Harold Rosenberg resonates with me, and I think about what the painters from the 1940s 50s and 60s would have done with today’s technology. In some ways this work is very much an homage to them, not only in terms of visual style, and technological innovation, but also in its economics.

I always got a sense of thumbing their noses at the art establishment and the economics of buying and selling art from the abstract expressionists. A sense of “yeah, buy this!” that has carried itself forward to other artists that came after them. In that tradition. How do you buy, sell, or own a computer program that runs on the Internet? This is another aspect of the work that I find fascinating and challenging.

Existential

What is randomness? Can some thing be more or less random? are there degrees of random, or is it a binary proposition – it either is or it isn’t. There is an infinite number of possibilities between 0 and 1, and an infinite number of possibilities between 1 and 10. Is one infinity larger than the other? and if so, how do you measure that or think about that?

You might ask, “who cares?” but that is a question that rattles around in my head when I look at, think about, or work on making these pieces. It is a question that comes to mind when looking at patterns and rhythms in nature, from the shape of a tree to the uniqueness of a fingerprint.

Then I further connect it to questions about freedom, although not in a political sense, or at least not directly political. But it is the same question I have about randomness. Are there degrees of freedom? or is it a binary proposition. You either are or are not free? Freedom is a powerful idea and is one that is bandied about by people for all sorts of purposes, and I like thinking about it from this existential point of view, because it helps provide some perspective on old tired arguments.

My Approach to Showing The Work

The actual JavaScript work can be shown at any size. That is the nature of it. You can view it on your phone, or it could be blown up to the size of a building. For display in a gallery, I needed to get it as large as I can, but did not want to have to resort to projectors and darkness. I installed my 55 inch TV, but would love to display it even larger. The piece is called #18 because it is the eighteenth version of the recursive JavaScript program I wrote.

From there, I decided I wanted to take an approach that is similar to what Christo does with his installation pieces, which are also indefinable, uncontainable and not easily purchased. That is, to have work that documents, extends and, to a certain extent, explains the JavaScript recursive programming work – not in a didactic way, but in a visual artistic way. In a way that can be enjoyed all on its own.

I started with static screen shots of some of the compositions that are randomly generated by the program. I enjoy these compositions immensely, even though my hand is only tangentially in them. So that seemed like a logical place to start. I brought these images into illustrator and then photoshop and continued to manipulate them in small ways. Finally, after consultation with a few other artists, I decided to print them out on aluminum. The aluminum is a material that does a beautiful job of honoring the digital, screen based roots of the work.

Next, I worked on a series of “sketches” that are intended to break apart a few different aspects of the program and focus on them. One focuses on the 5000 most used words in the English language that can be randomly included in the compositions. The second one focuses on the various colors that make up the color schemes used by the program, and the third is an attempt to visually communicate the recursive nature of the program through the use of spirals.

I am thrilled to see all this work up in such a beautiful gallery, and displayed alongside my artistic colleagues, Ben and Nick, whose work is so different, but also very intriguing and visually engaging. I am not exactly sure what comes next in my artistic work, but I plan to keep pushing some of these ideas forward. Feel free to leave comments, or contact me if you have any further thoughts or questions.

Some Useful Links

• Check out wmmead.com for more information on the development of the JavaScript at the foundation of this work
• Check out the Axis Gallery website to find out more about the gallery and its hours
• Check out the Axis Gallery Facebook page to find out about more Axis events and shows
• Check out Aluminyze.com to find out more about printing on Aluminum

It is clear in my discussions with students that they are not entirely clear on a few key concepts, the first is the difference between background images that load through CSS and are “decorative” in nature, and images that are actually part of the content and load through an html tag, such as the good old fashioned img tag.

The second concept that seems to mess people up is the notion of proportion vs cropping. If the image is set to the full width of the browser window and cropping is not the desired effect, than both the width and height of the image need to change when the window size is changed. Allowing the image to be cropped is much less troublesome, but not necessarily the right option for all images.

The exercise files are available for download from my github page. If you are looking to understand the options and benefits of the various options for full width background images, download them and take a look at it. All the information you need is baked right into the files.

The first example is not really a full screen background image, unless your browser happens to be 1200px wide. The second file shows you how to set up a full sized background image that changes proportion when you resize the window. However, the image will be cropped. The trick here is to use width: 100% and background-size: cover.

header { 
   width: 100%; /*changed from a fixed width*/ 
   height: 600px; padding-top: 400px; 
   background: #fff url(images/pie01.jpg); 
   background-size: cover; 
}

The third file shows how to make the image resize both horizontally and vertically to maintain the correct aspect ratio for the image. The key here is to set the height of the element containing the image to zero, but have the padding-top set to a ratio of the height to the width. So if the image is 1200 pixels by 600 pixels, the padding-top would be set to 50%.

header { 
    width: 100%; 
    height: 0; 
    padding-top: 50%; 
    background: #fff url(images/pie01.jpg); 
    background-size: cover; 
    position: relative; 
}

The fourth file demonstrates how to make background images take up the whole browser window, no matter how big the browser window is. This, of course, leads to cropping again. The trick here is to set the height of the element to 100vh and background-size: cover.

header{ 
    width: 100%; 
    height: 100vh; 
    background: url(images/pie01.jpg); 
    background-size: cover; 
    position: relative; 
}

It position: relative is set in these last two examples because any content inside these elements must be absolutely positioned.

Things get really fun in the fifth example file, which shows how to load only the size image you need depending on the size of the screen. The example shows a mobile first approach, where the smallest image is loaded by default, but if the user’s screen is larger, that browser will download a larger image.

In 2015 we ran our first annual WordCamp, which was a huge success, thanks to an amazing group of people who came together to help me pull it off. For the second year, most of the same organizing team came together, this time with Jennifer Bourn of Bourn Creative in the lead role. She and her husband/business partner, Brian worked tirelessly to make the second year even bigger and better than the first year.

Tirzah Johnson, one of our Ai Grads, got the record for largest attendance at a single talk. Standing room only!

WordCamp is an unusual conference, as it brings together designers, content creators, web developers, business people, and marketing specialists from beginners to advanced levels to discuss ways the amazing WordPress platform can be used to further everyone’s goals. I went to the WordCamp conference in San Francisco for years, until it got too big and they decided to take it national. A mind blowing 25% of the web is running on top of WordPress, and as an educator in the design and development fields, it is important to be a part of this community and share.

I decided to take goofy selfies with all my students. Here are a few. Jon Trujillo, Cristina Robinson and Timofey Ritkov all presented amazing talks at WordCamp Sacramento 2016!

Even running a small conference is a ton of work, and it would not happen without a lot of people coming together. Beyond the organizing committee, this event could not have happened without the support of Art Institute of California – Sacramento. If John Andersen, the President of the campus had not been so supportive and donated space at Art Institute for the first WordCamp Sacramento, I don’t think we would have ever even gotten this conference off the ground. For the second year, Art Institute remained an important sponsor, even though the conference out grew the space at that location, Mr. Andersen helped us secure the funds to make the second year a huge success.

Special thanks to Jen Meyer (current Ai student) for participating on the organizing committee and who’s excellent eye for details and organization skills helped keep this conference on the rails. Also for drafting her husband Matt as a videographer on Saturday.

For me personally, it was like a huge reunion event, with a professional spin. So many of my current students and proud Art Institute alumnae, returning to present talks, learn from others and volunteer to help video record the sessions, or help register attendees, or help with the thousand other things that need to get done for a successful conference. There were also plenty of new people to meet and I had great conversations at lunch and at the after party with people who had traveled to Sacramento from all over California to attend our WordCamp. One of our attendees from WordCamp 2015 has since become a fantastic faculty member at Art Institute, and it was great to see her back at WordCamp this year as well. Sure, we had our share of minor snafus, in this case, mostly to do with the new venue, but the overall vibe was so positive and affirming.

David McCormick, also a previous Art Institute student, and now a professional at Blast Media in Roseville, gave a great presentation on search engine optimization.

Now we get to look forward to next year, and I am so excited to see WordCamp in the mix of the boom in growth that Sacramento seems to be enjoying finally, now that the great recession is behind us. Meanwhile, if you want to get involved in the Sacramento WordPress community, there is lots of opportunity to do so. Jennifer and Brian Bourn also run the monthly Sacramento WordPress Meetup group, which meets on the first Tuesday of every month at Urban Hive in midtown Sacramento.

More goofy photos! Tirzah Johnson, Ben Cuslidge, Rosalinda Huck, John Cremer, Dawn Pedersen (former Ai Faculty who also presented!) and current Ai Faculty Kevin Trivedi.

Three years ago it was still important to include an HTML5 shiv in your projects. Today, those old browsers that need it are gone. Another technology that has slipped into disuse, for the moment anyway, is sprites and sprite sheets. I expect we may see this technique reemerge in the future in some new way, for now, it is all about icon fonts (even though there is some reasonable amount of backlash against those too). Scalable vector graphics are all the rage, as one can not be sure of the resolution of the target screen, it is hard to make sure your graphical elements will look crisp and clean, unless they are scalable. SVG and many of the newer CSS3 techniques are widely supported by browsers now and there is so much you can do reliably on the web that you could not do even three years ago.

Aesthetically, the web has gone flatter in three years. Flat design has taken over, and although some of the tenants of flat design have been attenuated a bit in the past year or so, there are far less textures, gradients and drop shadows found in modern web design today. I think some of this stuff is cyclical in a way, but some approaches, like skeuomorphic design (trying to make stuff look like real world objects), seems permanently dead.  I could be wrong, perhaps it will come back in a new way, but it seems like the medium of the screen has finally come into its own.

My own design aesthetic has evolved and matured in the past three years as well. As I see new work from bright young designers, it affects my own approaches and thoughts about design. There is always room to strive for better design!

The designs I have created to help students learn about web design are simple, and intentionally require few techniques. The coffee shop design requires absolutely no use of IDs or classes at all. It is amazing what you can accomplish with only tag selectors today. In fact, I have been amazed myself, as I find new ways of teaching students how to use CSS how infrequently I need either ID’s or classes.

I am excited to include these new designs in my growing catalog of work, which is so different from other designers work because it’s target audience is students learning to design and code. I hope these pieces inspire students to make more sophisticated design decisions in their own work.This design for a fake Sacramento Writer’s group is deceptively simple and the lesson allows a way in to some interesting and important issues in web design and development.