ML
    • Recent
    • Categories
    • Tags
    • Popular
    • Users
    • Groups
    • Register
    • Login

    Web UI design tools

    Developer Discussion
    css ui design
    6
    17
    1.2k
    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.
    • 1
      1337
      last edited by 1337

      https://youtu.be/S6-q5BheEYU?t=63
      As I understand the guy is using a software called Sketch to modify UI elements.
      It's macOS only though.

      Is there something similar for linux or windows?

      Emad RE scottalanmillerS 2 Replies Last reply Reply Quote 1
      • Emad RE
        Emad R @1337
        last edited by

        @Pete-S said in Web UI design tools:

        https://youtu.be/S6-q5BheEYU?t=63
        As I understand the guy is using a software called Sketch to modify UI elements.
        It's macOS only though.

        Is there something similar for linux or windows?

        Oh we use that thing alot in my company, and we are the leading Drupal company in the entire MENA

        1 Reply Last reply Reply Quote 1
        • stacksofplatesS
          stacksofplates
          last edited by

          I've always stayed away from these types of tools. They always add way more complexity/elements than are needed. Sticking with Frameworks like CSS Grid, Flexbox, Zurb, Bootstrap, etc and theming from those are cleaner IMO.

          scottalanmillerS Emad RE 2 Replies Last reply Reply Quote 2
          • scottalanmillerS
            scottalanmiller @stacksofplates
            last edited by

            @stacksofplates said in Web UI design tools:

            I've always stayed away from these types of tools. They always add way more complexity/elements than are needed. Sticking with Frameworks like CSS Grid, Flexbox, Zurb, Bootstrap, etc and theming from those are cleaner IMO.

            Me too. Not totally opposed to them, but rarely decide that I want to use them. Having a good one available would be nice, though. Especially on Linux.

            1 Reply Last reply Reply Quote 0
            • scottalanmillerS
              scottalanmiller @1337
              last edited by

              @Pete-S what is the exact intended use case for this? Sketch can be used in several different ways, and I don't want to recommend something (or suggest something, I'm in no position to recommend a tool of this nature as this isn't in my skill scope) that does the wrong feature set.

              1 1 Reply Last reply Reply Quote 0
              • 1
                1337 @scottalanmiller
                last edited by

                @scottalanmiller To test out different designs and tweak them visually - instead of hacking css directly. It looked easy in the vid above.

                1 1 Reply Last reply Reply Quote 0
                • 1
                  1337 @1337
                  last edited by

                  I also kind of assumed that Sketch would work with the CSS directly.

                  scottalanmillerS D 2 Replies Last reply Reply Quote 0
                  • scottalanmillerS
                    scottalanmiller @1337
                    last edited by

                    @Pete-S said in Web UI design tools:

                    I also kind of assumed that Sketch would work with the CSS directly.

                    That would be cool. But as CSS can be automatically generated and doesn't itself contain the components, I'm not sure what Sketch would be doing.

                    1 Reply Last reply Reply Quote 0
                    • 1
                      1337
                      last edited by 1337

                      OK, after some searching I found that the equivalent tool for windows is Adobe XD. XD is cross platform but it's a vector based UI designer tool, like Sketch.

                      It seems like since they are both general tools for UI design (apps, web, whatever) they are not specifically made for editing CSS, which I had hoped. Still useful though to get the design visually done, before working on the CSS.

                      scottalanmillerS 1 Reply Last reply Reply Quote 0
                      • scottalanmillerS
                        scottalanmiller @1337
                        last edited by

                        @Pete-S said in Web UI design tools:

                        OK, after some searching I found that the equivalent tool for windows is Adobe XD. XD is cross platform but it's a vector based UI designer tool, like Sketch.

                        It seems like since they are both general tools for UI design (apps, web, whatever) they are not specifically made for editing CSS, which I had hoped. Still useful though to get the design visually done, before working on the CSS.

                        Vector tools means that it is drawing app, which is for artists to envision an interface. But useless for making the interface itself. So for that, which is what I was wondering, Inkscape is the common choice.

                        1 Reply Last reply Reply Quote 0
                        • D
                          dave_c @1337
                          last edited by

                          @Pete-S
                          I'm not sure of the generated CSS quality. I mean, tools can generate CSS but it is usually "machine CSS", not something intended to be easily modifiable by the developer.
                          I'm playing with Pinegrow, working directly on the HTML/CSS. I like it a lot.

                          scottalanmillerS 1 Reply Last reply Reply Quote 0
                          • scottalanmillerS
                            scottalanmiller @dave_c
                            last edited by

                            @dave_c said in Web UI design tools:

                            I'm playing with Pinegrow, working directly on the HTML/CSS. I like it a lot.

                            Not too expensive. What are you making with it?

                            D 1 Reply Last reply Reply Quote 0
                            • D
                              dave_c @scottalanmiller
                              last edited by

                              @scottalanmiller
                              We are developing an Student information System for a customer. Pinegrow + VS Code are a nice combination

                              jmooreJ 1 Reply Last reply Reply Quote 1
                              • Emad RE
                                Emad R @stacksofplates
                                last edited by

                                @stacksofplates said in Web UI design tools:

                                I've always stayed away from these types of tools. They always add way more complexity/elements than are needed. Sticking with Frameworks like CSS Grid, Flexbox, Zurb, Bootstrap, etc and theming from those are cleaner IMO.

                                I think when you have clients and you wish to work with regarding the design and prototyping, you can use those tools to give them power to view and edit better . thats what i understood.

                                1 Reply Last reply Reply Quote 0
                                • jmooreJ
                                  jmoore @dave_c
                                  last edited by

                                  @dave_c Just looked at Pinegrow and I think its interesting. Will try it out eventually.

                                  D 1 Reply Last reply Reply Quote 0
                                  • D
                                    dave_c @jmoore
                                    last edited by

                                    @jmoore
                                    I am not a designer, I am a programmer. But when doing web based software I like to see what I am coding while I am coding it. Pinegrow is wonderful for that. You have access to the full power of HTML & CSS
                                    And it is great if you use Bootstrap or Foundation because it has full support for them. I prefer Bulma, and it works well with it because Pinegrow is a general purpose tool.
                                    I will stop now, as I feel like I am selling something

                                    jmooreJ 1 Reply Last reply Reply Quote 0
                                    • jmooreJ
                                      jmoore @dave_c
                                      last edited by

                                      @dave_c lol, thanks for the insight though. I love a good tool

                                      1 Reply Last reply Reply Quote 0
                                      • 1 / 1
                                      • First post
                                        Last post