Mockup Screens - bounswe/bounswe2024group11 GitHub Wiki

Desktop Screens

Log in

Register

Feed

Search

Account Settings

Profile

Create Post Modal

Edit Post Modal

Comments and Replies

Post Action Menu

Who Liked Modal

Followers & Following

Mobile Screens

Unavailable. See Design Decisions

Design Decisions

We have incorporated a mobile-first approach into the designs, although we haven't created mobile screens as of yet. We have organized our frames and screens so that customers and users can visualize what the mobile view would look like reasonably.

When switching to the mobile view, all of the content inside the central container remains intact, while the navigation bar gets smaller. The new post button looks very similar to the floating action buttons in most of the Google Products. Our central container is 440 ad 480 pt depending on the content. Everything in it can easily be displayed in 360px with necessary font-size and spacing adjustments. Therefore our desktop view is a superset of our mobile views.

We have also chosen aqua-lime colors for our app, we wanted to make users feel the freedom of a sea.