Thread Rating:
  • 1 Vote(s) - 5 Average
  • 1
  • 2
  • 3
  • 4
  • 5
SL2 interactive map construction log
#6
Day 4

Yesterday i said i finished the wireframe.

But that was the wireframe for the desktop !
Now i present you the wireframe FOR MOBILE USERS !

[Image: image.png]

The functionalities are the same, but interaction and format is different to make it more pratical for mobile users.

[Image: image.png]

Korvara and Great Six are put in vertical rather than horizontaly for mobile.
THe nav bar have a change as well, where the menu is in a burger menu now. You can see the patern to see how the interaction work.

There's a user icon as well, replacing the login bar.
Clicking on it while offline will ask the user to login. When logged on, it will take to the user profile.

[Image: image.png]

User profile change in mobile, where cards are more compact and brief for the page to be more easy to be read.
Just like desktop, cards can be scroll in the horizontal.

[Image: image.png]

When selection Korvara or Great six, displaying the whole continent map would be hard to read for mobile.
So I rather have a list of all nations/regions to be selected.
After this :

[Image: image.png]

The map of the selected region/nation will show and can be dragged around to explore it. Lore pin and places can still be clicked for more details just like desktop.
An action bar appears in the bottom. The right icon to add a creature entry, the left icon to add a lore entry.

[Image: image.png]

the central icon makes this pop up appear so the user can change the map quicker. By selecting the continent then the nation or region.

The two icons above the map are for the lists. Creature and lore.

[Image: image.png]

Clicking on one will open a slide displaying a list of all available entries for the current map.

[Image: image.png]

The creation forms doesn't have most change except to be more easy to use for mobile user. Cards are compacted just like the user profile.

[Image: image.png]

Articles display format are changed for mobile as well. The red cross present for the user to quit at any time.

[Image: image.png]

Last part of this wireframe is on the search list.
As you can see, the cards are also tiny here. The search options are available upon clicking the icon on the top, sliding the options on the sides. The result of the list will change upon changing the parameters.


And that's all for today.
Desktop and mobile wireframe are done.
the schema for my backend needs to be revisited, i will do so with the help of one of my teacher. We have set a meeting for tommorow morning.

With all done on that side, i will be able to start on designing the graphics for the website very soon, hopefully starting day 5.
Reply


Messages In This Thread
SL2 interactive map construction log - by lalchi - 09-05-2024, 04:16 PM
RE: SL2 interactive map construction log - by lalchi - 09-10-2024, 07:50 PM

Forum Jump:


Users browsing this thread: 1 Guest(s)
Sigrogana Legend 2 Discord