12 tips on creating layouts in the browser
Article translation: 12 Killer Tips for Designing in the Browser
A regular project starts with creating a layout in Photoshop and then using HTML and CSS as close as possible to the appearance of the original PSD file. In spite of this, the direction in Web design is skipping Photoshop's step in favor of creating the original composition right in the browser using your favorite editor. I’m sure that right now your head is making noises from the reasons why this approach will limit your design, but there are a huge number of things you can do in the browser. This article will introduce the tools and tricks that will be needed to create great working layouts at the very first stage of work.
Meagan Fisher at 24ways.org presented a compelling design argument in the browser. Although I do not share his contempt for Photoshop (I love Photoshop more than any other software on the planet), I agree with some of its other points. Fisher says that a static image doesn’t really feel how the site will work and that designing in a browser directs your efforts to organize the content to design, which guarantees greater convenience and the creation of the right structure
')
We will use Fisher's article as a seed for our notes on becoming a professional in creating fantastic in-browser layouts ready for work immediately upon receiving approval from the client.
As mentioned above, the selection and organization of all content without styling allows you to create a design that fits the content much more than in the reverse order. Using grid-based frameworks can dramatically reduce layout time and allow the development process to ensure its stability.
CSS Framework Article (eng)
If you code sites with your hands, a professional editor is the basis of your workflow. I use (and really love) Espresso from MacRabbit . It has all the little features I need like snippets and autocompletions as well as the main features - the ability to view changes in the browser as you type the code. You need to choose the application that best suits your needs.
Here is a short list of editors:
Now a decent shadow for the web can be created not only with the help of Photoshop. Most (but not all) browsers now support CSS3, which gives us several new properties for creating advanced design. One of the most useful is box-shadow, which allows you to add shadows to objects using only CSS. Its format: box-shadow: 5px 5px 20px # 000000. These values ​​allow you to adjust the height and length of the shadow, as well as the blur radius and color.
Read more about box-shadow on CSS.flepstudio.org
If you want to put a shadow on the text, use the text-shadow property as shown in the Kremalicious tutorial . Format: text-shadow: 1px 1px 1px # 000. The first two values ​​determine the offset of the shadow (x and y, respectively), the third - the blur radius and the last - the color of the shadow.
This property can be used not only to create shadows. The lesson above explains how to create a book text effect, glow, and even burning text.
Rounded corners are another property finally adapted to CSS. The border-radius property works in Safari and Firefox. Just specify the value in pixels -moz-border-radius and / or -webkit-border-radius to round the frame.
in more detail in 25 Rounded Corners Techniques with CSS.
Photoshop provides an opportunity for convenient work on the visualization and experimentation with different colors, but there are many free resources for creating color schemes in the network. In my opinion, the best of them is Adobe Kuler . Kuler is a user-friendly interface for quickly creating beautiful color schemes, as well as a huge library with the search for ready-made schemes. Need to make the site fall? Just enter “fall” and get a choice of 2600 schemes. Kuler helps you very quickly create amazing color schemes that you can immediately use in CSS.
25 Awesome Tools for Choosing a Website Color Scheme
Also, for the gifted, it is possible to apply gradients directly to the text in the browser. What kind of shamanism, you ask? Check out the WebDesignerWall tutorial on this topic. The bottom line is that you create a span around the text to which you want to apply a gradient, and then set the background for the span as a repeating PNG with a gradient. Of course, in order to make PNG you will need a graphic editor (yes, you knew that you would have to turn to the help of the good old Photoshop every now and then)
CSS introduces a new feature called RGBA (“A” means alpha). Using the values ​​of “A”, you can set the opacity of the fill. This convenient feature not only allows you to conveniently create monochrome color schemes with different alpha values, but also makes it possible to create transparent objects through which the picture shines through under them, as if you decrease the layer opacity in Photoshop.
Learn more about RGBA in The Right Way to Declare RGBA Colors.
Do not fall into the trap of using the same pair of fonts in all your projects. Reposition - taking advantage of the full spectrum of web-safe fonts. Typetester is a great tool for this. In it, you can view blocks of text with different fonts and settings (size, alignment, etc.) directly in the browser. And the most interesting is when you select the appropriate settings Typetester exports them to CSS.
Creating text as a picture in Photoshop gives you the freedom to use any font without concern for compatibility. Unfortunately, this method leads to non-selectable text that cannot be searched. However, it is not so difficult to solve this problem. Today there are several solutions for installing your own fonts with “live” selectable text using the @ font-face command.
amazing fonts on your site: step-by-step TypeKit tutorial
Very often, especially at the beginning of work, you need button icons or any other elements that you don’t want to do now. Stocks (such as GraphicRiver ) give you access to elements that are ready for use on the site without processing in Photoshop. Even if you can easily create an object in an hour, isn't it attractive to spend a couple of minutes getting a great result without making any effort.
Regardless of how you design websites, you should always know how the main browsers will render it. To do this, pay attention to the Adobe Browserlab . This surprisingly handy utility allows you to view the site in various browsers of different operating systems in real time. The only negative is that you can realize how bad your site looks in some browsers, which will certainly lead to hours of curses and scratching the back of the head.
Well, how? Ready to change your views and start creating websites armed only with a text editor and a browser? Or do you want the investigator to interrogate me about the box from under Photoshop extracted from your cold dead fingers? Of course, everything that is written here is not absolute. Few professional designers create layouts without the help of any kind of graphic editors. The main question is, what do you think you should first of all spend time on the initial draft? I'd like to know. Use comments to defend your position to the end. In my opinion, this conclusion is becoming more and more creepy, so I'd rather stay here.
How do you create a site layout?
A regular project starts with creating a layout in Photoshop and then using HTML and CSS as close as possible to the appearance of the original PSD file. In spite of this, the direction in Web design is skipping Photoshop's step in favor of creating the original composition right in the browser using your favorite editor. I’m sure that right now your head is making noises from the reasons why this approach will limit your design, but there are a huge number of things you can do in the browser. This article will introduce the tools and tricks that will be needed to create great working layouts at the very first stage of work.
main idea
Meagan Fisher at 24ways.org presented a compelling design argument in the browser. Although I do not share his contempt for Photoshop (I love Photoshop more than any other software on the planet), I agree with some of its other points. Fisher says that a static image doesn’t really feel how the site will work and that designing in a browser directs your efforts to organize the content to design, which guarantees greater convenience and the creation of the right structure
')
We will use Fisher's article as a seed for our notes on becoming a professional in creating fantastic in-browser layouts ready for work immediately upon receiving approval from the client.
1. Start simple and use the grid.
As mentioned above, the selection and organization of all content without styling allows you to create a design that fits the content much more than in the reverse order. Using grid-based frameworks can dramatically reduce layout time and allow the development process to ensure its stability.
CSS Framework Article (eng)
2. Use a good editor.
If you code sites with your hands, a professional editor is the basis of your workflow. I use (and really love) Espresso from MacRabbit . It has all the little features I need like snippets and autocompletions as well as the main features - the ability to view changes in the browser as you type the code. You need to choose the application that best suits your needs.
Here is a short list of editors:
- Aptana: Mac, Windows Linux (certainly my favorite free version)
- Komodo IDE : Mac, Windows, Linux
- NetBeans : Mac, Windows, Linux
- Coda : Mac (a worthy alternative to Espresso)
- Text Wrangler & BBEdit : Mac
3. Apply a shadow to an element
Now a decent shadow for the web can be created not only with the help of Photoshop. Most (but not all) browsers now support CSS3, which gives us several new properties for creating advanced design. One of the most useful is box-shadow, which allows you to add shadows to objects using only CSS. Its format: box-shadow: 5px 5px 20px # 000000. These values ​​allow you to adjust the height and length of the shadow, as well as the blur radius and color.
Read more about box-shadow on CSS.flepstudio.org
4. Shading text
If you want to put a shadow on the text, use the text-shadow property as shown in the Kremalicious tutorial . Format: text-shadow: 1px 1px 1px # 000. The first two values ​​determine the offset of the shadow (x and y, respectively), the third - the blur radius and the last - the color of the shadow.
This property can be used not only to create shadows. The lesson above explains how to create a book text effect, glow, and even burning text.
5. Rounding corners
Rounded corners are another property finally adapted to CSS. The border-radius property works in Safari and Firefox. Just specify the value in pixels -moz-border-radius and / or -webkit-border-radius to round the frame.
in more detail in 25 Rounded Corners Techniques with CSS.
5. Creating a color scheme
Photoshop provides an opportunity for convenient work on the visualization and experimentation with different colors, but there are many free resources for creating color schemes in the network. In my opinion, the best of them is Adobe Kuler . Kuler is a user-friendly interface for quickly creating beautiful color schemes, as well as a huge library with the search for ready-made schemes. Need to make the site fall? Just enter “fall” and get a choice of 2600 schemes. Kuler helps you very quickly create amazing color schemes that you can immediately use in CSS.
25 Awesome Tools for Choosing a Website Color Scheme
7. Text with gradient
Also, for the gifted, it is possible to apply gradients directly to the text in the browser. What kind of shamanism, you ask? Check out the WebDesignerWall tutorial on this topic. The bottom line is that you create a span around the text to which you want to apply a gradient, and then set the background for the span as a repeating PNG with a gradient. Of course, in order to make PNG you will need a graphic editor (yes, you knew that you would have to turn to the help of the good old Photoshop every now and then)
8. Using RGBA to screen colors
CSS introduces a new feature called RGBA (“A” means alpha). Using the values ​​of “A”, you can set the opacity of the fill. This convenient feature not only allows you to conveniently create monochrome color schemes with different alpha values, but also makes it possible to create transparent objects through which the picture shines through under them, as if you decrease the layer opacity in Photoshop.
Learn more about RGBA in The Right Way to Declare RGBA Colors.
9. Know Web Fonts
Do not fall into the trap of using the same pair of fonts in all your projects. Reposition - taking advantage of the full spectrum of web-safe fonts. Typetester is a great tool for this. In it, you can view blocks of text with different fonts and settings (size, alignment, etc.) directly in the browser. And the most interesting is when you select the appropriate settings Typetester exports them to CSS.
10. Get more advanced fonts.
Creating text as a picture in Photoshop gives you the freedom to use any font without concern for compatibility. Unfortunately, this method leads to non-selectable text that cannot be searched. However, it is not so difficult to solve this problem. Today there are several solutions for installing your own fonts with “live” selectable text using the @ font-face command.
amazing fonts on your site: step-by-step TypeKit tutorial
11. Make friends with the drains
Very often, especially at the beginning of work, you need button icons or any other elements that you don’t want to do now. Stocks (such as GraphicRiver ) give you access to elements that are ready for use on the site without processing in Photoshop. Even if you can easily create an object in an hour, isn't it attractive to spend a couple of minutes getting a great result without making any effort.
12. Use testing tools
Regardless of how you design websites, you should always know how the main browsers will render it. To do this, pay attention to the Adobe Browserlab . This surprisingly handy utility allows you to view the site in various browsers of different operating systems in real time. The only negative is that you can realize how bad your site looks in some browsers, which will certainly lead to hours of curses and scratching the back of the head.
Conclusion
Well, how? Ready to change your views and start creating websites armed only with a text editor and a browser? Or do you want the investigator to interrogate me about the box from under Photoshop extracted from your cold dead fingers? Of course, everything that is written here is not absolute. Few professional designers create layouts without the help of any kind of graphic editors. The main question is, what do you think you should first of all spend time on the initial draft? I'd like to know. Use comments to defend your position to the end. In my opinion, this conclusion is becoming more and more creepy, so I'd rather stay here.
Source: https://habr.com/ru/post/80593/
All Articles