Liberty University
Master of Visual Communication Design
Course: Vector Illustration. Art532
Professor: Brianna O'Neal
Work: A to Z, Concept, Research, Sketch, Illustration, Presentation
Year: 2021


Exercise 1:
Skeuomorphic Vs Flat
App UI Design Oud of The East


Description:
Inspiration Brainstorming, and Initial Thoughts
In this exercise, I was puzzled between many ideas, I brainstormed a few; the first thing was a musical instrument inspired by the radio idea provided by the professor.

I tried ideas like a kitchen stove app, a children shape learning app, a TV streaming app, car body repair appç then turned to car design app. But I turned back again to the musical instruments.

Final concept and sketching
I thought of the Eastern Oud because I think it’s a great melodic instrument that has much to offer, and basically due to my Middle eastern background where this instrument is very popular. I learned during this class that the Oud is the grand grandfather of the guitar, I believe app stores are full of western instrument apps but not eastern ones.
I have done almost three or four preliminary sketches for the first view of the app until I settled on one, then I sketched out all views, in skeuomorphic and flat. The sketching includes the main view that has the strings, all tuners and turning keys. I made the music notes as keys on a separate view, I made the scales (The Maqams) view which are plenty in the Middle Eastern music, then extra percussion view for beats to backup Oud playing. I added Menu view, About page, Buy, and share for social media. Finally I made a page specially for learners with a video player.

After sketching I moved to Illustrator, created the design and graphic style. I used Arabic calligraphy to write "Oud Alsharq" or Oud of the East using an Illustrator brush I had to make a brush with a chisel that works the opposite direction of the Western ones. I also created the Eastern ornament pattern from scratch to simulate the authentic ones that are made of pearls and sea shells, and I created spruce and rose wood texture for the Oud background, and created metal rolled strings from scratch. See the graphic elements and motifs style below.

Basically, many of the detailed I created for the Skeuomorphic style needed to be simplified for the flat one, that was by using the dominant color of each element. The two designs looked eventually very different from each others. I had different opinions about them some liked the flat one and some liked the Skeuomorphic thought it's more realistic as if they're playing a real instrument.

Then created the mockup with Photoshop for the app on a phone with a traditional Middle Eastern living room background.


1- Skeuomorphic Design
2- Flat Design
Illustration Process
Final Vector Illustration:
Mockups:

Image credits: pixabay.com by niekverlaan, adrimarie
THANKS
Firas Ota Bachi © 2021

Back to Top