UI ideas

[sindresorhus]

Now that the app is almost feature complete, I'd like to explore some UI ideas. The app honestly looks a bit boring.

Comments on the ideas here and new ideas more than welcome!

Use comment reactions if you like/dislike an idea.

[sindresorhus]

We could give it some retro style, like the icon:

Would be cool to have some kind of animation with the rainbow lines after dropping a video file.

[sindresorhus]

Animate between the Gifski rainbow colors during the conversion:

[kornelski]

Showing currently encoded frame (effectively playing in slow-mo) is possible.

[kornelski]

the ✔️ checkmark at the end is meh. Maybe replace it with a proxy icon for the encoded file, so people can drag it directly from the app, without having to dig it out in Finder?

[sindresorhus]

the ✔️ checkmark at the end is meh. Maybe replace it with a proxy icon for the encoded file, so people can drag it directly from the app, without having to dig it out in Finder?

I agree the checkmark is meh. Not sure whether we should have a proxy icon or just a button to reveal the file in Finder.

[sindresorhus]

Showing currently encoded frame (effectively playing in slow-mo) is possible.

How do you imagine we would show the actual progress of the conversion with this?

Probably difficult, but would be cool to show the GIF frames in a flipbook style animation.

[kornelski]

I thought about revealing animation from inside the progress, pie-chart like. OR having faded-out (half bright) animation in the window background, with black circle background for the progress.

flipbook would be cool. A task for https://developer.apple.com/scenekit/ ?

[LarsJK]

Could fill the window with the current frame and and have a transparent pie-chart progress animation above. Like iOS app install/updates..

_{Sent with GitHawk}

[kornelski]

BTW, Valera has sent an updated icon. How do you like it?

[sindresorhus]

It's a good looking logo, but I don't think it's a good fit for a macOS app icon. The white G is IMHO too noisy.

[briankerr]

First off, cool app!

I found the scale slider hard to use. I was trying to take a video 3520 pixels wide down to 880 pixels wide (1/4th the size) and couldn't get the slider to land on 880. I ended up getting close enough to 880 pixels where you couldn't tell that it was off a little.

An example:

Maybe you could implement something like what Preview.app does and give the option to reduce the size by percentages rather than pixels? Or some shortcut to put the slider at 1/4th, 1/2th, 3/4th?

[jasonlong]

Big fan of Gifski! Here's a quick concept that came to mind since, as @kornelski mentioned, the current frame could be shown.

[sindresorhus]

I found the scale slider hard to use. I was trying to take a video 3520 pixels wide down to 880 pixels wide (1/4th the size) and couldn't get the slider to land on 880. I ended up getting close enough to 880 pixels where you couldn't tell that it was off a little.

Yes, I agree, and I've gotten feedback elsewhere about this too. I'm open to suggestions. I would prefer not having to introduce a text field for this. Maybe just limit the steps to widths of even numbers?

Maybe you could implement something like what Preview.app does and give the option to reduce the size by percentages rather than pixels?

I honestly never thought of this use-case of having an exact percentage of the original size. We could maybe show the percentage in addition to the dimensions.

[sindresorhus]

I like the idea of showing the GIF frames as they're being processed. @jasonlong's proposal looks very good. Anyone else wanna try some variations of this?

[kornelski]

For the slider, I suggest adding ticks at positions that are a union of these sets:

• 1/nth of the input size: 1/2, 1/3, 1/4, 1/5, …, etc.
• a predefined list of common sizes: 960, 800, 640, 500, 480, 320, 256, 200, 160, 128, 80, 64

AFAIK Cocoa doesn't support arbitrary tick positions, but the slider doesn't have to be linear.

The reasoning behind it is that you either just want to make it smaller (and 1/nth scale looks the best) or have it fit some predefined size.

[valeranazarov]

Hi all! Here are some more variations of the app icon. Maybe you'll like one of them. Also, I created some sketches of app UI and loading animations. But before I'll show it, I need to understand what kind of style to use (based on the app icon).

[valeranazarov]

Aaaaand four more

[sindresorhus]

@valeranazarov Sorry for never getting back to you. For a long while, I was too busy to work on Gifski. I'm getting back to it now though. All these icons look amazing. It's hard to pick!!

The icons with a play icon (3, 4, 6, 7) makes it seem like Gifski is a media player, not converter, so I don't think they'll fit.

My current favorite is 9, but I also like 5.

Would you be able to send me all of them? So I can try them out on my Dock. Makes it easier to evaluate.

@kornelski @boyvanamstel @sunshinejr Any opinions?

[sunshinejr]

9 looks awesome! I feel like it finally adds some flavor to the icon. While 5 is good-looking as well, it's just there, doesn't stand out to me.

[kornelski]

I like 11 over 9, since the font is more interesting, and it keeps the round G.

[sindresorhus]

I like 11 over 9, since the font is more interesting, and it keeps the round G.

I find the 9 font more interested and more retro, so I guess that's subjective.

[sindresorhus]

@valeranazarov Would you be able to try a version of 9 without the Gifski text. You should generally not have readable text in app icons.

[boyvanamstel]

Awesome icons. Really like the neon vibe. 👌

I like 2, 5 and 11.

[kornelski]

You should generally not have readable text in app icons.

Good point. So maybe leave the distinctive round G only?

[sindresorhus]

Good point. So maybe leave the distinctive round G only?

Yeah, that could work. Would be good to see a variation with that too.

[moonou]

Thank you create this project, I use it to made gif from video, it very helps for me. but when convert finishes, the window can't back to edit again, I think maybe add something interaction will yield user can edit again. because I think have some user is converted multiple ranges to gif from video, not just one.

[sindresorhus]

@moonou ➡️ https://github.com/sindresorhus/Gifski/issues/112

[lnfnunes]

Like 5

[sindresorhus]

The next macOS version will require a new icon style, more like iOS:

[janbrasna]

While I love ❤️ … love! the proposed @valeranazarov's VHS icons, I'm not sure they'd fit well as an app icon per se in the Dock, now w/ macOS 11 styling mentioned above. I can imagine they'd be totally awesome as a kind of banner/branding image for appstore splash images, repo readme etc., used in hi-res…

Nonetheless as a sole app icon, I'd go for the current neon rainbow, in a squircle and be done w/ it…

(Or, the original @valeranazarov artwork for ImageOptim/gifski website has the right proportions, right? ;D…)

… j/k … but maybe w/o the wordmark, the metaphor of this vintage telly displaying the rainbow might a) be still relevant to the project, b) be a good base shape for the Big Sur icon HIGs … even if not exactly neumorphic TBH;)

[janbrasna]

(speaking of the icon shape… it's sad we're losing the circular progress design sindresorhus/DockProgress#circle possibility for these macOS11–like icons 😭 — is there a new pattern emerging for those blocky icons out there yet?)

[sindresorhus]

(speaking of the icon shape… it's sad we're losing the circular progress design sindresorhus/DockProgress#circle possibility for these macOS11–like icons 😭 — is there a new pattern emerging for those blocky icons out there yet?)

We can still have that. Someone just needs to fix https://github.com/sindresorhus/DockProgress/issues/11 first.

[sindresorhus]

I have added a Big Sur style icon now. It's not final, but it's good enough until Valera has time to help out again.