Character Creator and Home screen Sketch

Themis García
4 min readSep 27, 2020

Homescreen Sketch

Link to Code | Link to Display

In this assignment, I replicated the home screen on my phone. I practiced different CSS properties on the CSS style file and in the javascript file.

My goal in this assignment was to create a more intentional positioning of divs. In my previous experience, I had a lot of difficulties positioning elements where I want. In this assignment, I was able to concentrate more on this subject.

My second goal was to understand how to manipulate, create, or change DOM elements in javascript.

For that, I decided to make the purple squares by using a for loop in js file to create and position the divs. This was very challenging.

Process

Challenges

  1. One of the challenges was positioning the time in the middle of the screen, not in the middle between the signal and battery display. One option that I considered was to indicate the position in pixels. But if the size of the screen changes slightly, that would defeat the solution.

2. While doing the divs in javascript I had difficulties recreating the text bellow the purple rectangles (as the names of the apps in the home screen). I don't have a clear idea of how I can pursue that on the js.

Very Helpful:

Hand Held CSS Videos

flexboxfroggy.com

Character Creator

This assignment was very interesting. I honestly don't use to use this that of the app of the character creator, however, I find to think in the diversity of character creator from creating environments, animals, pizzas, beyond humanoid avatars.
I try different character creators suggested in the Character Creator Survey.

Rat Maker

This app is better suited for desktop. In the desktop version, you can see your option in the rat image while choosing. However, although the site is responsive, you cannot see while choosing in the mobile version. However, this was a very fun absurd toy. I really enjoy the hand draw style of the images.

Pizza Pizza

I like how this app makes more entertainment order a pizza online. Visually build your pizza is a very fun way to complete the task. However, in my opinion, this is an application that works better on the desktop on mobile.

Make An Ice Cream

This is an educational platform for kids plays while learning different skills. I like the tool selection on the left of the screen. Something that limited the time of use was the amount of noises that have for every action. However, I don't know how practical this decision is for small children.

Different Humanoid Character Creators

This was the one that I found more troubling for the stereotypical possibilities in selection while creating a character. Although some interface design decisions were well established, the limited decision of possible human expression is problematic. In some aspects look like you have many options (eye colors, eyebrows, makeup, hairstyles) in other instances lack of diversity (skin color, hair type, genre). This presents a huge distortion in what is “viable identities” and what it is the ideal version of a human.

--

--

Themis García

Product UX Designer, Accessibility Researcher, Artist | PR-born & raised | She, Her, Ella| themisgarcia.com