animated black Crobot logo cycling magneta, gold, yellow details

About me

go home

I’m Cindy Roberts, creator of The Crobot and all the work in this portfolio. Some of my life-long pursuits include art, video games and dogs. I was born in Austin, Texas and pretty much been involved with those three pursuits since then!

My undergrad degree is Studio Arts, I once co-owned an indie game studio (with a top-rated game on Xbox Live!), and even spent one year working with dogs. My two dogs, Levi (loves clothes) and Phoenix (loves toys) are celebrating their 16th and 14th birthdays at the end of 2020.

In late 2019, I earned up my graduate degree in Web Design and New Media from the Academy of Art University, SF.

Send me a message or click a link below to follow me:

Caricature drawing of Cindy, made at Universal Studios in Orlando, Florida.

Phest Moves Phoenix

go home

Phest Moves Phoenix is non-functional e-commerce site compiled using one shop inventory item from each classmate. I took each item and reimagined it as a dog toy, drawing each on my iPad Pro. Then I wrote the site as if my dog, Phoenix, owned it.
FYI, Phest is dog for Fast.

Visit the Phest Moves Phoenix site.

A mood and style board with quick wireframes displayed on a tablet. The intended style was: quirky, casual, hand-drawn.

Documentation with needs, wants, and design inspiration.

Logo sketches in Procreate on an iPad Pro.

More Procreate sketches; this time of the wolf-head item. Three views were drawn to make a gif.

Colored, final version ofthe three views.

An early version of the Phest Moves Phoenix site, shown on an iPad and iPhone. The zebra-style table of inventory did not appear in final designs..

The same early version as seen on desktop.

The site did not have actual inventory, but did have a form to enter items into the site.

A classmate used cake as an inventory item. Here is my redrawn version of cake, as a dog toy, for the site.

Vegetables reimagined as a dog toy of canned green beans.

The final design, with custom logo and items seen on the homepage.

Final design showing an item page; the Wolf Head.

Click on the link below to watch the final Critically Trying video on Vimeo.
The art assets were drawn on my iPad Pro, and broken into pieces for animation. Here’s the horse, with the layers needed to animate him: his body, two versions for each of his front legs, and two head positions.
Here are the layers needed to animate Bellas, the narrator.
Page 1 of the storyboard.
Page 2 of the storyboard.
Page 3 of the storyboard.
The art assets were drawn on my iPad Pro, and broken into pieces for animation. Here’s the horse, with the layers needed to animate him: his body, two versions for each of his front legs, and two head positions.
Here are the layers needed to animate Bellas, the narrator.
Page 1 of the storyboard.
Page 2 of the storyboard.
Page 3 of the storyboard.

Strong Beer Fest

go home

This video was a quick turn-around assignment, where we were to attend an event, film and photograph it, then make a promotional-style video for it. I documented this beer festival on my Canon camera, then edited the footage in After Effects.

The flyer handed out for the event.

Thumbnail images of all the video files considered for the final movie.

Test Persona 5.
Test Persona 6.

Critically Trying

go home

This 2D animation, drawn on an iPad Pro and animated like a motion-comic in After Effects, introduces some of the characters of Critically Trying: the group of adventurers plagued by horrible luck.

Watch the final video above, then a Procreate timelapse, and planning and development images below.

A still from the opening scene of the animation, showing Bellas, the narrator.

The art assets were drawn on my iPad Pro, and broken into pieces for animation. Here’s the horse, with the layers needed to animate him: his body, two versions for each of his front legs, and two head positions.

Here are the layers needed to animate Bellas.

Page 1 of the storyboard.

Page 2 of the storyboard.

Page 3 of the storyboard.

Click on the link below to watch the final Critically Trying video on Vimeo.
The art assets were drawn on my iPad Pro, and broken into pieces for animation. Here’s the horse, with the layers needed to animate him: his body, two versions for each of his front legs, and two head positions.
Here are the layers needed to animate Bellas, the narrator.
Page 1 of the storyboard.
Page 2 of the storyboard.
Page 3 of the storyboard.

Hobby Twin

go home

Hobby Twin was a proposed app, and this is the commercial for it. Since the app is about finding arts and crafts buddies for projects or motivation, I left the UI of the app in a hand-drawn style, as well as all art in the commercial.

The final video is above, and progress images below.

Concept slide for Hobby Twin.

The voice over script I wrote and read for the video.

Moodboard created for Hobby Twin. The biggest inspiration was hand-made and DIY.

Storyboard, page 1.

Storyboard, page 2.

Some developed character sketches. The pink bird is the main character; notice some animation poses overlapping his art.

A sampling of final frames from the video.

Concept slide for Hobby Twin.
The voice over script read in the video.
Moodboard created for Hobby Twin. The biggest inspiration was hand-made and DIY.
Storyboard, page 1.
Storyboard, page 2.
Some developed character sketches. The pink bird is the main character; notice some animation poses overlapping his art.
A sampling of final frames from the video.

Everything & Nothing 3D scene

go home

This project combined the Critically Trying characters with the shop featured in the Everything and Nothing website. Clive, the thief of the group, works with Lucien in his spice shop. This After Effects animation features Clive, modelled in Maya, walking into the Everything & Nothing shop.

The final video is above, and some progress images are below.

This was the first T-pose drawing for Clive’s 3D model.

The T-pose revamped. The hair was adjusted for 3D sculpting without transparency planes, and the clothes were drawn to be closer to the other versions of the character. The edited clothes are not symmetrical, so made for more difficult modeling and texturing, but a nicer final product.

Top-view for the hand reference.

Drawings for the environment; one of the camera views, in color, on the left, and early sketches and notes on the right.

WIP screenshot of Maya, showing the clothes and hands for Clive.

Further WIP images showing multiple views of Clive.

A/B lighting tests.

Concept slide for Hobby Twin.
The voice over script read in the video.
Moodboard created for Hobby Twin. The biggest inspiration was hand-made and DIY.
Storyboard, page 1.
Storyboard, page 2.
Some developed character sketches. The pink bird is the main character; notice some animation poses overlapping his art.
A sampling of final frames from the video.

go home

omnis atque nihil

view external site

Purpose & Audience

go back

Chalk drawing of a foxglove plant
While I haven’t posted any comics, I have characters and stories created for a webcomic. Even so, I wanted to build up the world within Critically Trying by making a site focusing in on one supporting character and his shop. This character, Lucien, runs the thieves guild in one of the towns, but his ‘legitimate’ front business is a spice and herbs shop. So, I created a site for this fictional spice market.
This looks like a stylized online store, but in reality serves only as world-building for the Critically Trying webcomics, and nothing is actually for sale.
Before the comics are published, the audience would be limited to my friends involved with the characters and people who follow me on social media platforms, where they could find links for it. In time, once I have some actual webcomics to share, anyone who reads them could visit the site, since it’s a companion to the comics.

Target Audience

The immediate audience is the group of friends involved with the characters and stories of the webcomic. A wider audience would be webcomic readers and/or fans of comedic adventure stories. Age range could be pretty wide, but may fall mostly within the mid-20s to mid-to-late-40s.

Testing Equipment

Testers were either sent a current link to the site to test on their own iPhones (which were screen-recorded during testing), or tested my my MacBook Pro while the screen was recording their actions and the camera filming their face and voice.

Tests to run

I’m mostly focused on the overall usability of the site. There’s no actual shopping cart, and no forms, so basic navigation and user flow is the goal. Legibility, due to font choice, font size, and color combinations also needs to be tested.

Testing Personas & Feedback

go back

My testers were three friends familiar with the story and characters behind the website: Caleb, Lana, and SJ. Two of them tested remotley on their own iPhones, while the other tested on my MacBook Pro.

Pitch

I’m the artist and writer for Critically Trying, a fantasy-adventure webcomic that is soon-to-be published. In preparation for the comics, I’ve built some websites expanding the backstory and supporting cast for Critically Trying, and am hoping to share them with some people before the comic is released. If you have some time, I’d like to have you visit one of the sites and tell me what you think. This site is called ‘Everything and Nothing’, for the spice shop in the story that also functions as the head of the thieves’ guild. Would you be interested in taking a look and giving your feedback?

Lana tested on a MacBook Pro. Read about her role and testing style below.

SJ used her iPhone to test the site. Notice the starting point is represented by the yellow arrow, and the total test time for each is listed.

Caleb used his iPhone to test the site.

Screenshot showing Lana testing the site on my MacBook Pro.

The testers answered questions after using the site. The first page of feedback and follow-up actions are below.

Page two of feedback and follow-up.

The feedback displayed in a piechart.

Lana tested on a MacBook Pro.
SJ used her iPhone to test the site.
Test Persona 3.
Test Persona 4.
Test Persona 5.
Test Persona 6.

Inspiration & Style

go back

I wanted to evoke the designs one would see inside the shop, if it were a real place. Since the setting is fantasy and past, I limited colors and used hand-drawn art. Almost all my inspiration came from chalkboard menus drawn in coffee shops and small cafes.

An example of the chalkboard cafe-style drawings that inspired my art style for the site.

A second example of cafe chalkboard art.

Font styles and colors for the site.

An earlier design of mine, the Skeleton Key, related to the Everything & Nothing store.

The reference photo I used to draw the closed and open hands on the site.

An alternate color-version of Clive, and the early sketch of him used for placeholder art during site development.

The final art for the three shop employees - Clive, Lucien, Marini.

A collection of item art drawn for the shop.

Lana tested on a MacBook Pro.
SJ used her iPhone to test the site.
Test Persona 3.
Test Persona 4.

Wireframes

go back

I started the design in hand sketches, followed by digital wireframes with increasing details.

The first hand sketches for Everything & Nothing’s faux online store.

A little refinement to the hand sketched wireframes.

Sketches exploring the hidden section of the site.

Digital wireframes, using placeholder images and fake text.

Refinement to the digital wireframes, including styled text and early custom art.

Concept slide for Hobby Twin.
The voice over script read in the video.
Moodboard created for Hobby Twin. The biggest inspiration was hand-made and DIY.
Storyboard, page 1.
Storyboard, page 2.

Final Design

go back

Everything and Nothing was built mobile-first, but scales to display well on tablet and desktop.

Views on an iPhone in portrait and landscape mode.

The main menu and an item detail page.

jQuery mobile icon variations, and final design saved to the iOS homescreen.

Character bios from the About section, as seen on an iPad.

The detail page for garlic, as seen on an iPad.

The product page for Essentials, as viewed on a laptop.

Views on an iPhone in portrait and landscape mode.
The main menu and an item detail page.
jQuery mobile icon, saved to the iOS homescreen.
Character bios from the About section, as seen on an iPad.
The product page for Essentials, as viewed on a laptop.