LocationsShow Mockup Requirement



So, I have this concept called TwofoldLayout. The Desktop pages will be like a book: a content pane on the left, and a content pane on the right. For Mobile, it will be stacked: the Left content pane first, then scroll to thee the Right content pane. For Mobile, the UI will also be simplified and some elements won’t be available.

Let’s work on the page called CityShow (again, no need to exactly align everything, or worry about details at this time). This page displays interesting Markers in a city. The Left pane has the Google Map – you can just screenshot the map for now. The Right pane has a list of Markers, a list of Tags, then the Newsfeed.

A Marker has a square photo and the title underneath. The Marker kinda looks like any app icon on your phone. Some Markers will also be on the Map. An example of a Marker is: Maiko Sushi Lounge ( https://maikoaustin.com/ ). Another example of a Marker: Vulcan night club ( https://www.vulcanatx.com/ ).

Tags just have a label for now. Example tags: “restaurants”, “nightlife”, “attractions”, “galleries”.

Newsfeed consists of Newsitems, for now the only Newsitem we can see is an Article. It has a title and a subtitle, and a square picture if you want to add it. Don’t spend too much time on the Newsfeed, it’s already partially done.

I want to see an overall layout of this page. This is for Desktop only.

I like visible borders around significant elements. Few websites have this nowadays. Example (kind of): https://stackoverflow.com/collectives

Leave a Reply