Comics Archive
This blog describes how we created and implemented a more interactive visual style featuring fun, engaging form factors to describe technology topics. Also, on this page, we'll provide comics for you to download and share. In our upcoming posts, we'll show some Silverlight applications we developed that feature the comics and our interactive artistic style. Please let us know what you think; we will use your comments and opinions to shape our next steps. Thanks for reading!
If you read our previous posting, you know all about Guided Tours, if not, take a quick read.
Today we have a demo of Guided Tours, up and running. We put this together about a year ago, but still felt it was worth sharing. Thank you to the team at Allovus for making this work possible and helping out with the walkthrough. Feel free to play around with it and send us feedback. Or, before taking a test run, you can read further along in the blog where we discuss the Guided Tour functionality. When you do go to the demo page, you'll see a disclaimer (in red text). For the demo we used Windows Azure content, however, for the most up-date-information on Windows Azure, you'll want to visit the Windows Azure Developer Center on MSDN.
The rest of this post is intended to explain the Guided Tour UI. First, a screen shot of the home page, a landing page which introduces the topic being discussed:
It includes what you'd expect to see on a landing page:
Below is the center image which functions as a hub and the focus area of the page. You can click on the illustrations to reveal more information about a particular component. The illustrations are animated to give the users visual cues when they navigate the illustration.Essentially, it is a clickable image of the components featured in the technology, scenario, or workload:
When running the demo you'll notice that:
For the READ experience, the central image resolves into a text box and a back button returns the user to the image:
For the EXPLORE experience the image transitions to an animated flow chart. The user can pause and restart that animation using the player controls. Also, an element can be clicked which will trigger content in the right-hand reading pane and pause the animation:
You can filter the center image on Innovation, Security, Performance, Cost Effectiveness, and Cloud. This feature is intended to filter the content based on user preference. For example, if users are primarily interested in the Security aspect regarding a particular technology, scenario, or workload, they select the Security perspective, as shown below:
After selection, several of the elements fade out. However, those that have security specific content remain in focus with a security overlay illustration. Then, the use can click those elements for security specific content.
Some of our previous posts discussed technical comics. As part of the Guided Tour functionality we've added a link to a comics associated with the solution. By clicking on the comic image (show below), the Silverlight comic viewer opens with a comic that is associated with the topic being discussed. We decided to have it open in the same window. So, to get back to the landing page, you press the back button within the viewer window.
Finally, we recongnized that we'd need a way to display larger sections of text, or the ability to link to existing content on MSDN and TechNet. Instead of links we have reusable tiles, which can be customized. When a user selects a tile, the other tiles fade out and the selected tile moves to the upper right-hand corner. Then, content will populate the reading pane. A back buton returns the user to the clickable tiles, as shown below:
So, that's the Guided-Tours prototype. Again if you have any ideas on how to improve them and/or potential applications you see for this type of experience that you’d like to share let us know. Do you think this type of application is a feasible enhancement to the way we currently present content on TechNet, for example?
Finally, for those of you who know Chinese, you can take a look here at a "mostly" localized version.
Thanks for reading our past posts about the technology comics and commenting on them. Again, if you have not downloaded copies please do and share them with your colleagues and let us know your thoughts. You can visit the following pages to take a look:
In this post, we’d like to discuss another project that we worked on somewhat related to the comics in terms of visual learning. We call them Guided Tours. Of course, we have to preface this with a disclaimer that this is a prototype, not supported, may not have further development, etc. Nonetheless, we think that Guided Tours are cool and encourage you to read through this article to get a better understanding of what they are. Basically, we wanted to put together this prototype to demonstrate an alternate learning style - more interactive and visually-oriented, something different than a typical overview article. You'll notice a more illustrative style paired with animation, as opposed to static icons. Our goals with this project were to:
And then secondarily, to:
After interacting with a Guided Tour application, the user should be able to fully assess a technology, scenario, or workload. We think the application could have several uses. Below is a wire-frame of the application:
As you can see, the experience breaks down into a few key areas:
We also provide alternate views within the Guided Tour application, such as a flowchart view and a reading view (information pane), which you can see illustrated below:
Another important aspect of this project was the visual style. We wanted to create something very different than what you see today in our technical documentation. Some users will like it and some users may find it too whimsical for technical documentation. Below you'll see some examples illustrations so that you can decided for yourself:
The upper row represents the following: Branch Office, User, Community, Configuration, BI, Application, File Share, and Financial Industry. We are curious what you think about this more casual, engaging visual style. Is it something that would make you more likely to read through technical content? Less likely?
Below are high-fidelity screen shots of the Guided Tours complete with the new visual style, which you can also compare to the above wire-frames. First, the home page:
In a week or so, we'll have a live Guided Tour up-and-running for you to test out. In that post, we'll give you a detailed tour of the UI. But, to finish up this post, we have a few more high-fidelity screens, including the flowchart view below:
And then the information pane view:
Check back in the next week or so and we’ll have our Guided Tour *Prototype* up and running for you to try out!
Download the "Climbing Mt. PowerShell" Comic Book!
Today we're posting the full "Climbing Mt. PowerShell" technology comic book for download. We also have the final 8 pages.
We really think this is the most fun and useful comic with Zach, Leah and Squishy. We're proud to be releasing it to the public. Scroll on down for the download, or keep reading pages individually by clicking on the thumbnails.
Remember: If you need to repeat it, you need to script it with Windows PowerShell.
Enjoy!
Download Climbing Mt. PowerShell (2.2 MB)
Feel free to send feedback or comment below. Don't forget to visit the Script Center!
Last week we posted the first 11 pages of Climbing Mt. PowerShell. Today the adventure continues with 11 new pages.
These pages have some great information on PowerShell scripting features. You can read about arguments, input, comparison operators, conditional statements, loops, and working with files and folders. We've also got an example called "Reading a Text File into an Array," where we show how Get-Content can be used to read a text file into an array. This makes it easy to provide a list of items for the script to operate on. Towards the end of today's content, we get into working with network tasks. We also have two full comic panels!
Stay tuned. We'll be back very soon with the last few pages - and the full PDF download. In the meantime you can check out the Script Center for tons of great info on PowerShell.
Many thanks to those who have provided feedback. If you have feedback for us, please leave comments or drop us a line.
Today, we start bringing you our best technology comic book yet: Climbing Mt. PowerShell!
In this comic, Zach and Leah face a "mountain" of work at the data center. Our mascot, "Squishy" the stress ball, helps them manage it using PowerShell and the power of scripting. These first 11 pages will show you: the get-help command, important PowerShell concepts, and pipelines. You'll also see great cover art - and start a new adventure with Zach, Leah, and Squishy!
Remember: If you need to repeat it, you need to script it with Windows PowerShell. Check out the Script Center for more info!
Stay tuned! We'll be back next Wednesday with the next few pages.
And if you like these comics, please tell us!
Today we're posting the complete Conquering Virtual Sprawl comic book for download. We're also putting up the eight remaining pages, so you can finish reading the story that way, too.
This is it! Find out how Zach and Leah defeat the Virtual Sprawl Monster.
Click here to download Conquering Virtual Sprawl.
Thank you for reading our earlier posts about Conquering Virtual Sprawl: our development process, the first 8 pages, and 8 more pages. If you like the comics and you want to see more visual content like this, please let us know. Please leave a comment or drop us a line.
Technology update: Since we created this comic, System Center Virtual Machine Manager 2012 Beta has been made available. It can be downloaded for native 64-bit, and also in a Hyper-V Virtual Hard Drive (VHD).
Two weeks ago, we posted the first few pages of "Conquering Virtual Sprawl." Today we're posting the next eight pages. Continue reading Zach and Leah's adventures battling the Virtual Sprawl Monster.
Come back soon! We'll finish up the comic, and give you the PDF!
Thanks for stopping by again. A while ago we asked our artist for these comics to share his artistic process in a short post.
Here it is.
By Robert Massa - www.robertmassa.com
The script called for three main characters, a female and male adolescent and also a “magical” character of some sort. The magical character needed to be part of the everyday Data center so I suggested a “stress” ball that could come to life in a crisis. Since the style direction was Manga, I researched the characters by looking at Japanese anime. Below are studies of the characters’ development.
Squishy was an inanimate object coming to life and didn’t require much revision. Below shows how Squishy wakes up after being squeezed.
While I totally enjoyed the entire process here are a few of my most favorite scenes.
From Conquering Virtual Sprawl:
From Climbing Mt. PowerShell:
Please tune in early next week for more panels of Conquering Virtual Sprawl!
Previously, we shared the work we did on the Cloud comic. You can look at the post here. This week, we are featuring the first comic we created: "Conquering Virtual Sprawl." In this episode, our protagonists have a big issue in their datacenter: virtual sprawl. They can’t keep track of their computers and they have no way to manage them. In order to defeat virtual sprawl, careful up-front planning is required. This comic was especially fun to write because we have an antagonist: The Virtual Sprawl Monster!
In this comic, Leah and Zach learn how to:
We passed this one out at TechEd 2010 in New Orleans. But, for those of you did not get a copy, we’ll post the full PDF in an upcoming post. Enjoy the first set of panels below!
… Stay tuned for the rest of our first comic and let us know what you think!
Developing the comic is an intricate process. There are challenges presented by the print media format. The pages have a size limitation, and the comic is just a small booklet so it’s best to have only a few different panels on each page. The fewer divisions there are in the page, the larger each panel can be, making more room for art and dialog. The page count will also be constrained by time and budget. The complexity of the story has to be balanced with these restrictions. You’ve really got to pay attention to what you want to say and keep it simple.
Our process starts with a whiteboard. We have some idea of what we want the comic to convey, and how many pages we have to do that. So we draw a very rough indication of the action and dialog for each page on the whiteboard. We block out the panels we think we will need, including symbols showing where each of the characters appear in the panel and an outline of the dialog. We also write down notes on important timeline aspects of the story.
Once we’re done with our whiteboard sketch, we use it to draft the script. The script includes written descriptions of the story and full dialog for each character. We associate each of the story and dialog elements with one of the comic panels that we drew on the whiteboard.
After creating the script, it’s necessary to reviewed it against our page count. We also have to make sure the dialog is clear and concise; this is a balancing act. Dialog balloons in a comic can’t be too big, or they will cover up the action. But our comics still need to be technically accurate and the story needs to be complete. After iterating a couple times on our script, we send it to our artist.
We don’t always start out with the most realistic idea of what can be accomplished in a given set of panels. So the next part of our process is critical. The artist takes the script and creates rough sketches of each page called storyboards. These storyboards are rough sketches that include: panel layout, character positioning, dialog placement, and new characters (such as the Virtual Sprawl Monster). We use the storyboard to get feedback from reviewers and to make sure the comic is going to really convey what we want people to know. Many times, the dialog will not fit as well as we expected, or the story panels might not flow very well. For example: In our first project, we found that we had too many panels and too many story elements. We condensed the story and made better use of space and the comic became more enjoyable.
Figure 2 – Virtual Sprawl storyboard, page 2
After we synthesize all of our feedback, we submit change requests to the artist, and the artist will soon return an updated storyboard. At this point, we examine the changes and see if the comic is ready for final art. It’s crucial to make sure everything is in place before giving the go-ahead on the final art production; so we’ll iterate on the storyboards as needed.
When storyboarding is complete, our artist will draft the final version of the comic. We don’t consider it signed-off until we can review the final draft andfix any last-minute issues we can find. Then we’re good to go - it’s off to the press! We've got a cool comic that people will really be able to enjoy.
Figure 3 – Virtual Sprawl page 2, final
Thanks for taking a look at the previous post about our Cloud Comic. If you have time, drop us a short note to let us know what you think of this medium. Are comics a resource you think would be useful to have as part of your learning process? Would they work well for some technologies but not for others? Would you like to see more of this type of content from Microsoft?
In this post we are making the Cloud comic available as a PDF download. You'll find the remaining panels below followed by a link to download the entire comic.
Click here to download the Cloud comic.
On page 24, you'll notice a printing error where we did not update the Windows Azure link. Specifically, we link to the Chinese Windows Azure website instead of the English version of the Windows Azure website. This is because we brought the Chinese version of this comic to a conference in Beijing, China last November and missed this edit. So, perhaps the printing error will make this first edition extra valuable?
As we mentioned in a previous post, the Cloud comic has not been updated for a few months, so to ensure you get the most up-to-date information always visit the Windows Azure website.
In subsequent posts, we'll post the content from our PowerShell and Virtual Sprawl comics. Also, we are planning on hosting our Silverlight comic book viewer that we developed for online viewing of the comics. We'll have this ready in a few weeks. Later in the week, we'll have post explaining more about the process of going from technology to storyboard to comic panel. Again, let us know your thoughts, we hope to hear from you.
In an earlier post, we provided the first 10 pages of the Cloud comic. Today we give you the next nine pages. In the story, Zach and Leah get into the Cloud mindset and realize the applications of Windows Azure to their business. The informative text pages provide an overview of the Windows Azure platform. In case you missed them - look here for the first ten panels. Without further ado:
Come back soon for the last few pages - and the PDF!
In an earlier post, we introduced the concept of comics and talked a little about what we had done and why. In this post we want to show you the first 10 pages of the Cloud Comic. The focus of the comic is on Windows Azure, which as most of you know is an Internet-scale cloud services platform hosted in Microsoft data centers around the world that provides a simple, reliable, and powerful platform for the creation of web applications and services. In the comic, together with Leah and Zach, you will learn about the cloud mindset and:
We originally produced this comic for TechEd, Japan last August (2010). But, had it translated into English for distribution on this blog. We'll do a few more posts with additional pages and then will release the entire comic as a PDF file for you to view, download, and distribute. Keep in mind that Windows Azure is a dynamic platform and some of the information in this comic may be out-of-date. So, remember to go to the Windows Azure website for the most current documentation. Please take a look and let us know your feedback and comments. Enjoy!
.... stay tuned for the rest of the comic...
Before we could start writing our first comic, we had to think about who our main characters would be. The process of developing our characters was educational journey that brought us leaps and bounds closer to publishing our first comic.
We knew that we wanted to reach out to the younger crowd, so we created two young IT professionals as our main characters. We thought our characters should be Chinese, because we knew we wanted to reach out to the Chinese market; the names given to them were "Xing" and "Ping.
Figure 1 – Xing's initial character panel. Compare facial features to the final art located at the end of this article.
Figure 2 – Ping's initial character panel. She will be revised to have a smaller chin and softer features in general.
We also chose to introduce a fun character, named Squishy. Squishy is a fantastic, mascot-type of character. He's modeled after those stress-balls you get at technology trade shows. (You know, the ones that help with Carpel Tunnel syndrome, and with getting your product's name out there.) Squishy guides our two main characters (and the reader) through the learning process.
After taking a look at the initial character designs, I felt that they weren't quite right somehow. We decided that we needed some outside feedback on the visual design and character development. I put together a focus group, using a sample of people I know who are fans of Anime and Manga. This group of people includes some diverse backgrounds, including American, northern Chinese, Japanese-American, and Korean-American.
Figure 3 – Initial version of Squishy. Note the small eyes. The eyes, we were told, should normally be as big as they are in the bottom-right frame.
I was amazed at how much feedback I got when I ran the character designs past my group. I was told that the names "Ping" and "Xing" might be insensitive, because the characters looked Caucasian (surprise! ), so why would they have Chinese names? Also, it was pointed out that our female character seemed too masculine, her appearance needed to be softer, and that she had a funny-looking chin. The guy was okay, albeit very generic-looking, and his chin also looked a bit overdone. As for Squishy, I was told his eyes were too small and beady; he looked a little bit like a villain. His eyes needed to be a lot bigger if he's going to be our comic relief.
Figure 4 – "Leah," revised panel. She laughs, she frowns. Note the improved chin line, softer facial features, and half-rimmed glasses. Eventually, we went with full frames - but these are cool, too.
We reviewed the feedback and thought about how we could improve our character development. We brainstormed new names for our characters, settling on "Zach" and "Leah." We wrote character descriptions for each one. Zach, we decided, needed to be the goofy one. He would be very smart, but not well-organized and a little silly. Leah would also be smart, but more interested in things like reading books, being organized, and getting things done on time.
We synthesized the feedback and passed it on to our artist, who provided a set of samples in return. We picked what we thought was the best work from the samples, choosing what seemed to be a more appropriate eye size for Squishy, and better proportions for Leah. I took the set of samples back to my group (we met every Wednesday), and asked for feedback on the improvements.
Figure 5 – The updated version of "Squishy." His eyes are now bigger and more adorable, similar to the large eyes that are prevalent in Anime publications.
The process was involved, but as you'll see in the final art, it was well worth it! The characters are better proportioned, and they have a more complete look in general. They look great!
That's it for now. Please respond, we appreciate hearing your thoughts and feedback. Tune in soon for some info on our Storyboarding Process and more panels from our comic on the Cloud!
Figure 6 – Final character art. This watermark is on the inside front cover of all three comics in this series.
I recently worked with a small user assistance team at Microsoft to develop and prototype new form factors for presenting and publishing help content. Based on market research, we focused on comics and Silverlight-driven interactive experiences (more on that in a later post).
The comics were a fun project that garnered a lot of feedback and interest at several IT conferences. Each comic featured two characters, Leah and Zach, along with their light-hearted guide, Squishy (a stress ball come to life). To move the story forward, Leah and Zach were assigned typical tasks, such as automating the administration of the operating system and applications, combating virtual sprawl, and addressing concerns over moving to the Cloud. At the outset of this pilot project our goals were to:
We hope that you’ll enjoy the comics and find them useful. Feel free to distribute them (electronically and otherwise) and please let us know what you think. Do you like them? Obviously we’re not the only company to do this, but we want to know what you think and if you want to see more of this type of content? Do you prefer learning though comics as opposed to more traditional documentation? Some customers suggested the comics could be used as classroom educational tools, learning guides for user groups, and as casual desktop references (for example, the PowerShell comic). Here are some customer quotes from TechEd North America and TechEd Japan, 2010:
In this first post, we’ve included the front cover and back cover of two of our comics below – please take a look! Reading your comments, we realized that in our previous post we had very small thumbnails. We've fixed that, so now you can get a better look at what we've done. Stay tuned in the coming weeks as we release all of the panels for all three of our comics.
In the next post we’ll describe how we developed our characters and early panels. In subsequent posts, we’ll show how we went from script to whiteboard to storyboard to final panels, how we developed a customized Silverlight application for online comic viewing, and the reaction we had in Japan to the project. As you read these posts, if you have any questions about the project or the process, let us know and we’ll talk about that as well. Your comments and participation in this blog will help set future direction for this project and other visual content efforts at Microsoft.
Thanks for reading and hope you enjoy the comics!