Hello World !

I am Hasnia, Webdesigner.

After many years in the hospitality industry, I decided to switch careers to what I truly love: Art!
I'm happy to learn and update myself in the fields of web design, UI, and UX. I'm passionate about my work and do everything I can to complete my project on time, with simplicity and creativity.
Discover my work below... Some projects completed since the beginning of the year as part of my current training for the Adobe Illustrator course.

ILLUSTRATIONS

Bank of England
Rose des Vents
Pacman
Brussel 5G

ANIMATIONS

SHOES YOU
  1. Objective:
  2. Banner: skyscrapper.
  3. Size : 120x600 - duration 6 seconds.
  4. Choice : photos of the shoes.
  5. Application name of your choice.
  6. Background degraded from A9B7EE to #F0F2FC.
  7. 4 first animations, shoes.
  8. 5th animation, slogan.
  9. 6th animation : swing !
EMIRATES FLY
  1. Objective:
  2. Banner : ad 300x600 height.
  3. Advertisement for an airline offering flights to an island.
  4. The choice of airline is also up to you.
  5. Duration : 6/7 seconds.
  6. Synopsis : To be defined (by you).
  7. The banner must include the airline's logo.
  8. A CTA linking to its website and a text about the destination.
FRESCITO
  1. Objective:
  2. Creating a shape tween.
  3. Personal exercise.
SHOE IN THE AIR
  1. Objective:
  2. Swing.
  3. Personal exercise.

WEBSITES

EUROPEAN QUARTER - Prototype Figma

  1. Objective:
  2. The website must contain:
  3. 1 Logo.
  4. 1 neighborhood presentation page.
  5. 1 video and photos.
  6. Several pages or a one-pager including at least.
  7. 3 businesses that catch your eye in each category below:
  8. Interesting places.
  9. Nice or original restaurants.
  10. Nice or original bars.
  11. You will need to collect the following information:
  12. Name of the establishment.
  13. Address and opening hours.

CINEMATEK - Prototype Figma

  1. Objective:
  2. Complete redesign of the Cinematek website.
  3. Complete the HTML integration of the site.
  4. Keep the black and white of the graphic charter + a color of your choice.
  5. Use the ArcherSemibold font for the titles.
  6. You are free to choose the font for the text.
  7. Sections: Cinematek?, Practical information, program, newsletter, contact, footer.
  8. Insert a "Search" field.
  9. Search for illustration photos.
  10. Edit the photos using Photoshop.

MARS - Prototype Figma

  1. Objective:
  2. Create a one-page website on the theme of the planet Mars.
  3. The page must include navigation, a presentation section
    and an image of the red planet in the background.
  4. You are free to choose the font for the text.
  5. The colors to use are as follows : White/ Orange/ Black.
  6. You are free to add graphic elements to the background images.
  7. The images you choose must be retouched for color, tint, contrast.
  8. Also use color matching and/or Camera Raw.
  9. For the text: glow, shadows, and hovers must be created in HTML/CSS.

Vincent Van Gogh - Prototype Figma

  1. Objective:
  2. One-page website.
  3. A hero header (with or without nav)
  4. Logo on the hero header + exhibition name if applicable.
  5. A "Get your tickets" CTA.
  6. A "The Exhibition" section with the text available on the FTP.
  7. A "The Life of a Master" section with the text available on the FTP.
  8. An "Info & Reservations" section.
  9. A footer with partner logos.
  10. Illustrative images to accompany the website (your choice)
  11. Font, Color, Image choice: free.
  12. Please maintain graphic consistency throughout the site.

Fally Ipupa - Prototype Figma

  1. Objective:
  2. Create a one-page and a newsletter about an artist
    or band of your choice.
  3. The website will include the following sections:
  4. A hero header, a biography section for the artist/band.
  5. A “Music” section presenting the discography.
  6. A “Tour”, “Merch” section and a footer.
  7. The newsletter will include:
  8. The release date of the next album.
  9. One or more photos or visuals related to the artist.
  10. A short introductory text (3–4 lines maximum).
  11. A CTA (button or link) to the website.
  12. A design consistent with the website.

Nova E-Card - Prototype Figma

  1. Objective:
  2. Create a clear, modern, and immersive one-page
    that showcases virtual credit cards on mobile phones.
  3. Strong headline.
  4. Reassuring slogan/subtext.
  5. Main CTA: “Try now” or “Download the app.”
  6. A 3D smartphone mockup.
  7. Subtle 3D animation.
  8. Short presentation of the company/startup.
  9. Values: security, speed, innovation.
  10. 3/4 steps explanation with animation or icons.
  11. A carousel animation showing account creation.
  12. Minimalist form (Name, Email, Message).
  13. Contact information + social media icons.

Oishii Ramen - Prototype Figma

  1. Objective:
  2. Create a website for a restaurant specializing in ramen.
  3. You will need to create the website design and the
    restaurant's logo, consisting of a mascot and the name Oishii.
  4. The website must include a navigation bar with the
    following sections : MENU, ABOUT, CONTACT.
  5. As well as a hero header with the logo!
  6. A small gallery with photos of different ramen dishes.
  7. The MENU section must offer the option to download
    the menu for takeaway and dine-in.
  8. The icons for Facebook, TikTok, and Instagram.
  9. You are free to choose the photos and the graphic charter.
  10. For the "About" and "Contact" sections.

Cinéma/ Parallax - Prototype Figma

  1. Objective:
  2. Create a web page about the film of your choice with a modern layout and CSS animations.
  3. Design choices, Film choices and Color choices : Free.
  4. To create : Parallax Hero Header.
  5. A large background image (movie poster).
  6. A title and slogan on top.
  7. A parallax effect on scrolling.
  8. Video + animated images section :
  9. A embed a trailer as a video or via iframe (YouTube).
  10. Add 2-3 images from the video with CSS animation.
  11. Synopsis section with a text describing the film's story.
  12. Add original formatting (drop cap, typographic effect).
  13. Actors/Director Gallery:
  14. A gallery with photos and names of actors.
  15. An hover effect (zoom or overlay).
  16. A call-to-Action Section : A visible button and CSS animation.
  17. A footer with fictitious legal notices + social links.

FIGMA

    Weather Vue

  1. Subject :
    2.
  2. A real-time weather forecasts with a minimalist and attractive interface.
  3. Android users of all ages looking for a simple, fast, and clear.
  4. 1 Home screen: current weather, temperature, weather icon, city.
  5. 2 Forecast screen: hourly and 7-day weather in map or graphic format.
  6. 3 Settings screen: units, light/dark theme, city.
  7. Modern light theme, Colors: light blue, white, soft grey.
  8. Illustrated weather icons and legible typography (Roboto)
  9. Simple navigation between the three screens.
  10. Fast loading time with transition animation.

    Shoes You

  1. Subject :
    2.
  2. Shoe sales application ("sneakers")
  3. The name of the application is up to you.
  4. Dimensions: Android Large.
  5. Images: See the document on FTP.
  6. Colors: Your choice.
  7. Typography: Inter or Roboto.
  8. App name of your choice.
  9. Integrate a shoe icon/pictogram (created in Illustrator)

    Frescito

  1. Subject :
    2.
  2. Android prototype for online ice pop sales.
  3. App Purpose : To provide clear and reliable with a minimalist and attractive interface.
  4. Target Audience : Android users of all ages looking for a simple, fast, and visually clear.

    Food Lovers

  1. Subject :
    2.
  2. Cooking Recipe App.
  3. One personalized Recipe Book.
  4. Description: An app for saving, organizing, and viewing your favorite recipes.
  5. Screens : Home / Recipe List with search
  6. Recipe Details.
  7. Add / Edit a Recipe.
  8. Categories or Filters (e.g., main courses, desserts, vegetarian, etc.)
  9. User Profile / Preferences.

Thank you for your attention !

CONTACT ME
SEE MY CV

@2025 Designed by Hasnia Ghacham