Full Version: MoI UI redesign

Show messages:  1  2-21  22-41  42-50

New ones...




Capture d’écran 2014-02-23 à 22.43.51.png  Capture d’écran 2014-02-23 à 22.43.56.png 

---

Artistic exercise!

---

Hi Desudeus,

> I'm currently doing a "redesign" of MoI entirely (Icons + CSS)

Why?

I can understand customising toolbars but going to the level of actually changing the icons I don't understand.
It's nice to keep some standards with software reason being if you are helping someone and they have a different set of icons that's where you start fumbling around because of the visual differences then the student becomes the teacher ;)

I guess if it's not locked down someone will play with it.

-

---

@Pilou
Thanks

@Danny

Why?

Actually there's three reasons, the first one is that I use MoI every day (nearly) at work and it saves me a lot of time (it also means my company gain more money because I'm more efficient with it).
I use it currently for Rolex (preparing for Baselworld), from drawing watches in vectors for print materials to 3D modeling watch displays...

Second reason is that I'm a graphic designer, I like to tweak things, I like when things look good and are precise. MoI icons are great but there's room for improvement.
MoI 3D is very powerful but people see the UI and they often think it's not a powerful tool (colleagues have said that when I first introduced them to this software).

I'm not saying the UI is what makes a software "pro" or anything, it's juste a little "plus" that can make a difference for new users.

Third reason, MoI icons are pixel based and at some point in the future, Michael will need to make higher resolution icons for retina displays (that way it's already done).

(Fourth reason, is that I'm learning to use Sketch on mac, a vector drawing software and this is a nice exercise for it)

I'll keep this post up to date later on :)

---

Hi DesuDeus,

> Third reason, MoI icons are pixel based and at some point in the future, Michael will need
> to make higher resolution icons for retina displays (that way it's already done).

This particular one is actually already handled by the current bitmap icons, the way those currently work is that they're actually much larger than what is typically displayed at regular resolution and the images are shrunken down on demand. They can scale up quite a ways before there will be any bitmap stretching happening at all, so that part is all ready for a Retina display already actually.

Vector icons tend to be great for scaling up but cause new problems in the opposite direction of scaling down, when scaled down typically the linework becomes too large and things bleed into each other too much as compared to a bitmap shrink type method, bitmaps shrink in a lot more overall uniform way.

So as far as scaling goes, the current system of a high resolution bitmap is already the best method - it handles going up quite a ways in resolution and also handles going down as well all with the same mechanism.

Anyway, that's why I would not want to switch to vector icons - of course it's fine for the bitmap to be generated based on a vector drawing, but the actual UI itself is better off having a bitmap. The bitmaps should be a bit large though, the standard size for MoI is 64x64 pixels. The onscreen display of it on a regular non-Retina display will usually be more around 30 pixels or so, getting automatically shrunk down by the UI engine.

- Michael

---

@Michael

The icons are vectors but they're on a 64 pixel grid (that means they downscale perfectly)

I will export them as 64px PNG not as vector files :)

---

Hi DesuDeus,

> The icons are vectors but they're on a 64 pixel grid (that means they downscale perfectly)

Vectors by their nature just inherently do not downscale perfectly - it's because things like the stroke width do not stay exactly proportional to everything else when they are rendered at a small size.

It's just part of the nature of how vector drawings work that downscaling to a small size is problematic. Just basing them on a 64 pixel grid does not really change that...

The problem is not so apparent with very sparse lightweight drawings, it gets much worse when the icon becomes more complicated.

- Michael

---

I just need to adjust the line weight because they're a bit soft (not dark enough)

And yes they downscale nicely because the lines, borders and so on are snapped to adjacent pixels.




Capture d’écran 2014-02-24 à 11.48.43.PNG  Capture d’écran 2014-02-24 à 11.48.49.PNG  Capture d’écran 2014-02-24 à 11.50.11.PNG 

---

Tbh I wouldn't mind a grayscale version of the UI

---

Yes I plan to make two version, one grayscale and one dark with light icons (kinda like Cinema 4D or Photoshop when you set it to darker)

---

Michael ...

Just a comment about the UI. I suggest you continue with your path ... it is simple and it works well for me.
It is great that users can customize it for their own specific preferences.

I'm getting a feeling that another update to MoI ver 3 beta is coming soon. I look forward to it.

cheers,
eric

---

Hi DesuDeus,

> And yes they downscale nicely because the lines, borders and so on are snapped to adjacent pixels.

That will be ok for these very simple and sparse ones, but not for drawings that are more complex with some more details in them.

Again, the problem is that things like the stroke width on a shrunken down vector image does not really scale exactly in proportion to the vectors, and so if you have for example 2 parallel lines that are close to each other it's fairly easy for the strokes on each of those lines to collide into one another in a shrunken down version.

If you don't believe me, just try making an icon that has some close together lines in it like ones that are separated only by 1 or 2 pixels and then see how that shrinks down as vectors.

This is a longstanding problem in vector graphics in general, for fonts there is a highly complex "hinting" mechanism that is used that alters the vector paths by nudging things around by small amounts when things are shrunken down.

- Michael

---

Hi Michael;

Moi icons are very nice. Do you use special tool to make them?

Thanks
-sharif

---

Hi Sharif,

> Moi icons are very nice. Do you use special tool to make them?

Most were made with PaintShop Pro, a few are licensed icons and some use MoI screenshots as well.

- Michael

---

Hi Michael,

I think that using .svg icons is not bad idea. But it seems that MoI doesn't support them at this moment. Today I've tried to use both external svg icon file and Base64 encoded string, but everything I got is "image not found" sign. It's strange, because WebKit supports svg images. Check please, is image/svg+xml MIME type enabled?

---

Hi Max,

> I think that using .svg icons is not bad idea.

It would be ok for high resolutions screens, but a bad idea for lower resolution screens - as explained above vector drawings do not tend to shrink down as well as they enlarge.

It's best for the UI to use mechanisms that work on both low and high resolution screens, rather than only on things that work on high resolution screens alone.


> But it seems that MoI doesn't support them at this moment.

SVG is disabled in the WebKit build that MoI uses, because it bloats up the size of the web kit binaries by quite a bit.

- Michael

---

Hi Michael.

>>SVG is disabled in the WebKit build that MoI uses, because it bloats up the size of the web kit binaries by quite a bit.
Thank you for your answer.
So, in this case it's better to leave everything as is :)
Anyway we can use a high resolution icons for high resolution screens.

---

Hi Max,

> Anyway we can use a high resolution icons for high resolution screens.

That's what's happening already... The icons are quite a bit higher resolution (64x64 pixels) than what is typically displayed, the UI can already be increased in pixel size by quite a bit before there will be any actual stretching happening on the current icons.

Basically the current UI system already handles an increase in screen resolution very well, while at the same time handling lower resolution screens as well. It's just not something that needs to be messed with for this particular purpose because it's already doing that job.

- Michael

---

Hi Desudeus

I really like your icons.
Maybe its because i'm using a Mac as well or maybe its just a matter of aesthetic preference.

I'm not saying that the current icons are ugly! Actually, Moi has some of the best and most meaningful icons of any software i've ever used.

I will definitely try them once they are ready.

Dinos

---

Thanks Dinos

Yes I'm on a Mac too so I like pretty icons :D

Here's some progress for the dark UI (icons are not all done yet)

Fun fact, you can use the new icons on both dark and light UI :)

Dark UI

https://dl.dropboxusercontent.com/u/44982094/MoIUI/NewUI1.jpg

https://dl.dropboxusercontent.com/u/44982094/MoIUI/NewUI2.jpg


Old UI with old icons

https://dl.dropboxusercontent.com/u/44982094/MoIUI/OldUI.jpg

---

Show messages:  1  2-21  22-41  42-50