Forum
    • Categories
    • Register
    • Login

    VST/plugin GUI design + launch graphics — ads, motion, web

    Scheduled Pinned Locked Moved General Questions
    29 Posts 5 Posters 4.4k Views
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • dannytaurusD
      dannytaurus @lalalandsynth
      last edited by

      @lalalandsynth Yeah, really like that! 👏

      HISE dev latest / super.engineering + Claude Fable / Figma + Affinity
      Meat Beats: https://meatbeats.com
      Klippr Video: https://klippr.video

      1 Reply Last reply Reply Quote 0
      • lalalandsynthL
        lalalandsynth
        last edited by lalalandsynth

        Here's another UI concept, this time exploring a modern additive synthesizer.

        This one is built entirely in Figma, so it's a fully vector-based interface.
        Knobs are made with https://rox-knob-builder-for-hise.netlify.app/ courtesy of @Chazrox

        The design is completely modular, making it easy to adapt layouts, swap modules, or reuse components for different plugins while keeping a consistent visual language.

        As always, if anyone is looking for GUI design for a HISE or JUCE project, or just wants to discuss ideas for a particular style, feel free to get in touch.

        Made in Figma + Rox-Knobbuilder

        Harmonic Plane

        Main Additive tweak.png

        Harmonic Plane DAW

        Additive DAW.png

        Harmonic Plane AD 16:9

        Plane Harmonic Wide.png

        Harmonic Plane AD 4:5

        Plane Harmonic Tall.png

        https://trikk.studio/
        https://www.instagram.com/trikkstudio/

        ChazroxC 1 Reply Last reply Reply Quote 4
        • ChazroxC
          Chazrox @lalalandsynth
          last edited by Chazrox

          @lalalandsynth Love it! Thanks for the shout out! 🙏 ⚡

          Have you seen the Button Designer?
          https://rox-button-designer-for-hise.netlify.app/

          lalalandsynthL 1 Reply Last reply Reply Quote 2
          • lalalandsynthL
            lalalandsynth @Chazrox
            last edited by

            @Chazrox Yes, been using it, will show up in the next design :)

            https://trikk.studio/
            https://www.instagram.com/trikkstudio/

            1 Reply Last reply Reply Quote 2
            • lalalandsynthL
              lalalandsynth
              last edited by

              Here is the next one.

              A fictional Distortion unit, made in Figma so all colors can be changed and the UI can be adapted to a real plugin.

              Made in Figma + Rox-Knobbuilder

              SIGNAL SMELTER UI

              SMALLER FORUM SMELTER.png

              SIGNAL SMELTER DAW

              Smalter DAW DAW.png

              SIGNAL SMELTER 16:9

              Smalter Wide.png

              SIGNAL SMELTER 4:5

              Smalter HI.png

              https://trikk.studio/
              https://www.instagram.com/trikkstudio/

              ChazroxC 1 Reply Last reply Reply Quote 3
              • ChazroxC
                Chazrox @lalalandsynth
                last edited by

                @lalalandsynth Nice!

                1 Reply Last reply Reply Quote 1
                • lalalandsynthL
                  lalalandsynth
                  last edited by lalalandsynth

                  I am on a roll these days :)

                  Keep in mind that all designs are made with a series of plugins in mind, so I think of each design as a brand. All designs and styles are available so if anyone likes a style and wants to adapt it to their line or individual plugins feel free to get in touch.

                  Any design can also be made in 3D and animated for ads.

                  For this particular design I wanted to make something minimal and maintain some empty space, while bending some rules.

                  So this fantasy brand is Sonicraft - Clarity Series.

                  Made in Figma + Rox-Knobbuilder

                  Clarity Limiter UI

                  Clarity.png

                  Clarity Limiter DAW

                  Clarity DAW.png

                  Clarity Limiter 16:9

                  Clarity Wide.png

                  Clarity Limiter 4:5

                  Ad long.png

                  Clarity ALT UI

                  Clarity ALT VERSION.png

                  https://trikk.studio/
                  https://www.instagram.com/trikkstudio/

                  ChazroxC dannytaurusD 2 Replies Last reply Reply Quote 0
                  • ChazroxC
                    Chazrox @lalalandsynth
                    last edited by

                    @lalalandsynth You're killin it with these looks. 🔥

                    1 Reply Last reply Reply Quote 1
                    • dannytaurusD
                      dannytaurus @lalalandsynth
                      last edited by dannytaurus

                      @lalalandsynth What kind of cost are we looking at for one of these looks?

                      Pull it from public display, rework it for my specific plugin, then deliver the individual assets, various mockups and 3D source files?

                      Ballpark - is it ££ hundreds, £££ thousands, or ££££ tens of thousands?

                      HISE dev latest / super.engineering + Claude Fable / Figma + Affinity
                      Meat Beats: https://meatbeats.com
                      Klippr Video: https://klippr.video

                      lalalandsynthL 1 Reply Last reply Reply Quote 0
                      • lalalandsynthL
                        lalalandsynth @dannytaurus
                        last edited by

                        @dannytaurus send me pm and we can discuss your particular project as it varies quite a lot. :)

                        https://trikk.studio/
                        https://www.instagram.com/trikkstudio/

                        1 Reply Last reply Reply Quote 1
                        • lalalandsynthL
                          lalalandsynth
                          last edited by lalalandsynth

                          One UI a day keeps the tinnitus away !

                          Momentum - Multi Tap delay, again I am thinking of a series of processors for a fictional brand.

                          Bit bored of Figma for now , next one will be full 3D.

                          Special offer, if anyone wants a redesign of a fully developed plugin I might want to do that next ? If release is planned and its locked in I would be willing to have a look as my next UI project ? ... maybe ?

                          Momentum UI

                          MOMENTUM FINAL.png

                          Momentum DAW

                          Momentum DAW.png

                          Momentum HISE Paint Routines

                          Momentum.gif

                          Momentum 16:9

                          Momentum wide.png

                          Momentum 4:5

                          Momentum hi.png

                          https://trikk.studio/
                          https://www.instagram.com/trikkstudio/

                          ChazroxC B 2 Replies Last reply Reply Quote 4
                          • ChazroxC
                            Chazrox @lalalandsynth
                            last edited by

                            @lalalandsynth Cleeeaaaan.

                            1 Reply Last reply Reply Quote 1
                            • B
                              Bart @lalalandsynth
                              last edited by Bart

                              @lalalandsynth

                              Great design styles 👏🏻

                              Are you plucking these from your imagination, or getting style inspirations from somewhere?

                              lalalandsynthL 1 Reply Last reply Reply Quote 0
                              • lalalandsynthL
                                lalalandsynth @Bart
                                last edited by

                                @Bart I get inspiration from everywhere, having said that I have a massive PureRef file with all kinds of designs.

                                https://trikk.studio/
                                https://www.instagram.com/trikkstudio/

                                1 Reply Last reply Reply Quote 0
                                • lalalandsynthL
                                  lalalandsynth
                                  last edited by

                                  Latest UI Experiment.

                                  VERY inspired by Neural DSP ;)

                                  This is a blend of Figma and Blender.
                                  Kind of a cross between steampunk and the 60´s , refined steampunk I guess you could say.

                                  Sundial UI

                                  SundialFINAL 3.png

                                  Sundial Standalone

                                  Sundial DAW.png

                                  Sundial 16:9 AD

                                  Sundial wide.png

                                  Sundial 4:5 AD

                                  Sundial Hi.png

                                  https://trikk.studio/
                                  https://www.instagram.com/trikkstudio/

                                  ChazroxC 1 Reply Last reply Reply Quote 8
                                  • ChazroxC
                                    Chazrox @lalalandsynth
                                    last edited by

                                    @lalalandsynth Beauty!

                                    1 Reply Last reply Reply Quote 2
                                    • lalalandsynthL
                                      lalalandsynth
                                      last edited by lalalandsynth

                                      Solune - Morph Engine.

                                      WebView experiment running in Hise.

                                      So I can see the webview being used for some isolated hero elements or something , this whole ui is made in webview and it has that annoying hand cursor, it seems i can connect the sliders and all that stuff but its a bit janky.

                                      Hand Cursor fix.

                                      html, body, * {
                                          cursor: default !important;
                                      }
                                      

                                      This would be a nice way to make UI´s if it had a better implementation, not sure if this is planned at all?

                                      Next test is GLSL something.
                                      After some glsl testing, this ui could be recreated with a combo of paint routines, some sprites and glsl

                                      Solune UI

                                      Cube-ezgif.com-optimize.gif

                                      Solune AD 4:5

                                      find the pusle.png

                                      https://trikk.studio/
                                      https://www.instagram.com/trikkstudio/

                                      ChazroxC 1 Reply Last reply Reply Quote 5
                                      • ChazroxC
                                        Chazrox @lalalandsynth
                                        last edited by

                                        @lalalandsynth You are very good sir. 🔥

                                        1 Reply Last reply Reply Quote 0
                                        • lalalandsynthL
                                          lalalandsynth
                                          last edited by

                                          I was not planning on making another one today as I am deep diving into glsl, but got an idea and had to flesh it out. 🥧

                                          So this is "KOMPRESS"

                                          Minimal with a central large knob, Figma design.

                                          This one uses quite a lot of blur for the glow on the black knob which is a HISE problem but since its stationary on the knob , I could move only the line indicator on the knob and just either print the blur or if keeping as vector see if I can get away with one blurred component?

                                          KOMPRESS UI

                                          KOMPRESS Final.png

                                          KOMPRESS DAW

                                          KOMPRESS DAW.png

                                          KOMPRESS D16:9

                                          Wide AD.png

                                          KOMPRESS 4:5

                                          Long ad.png

                                          https://trikk.studio/
                                          https://www.instagram.com/trikkstudio/

                                          1 Reply Last reply Reply Quote 2
                                          • lalalandsynthL
                                            lalalandsynth
                                            last edited by

                                            Here I am experimenting with Figma and Webview

                                            The idea is a moving field of hex cells with a lot of parameters.

                                            Main ones are the Cell fracture, Sparks, moving exclusion zones, Hotspots, orange comets, cyan frames that capture a bunch of cells, cell size.

                                            Spectrum is also done via webview.

                                            I am really hoping that Webview matures in Juce/Hise as its a great way to design any intricate moving graphics although at the moment its great for prototyping and I am exploring converting a design into GLSL ? If even possible.
                                            I gather that the current issues are platform compatibility, overall stability and sample accurate response, hopefully this will advance.

                                            HEX GRAIN UI

                                            Main hexgrain.png

                                            HEX GRAIN UI
                                            Hex 2.gif

                                            HEX GRAIN UI
                                            Hex 3.gif

                                            HEX GRAIN UI
                                            Hex 6.gif

                                            HEX GRAIN UI Controller
                                            Interface.png

                                            HEX GRAIN AD 4:5
                                            Texture In motion.png

                                            https://trikk.studio/
                                            https://www.instagram.com/trikkstudio/

                                            1 Reply Last reply Reply Quote 4
                                            • First post
                                              Last post

                                            23

                                            Online

                                            2.5k

                                            Users

                                            13.9k

                                            Topics

                                            121.1k

                                            Posts