Skip to content

The Perfect Fried Egg

Assignment

Use a tool, format or combination from above and create a mobile media item. It can be a video, mobile webpage or mobile web app.

Topic: 3 Steps to success: Explain a process in 3 Steps. Examples include:

  • Creating an agenda for the perfect meeting in 3 steps
  • How to remember people's names in 3 steps.
  • Bananas Foster in 3 steps.

There is no predefined time limit on this assignment. Each tool and format is different and the outcomes will vary. The time should be appropriate to that of the tool and the effectiveness of the final product.

Remember to think specifically about the mobile user, their experience and how media delivery and consumption may differ on a mobile device than a conventional desktop or laptop.

Google Site: The Perfect Fried Egg

Learning/Experience

As I moved into designing the webpage, I aimed to follow the layout of the well-known WikiHow pages - simple step-by-step instructions with images. I didn’t want to use “real-life” images, but rather, experiment with creating illustrated images. I kind of appreciate well-done illustrations on web pages and wanted to see if I could tackle some in this project.

When it came time for creating, I took inspiration from a public television show - America’s Test Kitchen - and remixed a recipe and transformed screenshots into illustrations. Creating illustrations from photos was easier than expected; however, creating quality illustrations proves more difficult. When drafting out the copy, I initially produced something that resembled an essay and when migrating that to the web, it hit me, this copy wasn’t going to work. I was thinking about the mobile user at this moment and needed to adjust for them, scrolling, reading snippets of text, and glancing at pictures. So I paused and started reorganizing, breaking the text out into several, scannable layers, and on the final revision, I attempted to simplify the language more.

This was a positive learning experience, and in the end, I had a funny insight about creating a three-step process. I intentionally was thinking of very simple tasks, processes, and procedures; but at the end of the day, I found myself having to redefine where the steps were to keep it within three for a simple process. So for a future project, I may go the other direction, and choose something extremely complicated and attempt to overly simplify it for fun and comic relief - It was one direction I considered at the start of this project.

Tools

  • macOS: Screen capture
  • Adobe Illustrator
  • Google Sites

Successes

I enjoy web development as I believe it embodies the spirit of iteration in design, and that's what I did with this project. Even though I did not set out to use Google Sites, at the end of the day it was a user-friendly tool that allowed me to easily make adjustments and edits to the webpage on the fly. I think the layout, design, and copy came together for a fluent mobile-first webpage.

Struggles

I initially planned to write the HTML and CSS for the webpage myself, which then ultimately would morph into my basecamp; however, at the start of the unit, I also began the process of migrating to a newer mac. Long story short, moving from High Sierra to Catalina was more difficult than expected, especially when setting up a development environment. So I had to change course, enter Google Sites.

And as easy as it was to use image tracing on a photograph to create a vector illustration and edit it, producing a quality illustration will take more time and experimentation. I also have a feeling that illustrating food was not the best subject for the first experiment.

Attributions

Back to top