top of page

Brooklyn Pizza - Responsive landing page

Responsive landing page for "Brooklyn Pizza" restaurant.

gives a positive first impression and relevant details

Tools used:  Adobe XD , Photoshop

Web 1920 – 4.jpg
Anchor 1

The Mission

Presenting the brand

Present the brand and its products on the best side

Providing information

To provide information on different branches and show the restaurant menu

links to the branches sites

direct links to the customer’s local restaurant for ordering a delivery

Responsive

Making a responsive page that is available on desktop and mobile view

Anchor 2

The Web Solution

Links to the branches sites

& info about the brand

Because of different owners Issues,
each branch has its own order platform.

The information about the brand and the branches is displayed effectively, as this is what users will mostly be looking for.

Presenting the brand

As the users start to scroll down they can see a gallery of the brand and the products.

The pictures present the restaurant’s atmosphere and the unique vibe of "Brooklyn Pizza".

menu on desktop.gif

Interactive menu

​For the user’s convenience, I designed an interactive menu that shows the different toppings with an adaptive image of the pizza itself.

Anchor 3

After I designed the interactive menu for the desktop,

I needed to optimise it for mobile browsers.

displaying lots of details and different categories with the adaptive image of the pizza works on the big screen but

how can all of this be displayed on a smaller screen?

The Mobile Challenge

Anchor 4

The Mobile Solution

Branches info and links

​For the mobile view, I changed the way I communicate with the users. Mobile users mostly want to do things in the fastest possible way, unlike desktop users that generally want to invest more time informing themselves about the brand.

For that reason, I choose to omit the brand info and leave only information about the restaurants and a quick link for orders.

Scrolling images

The scrolling gallery remains the same as the desktop view.
Easy to operate from mobiles.

A scrolling menu by categories

By designing a scrolling menu and the option to filter categories, I succeeded in keeping all the menu details on one screen.

 

The users can easily choose the type of toppings they want to get more info about them, and even see how they look on the pizza.

menu on mobile.gif
Anchor 5

The Design

​I choose to design the website with the same aesthetic look as the brand branches.

Each branch have a unique vibe with different colors

#00429A

#F5F5F5

#EFC32D

#F9E5A1

#EFC2C0

#D53831

Anchor 6

The Result

Desktop view

Mobile view

bottom of page