Emoji Interpreter

Framer App Prototype

emoji interpreter sprite


View Live Prototype

Project Intention:
  • - To design an iOS app which provides humorous translations of strings of emojis
  • - Design a corresponding web app
  • - Design and implement a landing page to advertise the app
Design Deliverables:
  • - Interactive Framer iOS Prototype
  • - Information Architecture Diagram
  • - Web application UI/UX
  • - Landing Page UI/UX
UX Skills Practised:
  • Usability testing using an interactive prototype
  • Information Architecture - simple iOS app
Developer Tools Practised:
  • Coffescript Functions
  • FramerJS
  • Refactoring verbose code using iterative loops
UI Skills Practised:
  • Responsive UI Design in Framer
  • Dynamic text in Framer prototypes
  • Aligning elements using an 8pt grid system
  • Flat design colors
  • Using native iOS design elements
Lessons Learned:
  1. 1. For-loops in Framer prototypes allow multiple elements to be selected quickly.
  2. 2. After analysing the UI of Twitter in-depth I discovered that they have stuck rigidly to an 8pt grid layout and make strong use of repeated components throughout their design.
  3. 3. A strong understanding of naming CSS variables has proven invaluable for naming target variables effectively in Framer
  4. 4. Dynamic text in Framer works in a similar way to Liquid.
  5. 5. The Framer Community is awesome - I'm particularly grateful to Taylor Palmer for creating a complete set of iPhone UI elements.
  6. 6. Investing the time into throughly understanding the Framer docs has given me an encyclopedic knowledge of the arsenal of techniques and strategies to take to make things work in Framer
  7. 7. The iPhone X is dimensionally different from its predecessors.
What I’d do differently:
  • - I haven't yet seen an iPhone X in person. I would like to test apps on the new iPhone first to see how they deal with challenges such as the footer height and the notch before deploying the second iteration of the app layout.
What I’m proud to share:
  • - A flat UI which aligns with 8pt grid principles