UX to UI Learning Journal Knight App

Class 00 - Reflection

UX is always a tricky thing. When done right, you barely notice it. But when it's done wrong... hooooo boy do you notice it! I've had some success creating menus for projects and websites, and as much fun as it was, I realized there's always something I ended up missing. I'm hoping to learn to cover the basis with this course!

Class 01 - Personas

I like to add humor and challenge myself by creating things that don't really need to exist. So with that in mind, I'm going to try to work on the process that a fictional character would need to take to make specialized tech for themselves. Think about it. Someone had to come up with a way to create a user interface for Starfleet ships, hence the birth of the LCARS display. Or Tony Stark creating the OS that Iron Man uses. I challenged myself with coming up with a humorous way for Batman to come up with his own app to do the things that he would need to do to fight crime. It will be a fun task, but it'll also help me come up with all of the different ways that things would need to interact and will be able to help me in the future. I know it's wacky, but it's how I learn :)

Class 02 - Sitemap

I had already created a document with the hierarchy and overall layout to come up with my original concept, so I made a sitemap/flowchart from that information. Ironically, when I'm working on a story or script, I tend to put the the main subjects of beats on index cards in the software I use and move them around! So I have experience doing that. In fact, I was working on a process flow chart at work recently and put all of the information on index cards. We then used dry erase marker to draw the lines to the elements as needed. I didn't include all of the information that will go deeper than the levels in my graphic, since there wasn't room and I want to save a few things for the final reveal!

Class 03 - Wireframe

Welp, I tried to make the basic wireframe in Comp on my iPhone, but had trouble being able to open it in Illustrator. And by trouble, I mean it wouldn't let me. Looks like there may be some firewall issues with the my software and the cloud. No worries, I took to Adobe XD to work on it. That is some awesome software, but it is still in Beta. After many crashes where my work wasn't saved (even though I was hitting ye olde Ctrl+S often) I altered my process. I would "save as" after building each board. I had two docs to work from, one serving as a backup. It was fun! I did end up essentially building the whole thing out with graphics, since I'm accustomed to working quickly on many projects, I built the graphics as I went instead of using basic shapes, so it may be more complete than intended!

Class 04

I refuse to apologize for the joke on that's on the first mood board :) I've never actually made a mood board before. I tend to just open those on another tab and refer back to them if needed for inspiration. Same with a Style Tile. I usually built it into the first scene and refer back what I've done previously. It definitely seems like it would be useful for many, but I usually don't have the time to invest at the beginning. As I ponder the reasons why, I think it's typically because I don't work on things that need style approval. If it's personal, I've already got an idea locked in and work to create that. And if I'm doing something for a corporate client, I utilize their style guide and previously made promotional material for the colors and style. Having said all of that, I understand the need and use for these materials!

Class 05 - Prototype

Had a little bit of trouble on the screen recording for this one. I originally used one kind of software that ended up churning out a 25 fps file that looked like garbage, but thankfully Windows 10 has the XBox Gamer Recorder setup to record the screen! I like that! I was disappointed to see that the Windows version of XD does not have the ability to record like the mac does. But it is still in Beta so hopefully it will be in the final release. Not really much to reflect since I accidentally jumped a little ahead of the curriculum when creating my wireframe so it was ready to rock. It really has been so much fun working on this. Trying to figure out what would be useful, what wouldn't be. Then coming up with a fun and hopefully clever way of producing it!

"Working" Prototype


Made with Adobe Slate

Make your words and images move.

Get Slate

Report Abuse

If you feel that this video content violates the Adobe Terms of Use, you may report this content by filling out this quick form.

To report a Copyright Violation, please follow Section 17 in the Terms of Use.