Difference between revisions of "TGM :: All Wireframes"

Revision as of 18:03, 6 February 2020

Models are types of things. Views are panels or parts of panels.

Models

• City
• Event
• Venue
• Account
• Gallery
• Video
• Report

Views

• accounts-show
• cities-index
• cities-show
• events-index (calendar, list)
• events-show
• galeries-new
• galleries-show = newsitems-gallery
• newsitems-index = newsfeed
• newsitems-gallery
• newsitems-video
• newsitems-report
• partials-share
• partials-galleries-multiupload
• reports-new
• reports-show
• sidemenu
• tags-index
• tags-cloud
• venues-index (list, map)
• venues-show
• videos-show = newsitem-video
• videos-new

terminology: newsfeed => newsitems terminology: list => index

I like minimal flat design. The separating element is empty space, not card (border+space+shadow).

Don't be afraid to use horizontal scroll! Obviously all the panels scroll vertically as expected, but I think multiple things inside a panel can scrol right, either automatically or via swipe. Example: tag cloud isn't limited to 100% width. The partials-share can scroll right, to reveal more friends to select.

accounts-show

• has profile pic, first / last name, email
• has submenu to add gallery, add video, add report
• depending on which submenu item selected, displays galleries-new, videos-new, or reports-new

cities-index

Each city has the icon to bookmark/save it, has thumbnail and name, and lists the number of (1) galleries, (2) videos, (3) reports.

cities-show

• has the hero image
• name of the city
• statistics: number of galleries, videos, reports
• submenu: newsfeed, venues, events. This determines what the rest of the panel displays: the newsfeed, the venues-index, or the events-index.

events-index

Either a list of a calendar. The calendar view is a calendar. In the list view, each item has:

• thumbnail
• title
• meta line: number of people going, date & time, venue link.

events-show

not yet specified

galleries-new

You see that in your account when you select, new gallery. The pieces are:

• Name of the gallery
• partials-share. Which friends are you sharing it with?
• select multiple photos from the phone's gallery - probably some Ionic work to make this happen
• button to Create

The photo gallery upload must allow user to select multiple photos. Pre-processing may be done with image magic (in the background?) before upload.

galleries-show

This is either equivalent to newsitems-gallery, or is a separate page, mockups have already been done for it.

newsitems-index

That's the newsfeed. It consists of items, an item can be one of three types: newsitems-gallery, newsitems-video, or newsitems-report.

newsitems-gallery

It has a card for the title & metaline, and has photos. Scroll right to see more photos.

newsitems-video

No scrolling right, but the video player has the button to go fullscreen - the player takes care of that. The newsitem has title and metaline (date, username)

newsitems-report

Show title, meta line (date, username), and subtitle which is a 3-line paragraph.

partials-share

Somehow, select from the list of friends, who to share a newsitem with.

partials-galleries-multiupload

This might need some in-depth Ionic work. Be able to select multiple; possibly resize photos before uploading, using image magic or something similar.

reports-new

Has inputs for: title, subtitle, and the textarea description. Can be put in a city, can be tagged.

reports-show

Title, meta line, subtitle, body (I call it description). This is pretty typical.

Here, the second newsitem is a newsitems-report: https://manager.piousbox.com/api/sites/view/piousbox.com.json

To show the report, use the reportname and this endpoint: https://manager.piousbox.com/api/reports/view/20200118-my-travel-blog.json

Generally, to view a report the endpoint will be

https://manager.piousbox.com/api/reports/view/<reportname>.json

You don't need to authenticate this yet. Some reports will be public unauthenticated.

sidemenu

• Homefeed
• Newsfeed
• Cities
• Tags
• <saved-tag-1>
• <saved-tag-2>
• <saved-city-1>
• ...
• Account

When a user clicks the bookmark icon, that tag / city / whatever gets added to his sidemenu.

tags-index

Not yet specified - I'm not sure how that would look. Tags are hierarchical, maybe with a limit of one or two levels of children.

The difference between tags-index and tags-cloud is that the index is a full page, whereas the cloud is embedded inside another panel, such as the tags of a report.

tags-cloud

This is an inline list of tags for a particular item. Probably makes sense to have it scroll right? Maybe show 5, and a button "show more". Not sure on details of this.

Tags could be: Salsa & Bachata, Late Bars, Clubs, EDM, Pub Crawl, Art Gallery, Tourist Attractions, BJJ Gyms, Language Cafe, Interesting, Competitive.

venues-index (list, map)

Both a list and a map - user selects how she views them. The map is just a map, a bunch of Ionic work possibly. Dialogs on markers are not yet specified. In a list, an item has:

• thumbnail, title
• star rating - out of 5 stars.
• stats: number of galleries, videos, reports there

venues-show

Not yet specified

videos-show = newsitem-video

A video has a title and meta line (date, username). An embedded video player, click to play.

videos-new

You see this in your account, when creating a video. Can share with friends via partials-share. Possibly embed ffmpeg for compressing in background before uploading - sounds like some Ionic work. From: https://pietropassarelli.com/ffmpeg-electron.html