search

facyber / pontoon

In-place localization tool
https://pontoon.mozilla.org/
BSD 3-Clause "New" or "Revised" License
0 stars 0 forks source link

Mockups Timeline #1

Open facyber opened 7 years ago

facyber commented 7 years ago

We will use this issue for tracking our mockups.

facyber commented 7 years ago

The Original Mockup

This is the original mockup from my proposal. The idea behind this mockup is to move Translation Editor on the left side to be expandable onclick and on it's place on the right side would come new Screenshot Window with screenshots of the originals and translated strings along side with the gallery that would allow easier string navigation. Additional menu was designed to keep additional filtering options if there is need for them.

the original mockup The Original Mockup

facyber commented 7 years ago

Mockup version 2

This was the second idea for the new Translation UI. It's similar to the original one expect the Translation Editor is now fixed to the top of the left side instead to act as expandable element as it is in the original mockup.

mockup_v2 Mockup v2

facyber commented 7 years ago

Mockup version 3

In this mockup, Filter Menu would be transformed into additional panel that would be expandable and visible all the time. We agreed that there should be only two modes of Filter Menu panel, Minimal and Extended mode.

Minimal mode

Minimal mode contains almost all functions (filters) from actual Filter Menu. With this idea, you could easily choose the filters you want and it does looks nicer. Cons of this mockup is that we are losing the Author filter as its icons would be too small.

minimal mockup editor

Extended mode

Extended mode would be very similar to the current Filter Menu, expect it would contain Author filters and Screenshots gallery that would act as filter.

maximal mockup editor

Translation Editor

Translation editor would split into two parts, one for the original string and input field, second for the original and translated screenshots. Cons of this idea is that on one side you would have the originals string on the top and translated on the bottom, but in Screenshot window they would be arranged left to right and it could be confusing.

facyber commented 7 years ago

Minimal Filter Menu version 2 proposal

Skype have nice looking and minimalist sidebar menu and we could adapt our current mimimalist idea to this one. Our icons could be (but not required) a bit bigger and aligned to the center. With this idea we could make Minimal Filter panel wider and include Author filters and maybe even Screenshots.

imgpsh_fullsize

facyber commented 7 years ago

Minimal Filter Menu version 2

This mockup is focusing on the Filter menu only. It represent adaptation of the Skype's sidebar to the Filter menu. It includes all filters from current Filter menu and Author filters also (It wasn't included in previous mockups). Icons are aligned to the center, same as the icons, width of the menu is not too big, it fits perfectly. We agreed that this is close the final design of the Minimal Filter Menu, we still need to check if gallery screenshots would fit in minimal design.

minimal_mockup_v3

facyber commented 7 years ago

Revolutionary Mockup version 1

This would be the first revolutionary mockup, mockup that should present something specific/special about new design. I would say all this is still sort of a raw idea as I am sure while we try to implement new design we will come up with something new and better.

Translation Editor

Translation editor is moved in the middle along with the Additional Tabs and the plan is to stay in the middle, fixed in order to get more space for the Screenshots window on the right side.

Screenshots windows

These Screenshots windows are more oriented to some sort of navigation between strings. On the top side you have the original and translated screenshots with opacity 100%, and behind them are either previous or next pictures with lower opacity, so it isn't very productive but still it leads to something new and good. On the bottom is Gallery. By moving it to the right I wanted to get closer Gallery to the Editor Screenshots as by the logic they should be close to each other, but we both agreed it fits better in the Filter Menu so this Gallery idea drops out.

revolutionary_mockup_v1

facyber commented 7 years ago

Revolutionary Mockup version 2

This idea is sort of upgrade of the version 1, nevermind it looks completely different. In this mockup I presented full idea of Editor Screenshots, what was in my mind. Now you have both previous and next pictures, Translation Editor is now left-right oriented which fits the pictures: on the left are the original screenshot and string to translate, on the right side are translated screenshot and input field for translation.

Cons of this mockup would be implementing it on the lower screen resolution. I think on the lower resolution, Screenshot window would be smaller and would contain only the current screenshots, not the previous and the next one, but that's just my opinion for now.

Note: Nice feature to have would be option to change the screenshot locale, so if I want to compare my translation to some similar language, I would choose that language instead the english. This feature is something similar to LOCALES feature, that shows you all translation of that string. That is good feature for text based translation, but now we are working on screenshot based UI and we should have some similar feature for it.

revolutionary_mockup_v2

alex-mayorga commented 7 years ago

¡Hola @facyber!

These look great!

I for one would be interested on how these would look in 1024x768 or lower for example.

¡Gracias!

facyber commented 7 years ago

Hola @alex-mayorga !

Right now I'm working and testing in 1366x768 and 1920x1080 resolutions, but I think I can make few screenshots of lower resolution after I finish Filter menu which will be I hope finished by the end of the month.

Cheers and thank you very much!