If you like DNray Forum, you can support it by - BTC: bc1qppjcl3c2cyjazy6lepmrv3fh6ke9mxs7zpfky0 , TRC20 and more...

 

Web Design Layout Tools

Started by ErichViell, Oct 03, 2023, 12:21 AM

Previous topic - Next topic

ErichViellTopic starter

Hello there!

For a while, I used to create layouts using Photoshop. However, as I shifted my focus to another field that was more financially rewarding, I fell behind the current trends by about six years. Now that I'm gradually getting back into it, I'm still searching for a suitable application where I can develop design layouts conveniently and efficiently.



In terms of features, I believe it would be advantageous for the application to have templates, easy element positioning (similar to what Muse offers), the ability to export to png, and a minimalist functionality.

What software do you use for creating designs? What tools do you find convenient for layout design and processing? And where can layouts be created and edited quickly?

Here are some options I've been considering, along with some drawbacks:

- Photoshop: It has excessive functionality, making simple tasks like transforming a rounded rectangle quite challenging. Additionally, guides can be a bit tricky to work with since they often snap between pixels. Many layout designers are moving away from Photoshop due to its format and overwhelming functionality. Plus, not everyone wants to purchase Photoshop just to open a file.

- Axure RP: Although it is mainly used for prototyping, I've heard that it can also be suitable for simple layouts.

- llustrator /CorelDRAW: These vector editors have useful features like centering, visual paddings, and convenient grouping. However, they also come with an abundance of functionality that may not be necessary for layout design.

- Adobe Muse: This application seems great overall, but it only outputs in HTML, which may not be ideal for everyone.

- Adobe InDesign: It is highly recommended for printing, but not so much for web design. Personally, I haven't used it myself.

- Adobe XD: Although it's commonly used for prototyping, I've had trouble finding how to use template elements, such as a consistent header across all layouts.

I would greatly appreciate any advice, recommendations, or opinions you may have on this matter. Feel free to share your thoughts!
  •  


expertmumbai

Considering your need for convenient and efficient layout design, along with features like templates, easy element positioning, export to PNG, and minimalist functionality, there are a few options you can consider:

  Figma: Figma is a popular web-based design tool that offers collaborative features, extensive design libraries, and easy-to-use layout tools. It allows you to create and edit layouts quickly while providing seamless collaboration with others. It also has the ability to export designs to PNG format.

  Sketch: Sketch is a macOS-exclusive design tool known for its intuitive interface and powerful layout capabilities. It offers a range of plugins and templates to speed up your design process. However, please note that it is only available for Mac users.

  Canva: Canva is a web-based design tool that provides a user-friendly interface, a wide range of templates, and drag-and-drop functionality. While it may not offer the same level of advanced features as Photoshop or Illustrator, it can be a great choice for quick and simple layout designs.

  Affinity Designer: Affinity Designer is a vector-based design software that offers a balance between functionality and ease of use. It provides an extensive set of tools for layout design and vector editing, without overwhelming you with excessive features.

  Adobe Photoshop Elements: If you still prefer using Photoshop but find the full version overwhelming, Photoshop Elements might be a suitable choice. It offers a more streamlined interface and focuses on essential features for image editing and layout design.

  Gravit Designer: Gravit Designer is a powerful vector design tool available for both web and desktop platforms. It offers a range of features for layout design, such as templates, easy element positioning, and export options.

  Affinity Publisher: If you're looking for a layout design tool specifically focused on print and publishing, Affinity Publisher is a good option. It provides professional-grade tools for creating stunning layouts for brochures, magazines, and other printed materials.

  SketchUp: While primarily known as a 3D modeling software, SketchUp can also be used for simple layout designs. It offers an easy-to-use interface and allows you to create basic layouts quickly.

  Canva Pro: Canva Pro is the paid version of Canva, offering additional features, templates, and options for more advanced layout design. It provides more flexibility and customization compared to the free version.

  SketchBook: SketchBook is a digital drawing and painting software. While it's primarily used for creating artwork, it also has features that can be useful for layout design, such as layer management and easy manipulation of elements.

  Gravit Designer: Gravit Designer is a free design tool available on the web and as a desktop application. It offers a range of features for layout design, including templates, vector editing tools, and export options.

  Canva: Canva is a popular web-based design tool that offers a wide variety of templates, fonts, and design elements. It's known for its simplicity and user-friendly interface, making it easy to create attractive layouts quickly.

  Adobe Spark: Adobe Spark is a suite of web and mobile applications that allows you to create graphics, videos, and web pages. It offers a range of templates and customization options, making it suitable for creating visually appealing layouts.

  Procreate: Procreate is a powerful digital painting and illustration app available exclusively for iPad. While it's primarily used for artwork, it can also be used for creating layouts with its intuitive interface and versatile tools.

  SketchBook: SketchBook is a digital drawing and painting software that can also be used for layout design. It offers a clean and intuitive interface with a focus on sketching, making it great for creating concept layouts or initial design sketches.

  Gravit Designer: Gravit Designer is a free vector-based design tool that provides a range of features for layout design. It offers templates, easy element positioning, and export options to various file formats. It's available for both web and desktop platforms.

  Canva: Canva is a popular web-based design tool that offers a user-friendly interface, a wide variety of templates, and drag-and-drop functionality. It's particularly useful for quick and simple layout designs and offers options for exporting to various file formats, including PNG.

  Adobe Spark: Adobe Spark is a web-based tool that allows you to create visually appealing graphics, videos, and web pages. While it may not have as many advanced features as some other design tools, it offers a straightforward and streamlined experience for creating layouts.

  Marvel: Marvel is primarily known as a prototyping tool, but it also provides features for layout design. You can create interactive layouts and prototypes with ease, and it offers options for exporting designs in various formats.

  Affinity Photo: Affinity Photo is a powerful photo editing software that can also be used for layout design. It offers advanced editing tools and features that allow you to create complex layouts while maintaining precision and control over design elements.

  Procreate: Procreate is a popular digital illustration and painting app designed specifically for iPad. While it's primarily focused on drawing, it can also be used for creating layouts with its wide range of brushes, layering capabilities, and intuitive interface.

  Adobe Spark Post: Adobe Spark Post is a free mobile and web-based tool that specializes in creating social media graphics, posters, and other visual content. It offers a variety of templates, customizable design options, and easy sharing capabilities.

  Affinity Designer: Affinity Designer, from the same company as Affinity Photo, is a vector-based design tool that offers a comprehensive set of features for layout design. It provides a balance between functionality and ease of use, making it suitable for both beginners and experienced designers.

  Lucidpress: Lucidpress is an online design tool specifically built for creating print and digital layouts. It offers a drag-and-drop interface, pre-designed templates, collaboration features, and options for exporting designs to various file formats.

  Sketch: Sketch is a popular design tool primarily used by UI/UX designers. It offers a wide range of features for creating layouts and interfaces, including reusable symbols, artboards, and easy exporting options.

  Gravit Designer: Gravit Designer is a free vector-based design software that provides powerful layout design tools. It offers an intuitive interface, supports multiple file formats, and has features like templates, smart guides, and a flexible grid system.

  Vectr: Vectr is a free cross-platform vector design tool that offers a simple and user-friendly interface. It allows for easy collaboration, real-time sharing, and provides basic design features suitable for creating layouts.

  Balsamiq: Balsamiq is a wireframing tool known for its simplicity and ease of use. It's great for quickly creating low-fidelity mockups and layouts to convey design concepts and ideas.

  Adobe Spark Page: If you're looking for a tool specifically for creating web-based layouts, Adobe Spark Page is worth considering. It allows you to create interactive and responsive web pages using pre-designed templates and easy-to-use customization options.
  •  

popugai

At least in terms of what software to use. Specifically, for creating visual designs, Paint is often utilized.
However, it is common practice to use multiple programs simultaneously.
To ensure a smooth workflow, I suggest following these steps:
1) Start by sketching the initial design on paper using colored pencils.
2) Next, use a vector graphics editor to create the layout based on the sketch. Any editor will suffice, but personally, I recommend the free software, Inkscape. It allows anyone to draw in a vector format, even someone like Pavlensky XD. On the other hand, raster editing requires skill, a steady hand, and ideally, a graphic tablet with a touch pen.
3) After obtaining the vector layout, process and divide it into layers using either Photoshop or GIMP. It is essential to include font samples as well. If using Photoshop, layer effects can be applied.
4) Once the PSD file is ready, it can be imported into Avocode to generate CSS and HTML code. Adobe Assets can also be used for this purpose. That's why it is important to apply layer effects and write the fonts within Photoshop rather than in the vector format.
In practice, PSD has become the standard file format for such projects.
  •  

LaurenShawn

There are two dominant software options that divide the market - Photoshop and Sketch.

A minority of users prefer Illustrator and Fireworks, although their numbers are still significant.

All other alternatives hold only tiny portions of the market share, almost too small to be seen.

Adobe XD shows potential to enter the market at a later time, but for now, it hasn't made significant progress.
  •  

parmothebra

Photoshop? You're clinging to that dinosaur while the world's gone vector-crazy with Figma? Its excessive raster bloat makes simple rounded rects a nightmare - guides snapping like drunk pixels!
Muse is dead, outputting only HTML junk; InDesign's for dead trees, not web. Axure? Prototyping purgatory. Illustrator's grouping is neat, but overkill. Try Figma or Sketch for real drag-and-drop magic, templates galore, and PNG exports without the headache.
  •  


If you like DNray forum, you can support it by - BTC: bc1qppjcl3c2cyjazy6lepmrv3fh6ke9mxs7zpfky0 , TRC20 and more...