Hello developers’ community! What’s new in the Angular world? The web development industry is taking great strides forward. For a developer, knowledge of how to make up a website template with PSD will be a huge plus both in the process of work, as well as in employment. Of course, the site design must be created according to certain rules. And that's what I wrote about in the article ‘PSD to Angular Development – How You Do That’. Also, you will find out what these templates are and the basic rules for the web site layout with the help of PSD in the Angular Development. Read on, it will be interesting!
What are PSD templates?
Website creation is a time-consuming process, because it is necessary not only to think over its logic and develop a style, but also to layout and program the page. Sometimes the designer draws a good layout, and after the layout, the quality drops noticeably: extra margins appear, elements disappear, the text goes beyond the content area. Most likely, this happens because the designer has poorly prepared the layout for layout. Usually a website is developed in several stages. They collect information, draw designs and write text, and then typeset and program. First, the designer works with the appearance, creates a website layout, then transfers the source code to the developer. A site layout is a sketch that shows a future page. The general perception of information on the site depends on how well the layout is worked out. When working on a layout in a graphic editor, the designer has no restrictions. If the selected font does not fit, you can change it in one click. If the button looks bad, you can easily change its color and size. The developer receives a graphic layout from the designer. It then uses HTML and CSS, a page markup language, and a stylesheet to render the layout in a way that browsers accept. Novice designers often do not know which program can be used to make a layout. They study different graphic editors, choose a convenient one for themselves. The popular editor is Adobe Photoshop. It is a universal tool for working with any kind of graphics: photographers process images there, illustrators do drawings, and web designers do layouts. The file that the layout is saved to in Photoshop has the .psd extension. It is sent to the developers as a PSD mockup for the site. The development of a PSD template for a site should take into account the possibilities of recreating its design using the HTML and CSS languages.
PSD templates creation rules
1. Follow the requirements of interactive design. Create a layout according to the rules. This will simplify the work on the appearance and facilitate the layout process. Select the RGB color model before creating the layout. This is the standard for monitors and screens. Use a grid to align content within your layout. For italic or bold text, choose one of the font styles. Don't use mock styles to change the look of letters in Photoshop and other editors. Resize images while holding down the Shift key to maintain proportions.
2. Get rid of fractional spacing. Check all elements of the layout and look at the spacing and padding. All dimensions must be expressed in even whole numbers. Don't use odd numbers and fractions.
3. Organize your layers and art boards. While working on a layout, the designer arranges the layers in a chaotic order, does not rename them, and hides inappropriate options. It is difficult for a layout designer and other specialists to work with such a layout, it has no structure.
4. Create animations to show the movement of elements. Animated layouts are used not only for demonstrating a site in a portfolio or presentation to a customer. If you want elements to move and interact with each other, draw an interactive prototype and show it to the layout designer. Better to demonstrate than describe in words. You can create an animated layout using Photoshop.
Since the designer's work is almost over, he joyfully hands over his creation to the layout designer, in the form of PSD layouts, and boldly goes to rest. Very often he does not follow the required optimization steps for layout. This forces the layout designer to do double work, spending more time. Avoiding such situations is not so difficult - just follow a few simple rules.
● Attach all images in original quality and additional materials that are used in the layout to a separate folder.
● Copy all non-standard fonts to the same folder. The layout designer may not have this pretty font. And it can take a lot of time to find it.
● Give explanations to the elements that may raise questions. If there are special ideas that are not so easy to show in the layout, then write them down in a separate text file. By the time the layout designer gets to this element of the layout, you yourself can forget what you wanted, and you will have to spend time again to remember and explain the idea to the layout designer.
Observing these not very complicated rules, you will speed up not only the work of the layout designer, but also your own, since you will not need to be distracted from another project and return to the work that you have already done.
Basics of the page making in Angular development
Let's look at a simplified example of how the page making process is going. For this, let's take a simple two-column template. Its header contains the site logo, which we will cut out and use as a background image. The rest of the template will be done using HTML, and styles and sizes will be set using CSS classes. Each part of the template should be placed on a separate layer. The sidebar and content are located inside the container layer. For each layer in the class descriptions, sizes are set using the width and height properties. The background color is set by the background parameter. The elements are positioned by the values of several margins: margin-top - offset from the top edge of the browser window, margin-left - from the left edge, margin-right - from the right edge. The color and background image are immediately set for the header. The picture is cut from the PSD template for the site and placed in a separate folder. The file path is specified in the background-image field via URL.
Conclusion
Well, now you have knowledge about PSD templates, how to create and apply them in practice in website development using Angular. You should always remember that website development is a team, multi-stage work. One of the first, and most important, stage of this work is design. Thanks for reading this article. Enjoy work with PSD templates in Angular development!
Other Articles:
his article provides valuable insights into the process of converting PSD templates to Angular development. It emphasizes the importance of following specific rules and guidelines to ensure a smooth transition from design to development. The article also highlights the significance of creating well-organized PSD templates and offers practical tips for optimizing the collaboration between designers and developers. Overall, it's a useful resource for anyone involved in
ReplyDeleteNice!
ReplyDelete