For this self paced training exercise, I decided to do an image trace of two of my photographs. The first image will show the original and underneath the original shows the image traced result. In addition to the image trace, I still wanted to play around with typography. My interest in typography allowed me to experiment with letter spacing and the layout of text. For the first image, the text is curved instead of straight.

The bird in the image is called a laughing gull because they don’t make beautiful chirp sounds like regular birds. Instead, they sound like hyenas except their laughter sound is better and louder. They tend to fly around you in circles until you give in and give them your french fries or what ever you’re eating.

For the next image, because the use of blacks are heavy, I changed the settings of the image live trace to look spooky. I added a very subtle thin font and greatly increased the letter spacing. Because of this great large space, I called it Dark Matter. Dark Matter is something that involves universe which appears like a dark and empty void. The same goes for the image, there is this character (which is made out of hardened Play-Doh) that is standing inside the dark void. The dark matter almost engulfs him.

In my self paced exercises, I decided to work on the color wheel. My idea was to create a Balloon Man being carried away by a giant Balloon with many of the colors of the color wheel. The entire drawing was done using Adobe Illustrator. This idea came up after watching the video of the band Robyn Hitchcock and the Egyptians’ “Balloon Man”.

In this piece I tried to experiment with white space and typography using Helvetica Neue in three different font weights. I wanted to create balance while keeping it simple. I wonder if I should use this as a computer wallpaper…

My Task was to redesign the Educational Resources section of the Texas Politics page. I wanted to stick to the color scheme of the section by making the majority of the elements grey. The subsections within each section help categorize each link.

The navigation at the top serves as a jump menu so when you click on what ever title, it will jump to that section that corresponds to the element clicked. This is helpful since the old layout has an accordion kind of layout but the accordion will be removed and instead of having the user scroll all the way to the bottom, the user can click on the navigation at the top to get to where they want to go. This is helpful in the mobile with the inclusion of the “Return to the top” button. In mobile, everything is in one column instead of the two column layout in the desktop version. If the user clicked on “Poverty”, the last section, instead of having to scroll all the way to the top, they can click on the link that will send them to the top of the page.

The Texas Politics website redesign was my first assignment. My job was to create a mockup of the Texas Politics Polling page. Because the page was responsive, I had to create mockups for the for the desktop and one for the mobile version. Before, the web page lacked color and division and because each section in the navigation of the Texas Politics website had certain color scheme, I chose a light blue color for the content and a dark blue for the header. The dark blue allowed the page have division which makes selecting which content to read easier.

Most of the design was done in the browser because when I am coding web pages I usually create the mockup in the browser because it provides a more realistic view of what the page will look like instead of working with photoshop document of fixed height and width. Eventually I went into photoshop and created mockup’s for the mobile version and for the desktop version to show the hover effect of the page. After the mockup was completed and accepted, I went in and coded the design of the page with HTML and CSS and some Javascript. The Javascript was to fix the issue of the search button to go inline with the search term. The table was generated with a Javascript plugin that presented data in a table. I had to manipulate the layout of the search section to go with the table.

The web page is now live here

The Desktop View of the “Latest Polling” section of the poll page

The mobile view of the “Latest Polling” section of the poll page. The borders around the graph was removed so the viewer doesn’t see the arrow navigation touching the border.

The Desktop View of the “Latest Polling” section of the poll page with table layout below. The search button is inline with the header of the graph instead of sitting on its own row.

Table detail of the latest poll section mobile view. Each column has spacing to allow readability and to prevent the columns from overlapping.

These were images that were for the ESL department. I worked with Mike Heidenreich to get the drawings to become the style of a set of drawings that he presented and wanted to use but he couldn’t because they were copyrighted. The purpose was not to copy the drawings but to make them my own. The drawings were to have a word bubble above one of the characters so the students could figure out what the character is thinking or saying.

The drawings were done using Adobe Ideas on the IPad and were edited further in Adobe Illustrator. The color idea came from the fact that my banner and my basecamp avatar has a background of one color with select areas being white. This is how I use color in some of my illustrations. I like to go minimal and make the entire drawing one color and the select areas of white to make the characters stand out.

Sheep Illustration revision without color and more sheep

Sheep Illustration revision with color and more sheep

Brain Full illustration without color

Brain Full illustration with color

“Cat Fud” illustration without color

“Cat Fud” illustration with color

shoot the apple illustration without color

shoot the apple illustration with color

Landscape version of the shoot the apple illustration

The following images are used as image placeholders for the Texas Politics Facebook page. Previously, when they uploaded an article from their website, in image from the link is used as a placeholder above the article. The problem is some pages such as the internships and the some blog articles and polling pages don’t have images and instead will show a blank box above the content. These images will act as placeholders for the pages that don’t have image content.

The placeholder for blogging content

The placeholder for charts

The placeholder for internship related content

An edit of the placeholder for blogging content with Texas Politics branding. The look reflects the layout of each blog post instead of the blog home page.

An edit of the placeholder for the charts content with the Texas Politics Logo. The colors of the bar graph is similar to the color scheme of the website.

The placeholder for internship edit related content with the Texas Politics branding on top.

The following images show screenshot images of the placeholder images within the Texas Politics Facebook page. Each placeholder images corresponds to the content within each Facebook post. These images help show a preview of what these placeholder images might look like within a post. These images are added if the webpage within Facebook post does not include any images or visuals to show as a preview image.

A preview of the internships placeholder image within the Texas Politics Facebook page. The images show two types of internship posts. The top shows the smaller version of the preview image while the bottom shows the larger version of the image.

The custom preloader GIF