Academia.eduAcademia.edu

Figure 12 – uploaded by Hanan El-Sherbiny

See full PDFdownloadDownload figure
Figure 13, A zoom on Otlob logo on the app welcoming screen Figure 14, A zoom on the home screen in Otlob (Source: screenshot from the application interface) (Source: screenshot from the application interfc Figure 14, A zoom on the home screen in Otlob app (Source: screenshot from the application interface) — It has a simple interface; the user can search for nearby restaurants, order his food, and then wait for it to be delivered to his doorstep. Otlob brand identity consists mainly of two colours, the yellow and the purple. The UI designer added a third colour which is the green colour in buttons as shown in the following figures.

Figure 13 , A zoom on Otlob logo on the app welcoming screen Figure 14, A zoom on the home screen in Otlob (Source: screenshot from the application interface) (Source: screenshot from the application interfc Figure 14, A zoom on the home screen in Otlob app (Source: screenshot from the application interface) — It has a simple interface; the user can search for nearby restaurants, order his food, and then wait for it to be delivered to his doorstep. Otlob brand identity consists mainly of two colours, the yellow and the purple. The UI designer added a third colour which is the green colour in buttons as shown in the following figures.

Related Figures (14)

Figure 1, Safari icon versions used in Apple operating system’s user interface, an old Skeumorphic one and a
Figure 1, Safari icon versions used in Apple operating system’s user interface, an old Skeumorphic one and a
Also, we can see the Swiss style effect obvious on these illustrations.
Also, we can see the Swiss style effect obvious on these illustrations.
In the following figures, we can see examples of flat illustrations done for Hapi mobile app, a self- care app that connects a person with a trained compassionate listener through a voice call. The illustrations are flat and are following the app colour guidelines. They are used as storytelling illustrations to explain the use of the app on its onboarding screens.
In the following figures, we can see examples of flat illustrations done for Hapi mobile app, a self- care app that connects a person with a trained compassionate listener through a voice call. The illustrations are flat and are following the app colour guidelines. They are used as storytelling illustrations to explain the use of the app on its onboarding screens.
Figure 11, Other samples of flat illustrations made by Buck agency showing characters building and compositions (Source : https:/buck.co/work/facebook-alegria ) ALL 2U LS, LALLUVUYUR HUY DUN LLL UOdSLY LILalve asullyy) LWW VLLEAL A LIVITDSUNY TIUOSUAGUUIT AL) animation ecosystem for its UI. At that time, Buck assembled a team of talented illustrators and year later, Alegria was born. Alegria is a Spanish word that means ‘joy’, as the main creative ide behind the project was to create this fun and playful world in Facebook user interface. The core principle followed by the creative team was to design and innovate a scalable syste: rooted in flat, minimal and geometric shapes. All figures are abstracted, limbs are oversized an non-representational skin colours are used to help them achieve a universal feel. Visual guideline have been established for the whole project showing figure construction, body proportion anatomy of male and females, body types, hands positions, colour guidelines and much more. Buck team built an extensive library for Facebook to be used in the Alegria world over time. Tt library includes a dozen assets of subcategories beyond just people such as flora, fauna, building transportations, hands, etc. Along with a toolkit that help them expand. These Illustrations permeate Facebook's entire interface, across mobile, desktop, and print. Tt use of Facebook’s unique blue colour is obvious in most illustrations. This helped in tt reinforcement of Facebook’s visual brand identity across users all over the world.
Figure 11, Other samples of flat illustrations made by Buck agency showing characters building and compositions (Source : https:/buck.co/work/facebook-alegria ) ALL 2U LS, LALLUVUYUR HUY DUN LLL UOdSLY LILalve asullyy) LWW VLLEAL A LIVITDSUNY TIUOSUAGUUIT AL) animation ecosystem for its UI. At that time, Buck assembled a team of talented illustrators and year later, Alegria was born. Alegria is a Spanish word that means ‘joy’, as the main creative ide behind the project was to create this fun and playful world in Facebook user interface. The core principle followed by the creative team was to design and innovate a scalable syste: rooted in flat, minimal and geometric shapes. All figures are abstracted, limbs are oversized an non-representational skin colours are used to help them achieve a universal feel. Visual guideline have been established for the whole project showing figure construction, body proportion anatomy of male and females, body types, hands positions, colour guidelines and much more. Buck team built an extensive library for Facebook to be used in the Alegria world over time. Tt library includes a dozen assets of subcategories beyond just people such as flora, fauna, building transportations, hands, etc. Along with a toolkit that help them expand. These Illustrations permeate Facebook's entire interface, across mobile, desktop, and print. Tt use of Facebook’s unique blue colour is obvious in most illustrations. This helped in tt reinforcement of Facebook’s visual brand identity across users all over the world.
Hanan El-Sherbiny — JAARS - Volume | - Issue 2 - December 2020 Figure 12, Samples of flat illustrations made by Buck agency for Facebook Alegria illustration systen (Source : https://buck.co/work/facebook-alegria )
Hanan El-Sherbiny — JAARS - Volume | - Issue 2 - December 2020 Figure 12, Samples of flat illustrations made by Buck agency for Facebook Alegria illustration systen (Source : https://buck.co/work/facebook-alegria )
Figure 15, Colour palette used in the researcher’s flat illustrations (Source : author) The researcher made flat illustrations based on a hero character who uses “Otlob" mobile app and enjoys its easy benefits. All illustrations are made from simple and flat geometric shapes, with solid vibrant colours and some tonal shadows. Colour palette was chosen based on the real brand identity of the UI. In addition to that, some lighter and darker colour tones are added to the main colours as shown in figure (15). That was to enhance the brand identity of the mobile app and help users link it to “Otlob”.
Figure 15, Colour palette used in the researcher’s flat illustrations (Source : author) The researcher made flat illustrations based on a hero character who uses “Otlob" mobile app and enjoys its easy benefits. All illustrations are made from simple and flat geometric shapes, with solid vibrant colours and some tonal shadows. Colour palette was chosen based on the real brand identity of the UI. In addition to that, some lighter and darker colour tones are added to the main colours as shown in figure (15). That was to enhance the brand identity of the mobile app and help users link it to “Otlob”.
Figure 19, a visualization for the three storytelling flat illustrations on Otlob app’s on boarding screens (Source : author) The illustrations were made digitally using Adobe computer softwares. First, tl researcher made the outlined sketches on Adobe Photoshop. Then, final illustratio: have been coloured and finalized as vector layers on Adobe Illustrator program.
Figure 19, a visualization for the three storytelling flat illustrations on Otlob app’s on boarding screens (Source : author) The illustrations were made digitally using Adobe computer softwares. First, tl researcher made the outlined sketches on Adobe Photoshop. Then, final illustratio: have been coloured and finalized as vector layers on Adobe Illustrator program.
Related topics:
Graphic DesignUser Interface DesignDigital Illustration
580 California St., Suite 400
San Francisco, CA, 94104
© 2025 Academia. All rights reserved