UI

The following examples were taken from interactive language learning lessons I created for Lincoln Learning Solutions on display for portfolio purposes only. They were made functional in Adobe Captivate. Below these examples are examples of UI elements I am creating to work in Unity for a game project.

Interactive Language Learning Lesson: Medical words in Spanish

Each button highlights the corresponding region of the body.

I created an interactive prototype using Adobe XD to show how this screen functions.

I used the share features in Adobe XD to make this link accessible for anyone to look at how this screen works: https://xd.adobe.com/view/8f054b95-88d1-4683-52d3-b70c19586bc3-f934/?fullscreen&hints=off  

(You can click on any of the buttons and it will highlight that region of the body. Press escape when you are ready to exit.)

Drag and drop example

The following example shows how the pictures on the right are answers that the student drags into the empty spaces to answer the question.

The gray spaces in the examples below are where the picture answers are set when put together in Adobe Captivate. They have the drag trigger effect that allows the student to place them in the correct place.

Above are some examples of the answers used to drag into the spaces. They have pictures that go with the text. The student can use the information provided to drag them to the correct area with the question marks.

The above examples shows my design choice to choose a indicator that has a pleasing color but also subtle, it is the transparent circles over the areas of the body where the student can click as they play the audio with the play button.

Interactive Language Learning Lesson: German Recipes

I wanted to start this example by emphasizing that Photoshop organization is very important for these types of projects. It allows for a smooth and time efficient process of sharing each page and element. Each page is contained within it’s own folder and each page has elements that are contained in subfolders too so if I click the 4th state folder, it highlights the object and shows the appropriate information all within activating and deactivating the view of the folder.

Click on the image example:

The above examples show how when the student clicks on each picture, it highlights, the appropriate audio plays and the information text displays on the bottom part of the screen. The colors of the German flag seemed appropriate for the design of this one.

The second page continues the same theme and functionality. As the designer, it was my job to take the manuscript provided by a teacher and translate it into an interactive experience, so I had to cover all of the information requested.

Multiple choice example:

Above are examples of multiple choice pages. The student clicks on the radio buttons to choose the correct answer after listening to the audio. I continued with the same color scheme throughout the lesson providing an area to read the instructions clearly, find the audio button and choosing the correct answer. A vibrant image of vegetables was chosen but adjusted to be subtle and still go with the color scheme.

Listen and read dialogue example:

Above is an example of where the student listens to some dialogue without text, and then listens to the dialogue again with the text. Since the dialogue talks about an apple cake recipe, I chose a vibrant image full of fresh apples for the background which becomes more subtle as the dialogue text overlays.

Type in the answer example:

Above is an example of a fill in the answer page, similar to something you would see in apps like Duolingo. The student just types in the answer and submits it.

Interactive Language Learning Lesson: French Dialogue

Speech bubble image click example:

My design idea for the example above has the click and highlight element similar to the German recipe lesson but this time with a dialogue speech bubble underneath each portrait that points to the person you click on to hear them speak and read what they say. I also went with the colors of the country’s flag for this lesson’s color scheme. Another goal was to maintain a vibrant and colorful feeling throughout the lesson.

Multiple choice & submit example:

These multiple choice pages have a different approach then previous German examples. It is all text based, the student chooses an answer by clicking a radio button and then presses the submit button. There is an accompanying image to support the theme of the question since each subject is different.

Listen, drag and drop example:

Above is an example where I designed a page where a student listens to audio they may not fully understand, and try to recognize the text and drag the answer to the question mark spaces that closest fits the audio that plays from the button next to them.

The following is UI I am creating for my ongoing game project.

Unity3D menu functionality

I have started a prototype menu in Unity 3D game engine for a project I am working on. This is to demonstrate functionality with the buttons to Play the game, view the credits, quit the game or reset the high score. The buttons work with c# scripts. There are nettle leaves that slowly float in the background with some peaceful yet quirky music. I plan to keep developing UI for the project to further demonstrate my abilities with Unity.

I was working on a main menu where leaves slowly float in a reflective background.
I have combined the nettle leaf health with the orb I created for previous health idea, added a green leaf pouch icon, notebook icon and a sunlight meter.

Also in this project I have made a prototype for the pause menu as well. The buttons restart the level, pause the game or go back to the main menu.

I am experimenting with some ways to show health. I am displaying all the states of the health orb here. It has depleting green liquid. I plan to make sun beams restore health.
A single orb would be displayed with the green liquid representing the state of Nettle’s health.
I have a working pause menu which I will update with some nice green colors and button sprites.

You can view more of my 3D work in the 3D section of my site: http://www.waltersattazahn.com/wp-admin/post.php?post=869&action=edit

Jun 30, 2020 | Posted by in Uncategorized | 0 comments
Premium Wordpress Themes by UFO Themes