Pinetime OS - Designing an UI for the Pinetime!
#1
Wink 
Hello pinetime devs,
this is post is about a project that was taking shape on the Discord/Telegram group, but the need for a static reference
pushed me to write here in Pine64 forum.

After earlier contacts with Lup Yuen on Twitter, I started to ruminate and then to draw a possible UI for the Pinetime,
something suitable for its 240x320px pixel and the hardware feature.

There are some pictures of sketches in early February, but the place to see the UI take shape are the interactive prototypes:

Adobe XD prototype https://xd.adobe.com/view/45546e23-dcee-...f066-3365/
- Invision prototype https://projects.invisionapp.com/prototy...y/8cece8c3

Fonts
The UI use 2 fonts carefully selected across the one with open license:
- the Free Sans, a redesigned version of Helvetica, used mostly for content text
- the Share font, a narrow font used in label and system titles.

Other candidates were the 
- Free Mono (monospace)
- Lato
- Source Sans
- Oswald Heavy

UI structure
The UI is based on a dark background with a HomeWatch screen, 
and Springboard with all the apps and settings.

Gestures:
- (on HomeWatch), any click or swipe go to the Springboard
- (on Springboard), swipe from top to get to HomeWatch
- swiping from top exit the active app
- pushing the physical button exit the app

Stacks
Every app can be a 
- Single page, with vertical scrolling to see more content (there is a "HW acceleration" on this) or a
- Multi-page app, in this case it's composed by a stack of screens on the right: 
[EXAMPLE] If I have to setup a calendar, I may set Hour/minutes on page 1, date on page 2, and details on page 3.
An undo and a next/Set button helps me to move on the procedure. 
Swipe right and swipe left as a extra method to move in stacks of pages.

Comment
The OS UI actually inherit some useful tool from the Meego Harmattan experience, without being too gesture reliant. Most of navigation is still based on simple tap, and coloured buttons. (We need to verify how the detection of swipe will be on the hardware).

Finally, the UI is modular, made by blocks with spacers, and designed to lend itself to a replacement of the 2 fonts by the developers, with similar-sized characters. 
I will post more detail and some guideline at the next stage of works.


Giovanni  Sleepy
Minodesign
[url=https://twitter.com/MisterTechBlog][/url]


Attached Files
.jpg   HOME.jpg (Size: 20.9 KB / Downloads: 642)
.jpg   Settings – 1.jpg (Size: 31.29 KB / Downloads: 599)
.jpg   Settings.jpg (Size: 31.06 KB / Downloads: 565)
.jpg   Alarm.jpg (Size: 41.07 KB / Downloads: 573)
.jpg   Springboard.jpg (Size: 51.86 KB / Downloads: 596)
minodesign
Graphic designer, UI/UX designer, Frontend developer
Passionate on new devices
#2
Awesome! Now let us figure out how to implement this... Especially the fonts...

Sent from my Pixel 4 XL using Tapatalk
#3
I added also the link to the Invision prototype:
https://projects.invisionapp.com/prototy...y/beaf12b2

Invision simuate better gestures, that one will be a graphical variant on bright/fluo colours.
minodesign
Graphic designer, UI/UX designer, Frontend developer
Passionate on new devices


Possibly Related Threads…
Thread Author Replies Views Last Post
  PineTime at FOSDEM jmlich 5 628 02-07-2024, 11:48 PM
Last Post: tllim
  PineTime turns off when removed from cradle tynstar 0 186 01-31-2024, 11:57 AM
Last Post: tynstar
  PineTime and Amazfish on Ubuntu Touch jmlich 1 649 10-14-2023, 04:12 PM
Last Post: tllim
  PineTime is dead!! Markdanni123 12 13,518 09-18-2023, 10:17 PM
Last Post: ccchan234
  PineTime Sleep Tracking any_mouse 12 12,024 07-10-2023, 05:41 PM
Last Post: davidair
  PineTime Dead out of box? henkery 1 1,154 03-12-2023, 04:34 PM
Last Post: henkery
  Pinetime almost dead... only shows Infinitime logo. lightweight 8 6,518 02-11-2023, 09:30 AM
Last Post: alexmitroff
  PineTime beginner MV1791 2 2,093 01-09-2023, 11:52 PM
Last Post: Canyonless
  Struggling to detect Pinetime over bluetooth John45595 0 1,122 11-20-2022, 11:06 PM
Last Post: John45595
  PineTime Dev Kit for sale igor.bljahhin 2 3,133 10-19-2022, 05:34 AM
Last Post: peatord

Forum Jump:


Users browsing this thread: 1 Guest(s)