TBH Landing Page Redesign

 

I was asked by Suloni to redesign the existing TBH homepage which looks like this:

As you can see the design was really dated and uninspiring, especially since the main audience for this website is kids. We needed to update it to make it more tablet friendly/exicting and also give it a more “modern” feel. The client who oversees Texas beyond history typically does not like changes so Suloni had me create two design mockups. One was pretty close to the old design and the other was very different.

1st Mockup:

I tried to keep the same “feel” as the old website but add modern design elements such as the nav box/ drop shadows. I also reformatted header and footer to look cleaner.

 

2nd Design option:

This was my preferred design option. It offers a completely different look and feel from the old home page. It is clean and simple. The large icons are easier to press for children, especially since most will be accessing this site with a tablet. The client ended up choosing this version to our surprise! In the next coming weeks I will be working with Stacy, one of the web developers here, to bring this mockup to life in the new site using CSS/HTML.

Interactives

I’ve finished the rebuilds of Talking Hands and Parade animations. The Parade one was relatively simple, but the Talking Hands was probably the hardest interactive I’ve done yet. It involved adding many features to Canvasser which Ruben graciously added. 

The hardest part to redo was this frame which involved a slider which controlled a mini map and the large map. You could then drag the mini map to move around the large map. This involved adding multiple constraints for each elements such as the slider position controlling the scale of the minimap and the large map. If you want to see the final version you can see it here: https://dev.texasbeyondhistory.net/st-plains/kids/talking/index.html

The U12_2 depicts Oleg and Polina on an ornate staircase, where Polina is at the bottom looking up the stairs with Oleg at the top looking down on her.

I felt the most important part of the scene was the perspective. The stairs are the focal point of the scene, but Polina and Oleg also needed to have the correct perspective to make it seem more realistic and show their position and where they are looking.

The photo I chose reference showed a clear perspective that could easily show the two characters and had good tonal qualities.

I did a rough sketch of the scene.

Once I got approval, I started the final drawing. The perspective of the staircase was easy to capture, but the hardest part was actually drawing the ornate railing, especially since they were all at different distances. I needed to get the right amount of ornate-ness but not detract from the actual stairs and Oleg/Polina (since that was not the focal point).

I added Polina and Oleg in, and while Polina fit in nicely as the perspective was much more straight forward, it was a lot harder to capture Olegs perspective.

I needed to make a sculpture of Oleg out of clay in order to visualize the perspective, because none of the other character sheets showed that perspective from looking down at him. Once I found the right perspective, I pieced together parts of Oleg from multiple character sheets and constructed a new position for him on the stairs.

The tonal renderings were not that difficult, especially since there is a pattern going up the stairs where there is much harsher light and shadows towards the window and softer more dispersed light towards the back.

 

 

 

The illustration for the U12_3 scene depicts people riding in the back of an old pick up truck sitting on furniture. The houses in the background should show ornate and traditional Siberian wooden buildings.

I pieces together multiple scenes and objects to construct a rough draft of the scene. I chose to use a truck later on that had a more open bed, but I stuck with older style of furniture

The background of the scene was my favorite part of the scene to do. I loved drawing the ornate windows and woodwork of the houses. The background couldn’t be too detailed, but enough to show that traditional woodwork. The truck and the furniture were hard to fit into the scene to get the perspective right, but I think I got it down.

I cleaned up the drawing and added more trees in the background to fill out space. The tonal renderings were simple in the background and required just simple shading. On the truck, however, I wanted to show the shine of the coating as it drove in the sun, and the shading was much more dynamic and had more contrast than the background. The people are simple in the drawing but require some detail to make it look more realistic.

Overall this was one of my favorite scenes to illustrate!