Revamped UltraEdit Icons—Your Feedback Appreciated!

Revamped UltraEdit Icons—Your Feedback Appreciated!

269
Site AdminSite Admin
269

    19:48 - 18 days ago#1

    Overall, do you like the design direction proposed over the current icons?

    Total votes: 9
    9(100%)
    0(0%)

    Hello everyone. This is Tristan—marketing manager for UltraEdit. 

    As some of you may have noticed, the UltraEdit website has been given a refresh in early 2023. Apart from aesthetic reasons, this was executed because we wanted to streamline the website experience from downloading free trials, getting new updates, and finding relevant information about UE’s suite of products. Overall, we agreed that the site would benefit from a little facelift alongside the other layout changes you see now on the website. 

    We recently incorporated these design changes into the product as well—mainly to keep the brand and identity similar. We miscalculated the impact of these changes on the user experience. As with all major design changes, we were prepared to receive some criticism but as detailed in this forum post, it changed the way users viewed files thus impacting usability. 

    We take this feedback very seriously and we have discussed internally to revamp the current design style to address the UX issues. Please note that we are not reverting to the original design and do not plan to, instead we are suggesting a compromise that would hopefully achieve the look of modernity without sacrificing usability.

    This time around, however, we are involving the most important stakeholder, you, in the decision making process. Please see the following set of icons and let us know your thoughts.
    [+] See currently used icons


    Current icons for reference. The design direction was to modernize the classic icons—which was arguably achieved. But some of the user reports indicated that the colors were too powerful for desktop OS, the shape made it hard to view icons in succession, and overall made the impression that the design did not take into consideration how the product is used.
    Collection of New UE Icons.png (180.07KiB)
    Here are the proposed new icons. As you can see, the suggested icons bring back the circular logos and icons. The colors have also been toned down and given a slight gradient to improve overall visibility and contrast on your favorite OS.



    ABOVE: Additionally, one of the most prominent feedback we got was how jarring it was to look at the icons as the associated images for files opened by the editor. 


    As such, we have also created a new file association icon as shown above.
    Screenshot 2023-09-08 at 3.36.07 AM.png (500.04KiB)
    ABOVE: Here is an early preview of how that might look.
    (Note: This is using a prototype version of the file association icon. A cleaner more defined version will be used in the final version)



    Of course, an icon is the main identity of a brand and whatever we have on product should resonate with our website, but this time around the website will come second to the design found in-product. The above is the proposed main logo + logotype for UltraEdit editor in its dark and light mode variants.

    We have also updated marketing-specific assets to fit the new proposed design. Take a look at some of the revamped assets we plan to use on the website. Depending on the feedback we get on these, we may use them in products as well, but for now they are website and promotion channel-specific.

    Logo, Logotype, and Company Subtitle
    All Access - Bootstrap icons
    UltraCompare - Bootstrap icons
    UEStudio - Bootstrap icons
    UltraEdit - Bootstrap Icons

    Please reply under this thread any comments you may have regarding the proposed design. We appreciate any feedback as long as they are constructive. And don't forget to answer the poll so we get the general sentiment of everyone here. Thanks!

    All images used in the post is compiled here:
    https://drive.google.com/drive/folders/1DNpxxdanAq1FpSZ7Pb4RBl9KoSnqEwpy?usp=sharing
    Screenshot 2023-09-08 at 3.36.07 AM.png (500.04KiB)

    fgeurts
    1018
    Power UserPower User
    1018

      1:04 - 17 days ago#2

      To my eye  these icons look the best.

      Screenshot 2023-09-09 110239.png (65.85KiB)

      Screenshot 2023-09-09 110201.png (155KiB)

      Cheers,
      Frank

      Mofi
      6,574524
      Grand MasterGrand Master
      6,574524

        9:54 - 17 days ago#3

        I don't like the Bootstrap icons because of not containing the abbreviation of the application. A symbol with arrows, a ball pen or a pencil symbol has no relation to a specific application.

        I favor the round icons with UE, UES, UF, UC, UFTP with the additional black border. The black border is good on light background (white or light gray).

        It would be even better in my opinion if UE and UES in yellow circle with black border would be completely black without an lightning or shading effect, please see the attached images below.
        Collection of New UE Icons_true_colors.png (104.83KiB)
        Collection of icons with black UE and UES with true colors (6965 colors)
        Collection of New UE Icons_254_colors.png (46.78KiB)
        Collection of icons with black UE and UES with just 254 colors
        The second one with just 254 colors for all the symbols demonstrate that it is not necessary to have the icons in the executables and DLLs in true color. Palette based icons with 256 colors could be used too. That would reduce the size of the icons in the executables and libraries saving disk space and RAM on application running. The image with the 254 colors was created by using in my favorite image editor the command to reduce the colors to 256 with using the error diffusion reduction method which is usually the best for true color symbols with several thousands colors to just 256 colors (or less). Does anybody see the differences between the true color image with 6965 colors and the 254 colors image?

        The round UES icon could have a lightning effect on yellow background to bottom right "corner" as the UE icon has to top left "corner". That would look most likely better than the darkening effect to bottom right and would help to distinguish between UE and UES icon.

        The file association icons for UltraEdit and UEStudio are best with a blank white or yellow sheet with black border (for light theme) and around the black border a white border (for dark theme) and inside either the round UE and UES icon (256 colors) or there is inside the sheet just the abbreviation UE or UES in black (two color with white sheet or sixteen colors with yellow sheet). But I like for file associations also the square logos with rounded corner (phone style icons)  with the application abbreviation. They are very simple which is good for file association icons as these icons are on most Windows computers displayed quite small (16 x 16 or 24 x 24 or 32 x 32 depending on the DPI setting) in Windows File Explorer. The larger file association icons are displayed usually only on file being stored in one of the two desktop directories on the user's desktop or there is on the user's desktop a shortcut to a file of which file type is associated with UE or UES.

        UltraFTP could be abbreviated also with UT instead of UFTP because of UFTP is too long for the small icons like 16 x 16 or 24 x 24. The larger icons of UltraFTP could have the abbreviation UFTP although I think UT would be also okay for the larger icons.
        Best regards from an UC/UE/UES for Windows user from Austria

        tsmith35
        22
        Basic UserBasic User
        22

          21:26 - 16 days ago#4

          Mofi, nice job on the 254 color icons. What app/method did you use? Looks very nice. Do the indexed icons retain their appearance across multiple platforms?

          I agree that the icons should have a border for contrast. Thanks for your help!

          Mofi
          6,574524
          Grand MasterGrand Master
          6,574524

            9:57 - 16 days ago#5

            @tsmith35 Many years ago I bought a big box of Jasc Paint Shop Pro 8 with a CD and two books which is still used by me for image editing. PSP8 offers three color reduction methods: similar colors usually best for photos, ordered dither which is just for a palette with standard colors, and error diffusion usually best for drawn images with lightning and shading and anti-alias effects.

            A Portable Network Graphics (PNG) image looks identical on all platforms independent on color type and bits per channel as a lossless compression method is used for the PNG image format. The referenced Wikipedia article has a table showing how much bits are needed per pixel depending on color type and bits per channel. A PNG with an index color palette with 256 colors needs 768 bytes for the RGB values of the 256 colors in the palette and one byte per pixel for the palette index. The raw data are additionally compressed using a lossless compression. There are special tools for PNG images which can produce smaller PNG files by changing the parameters of the compression algorithm like block split threshold and arrange the colors in the palette not according to their RGB values, but in an order resulting in an indexing of the pixels being best for the compression. I use free command line version of PNGOUT for PNG file size optimization.

            An ICO file respectively an ICO resource in a Windows executable or a Windows library is usually a collection of an image in multiple sizes in either BMP (uncompressed) or PNG (compressed) image format. All sizes of an image can have the same color depth but it is also possible to use different color depths. The sizes 16 x 16 and 24 x 24 are so much smaller in comparison to larger sizes like 96 x 96 or 128 x 128 that it is often enough using just 16 colors in a palette for the small sizes reducing the number of bits per pixel to just four making storage size of small images even smaller. Well, the usage of an indexed PNG image in an ICO resource or ICO file makes more sense for the larger sizes as that reduces file size in KB and not in range of just some bytes. Example: An image with 96 x 96 pixels with RGB value for each pixel requires 96 × 96 × 3 bytes = 27648 bytes on raw data (without header and transparency) while the same image with a 256 color palette requires 256 × 3 + 96 × 96 × 1 = 9984 bytes on raw data.
            Best regards from an UC/UE/UES for Windows user from Austria