Beautiful Krishna Images

Design Trends 2016

As the famous saying : Everything old is new again. That’s true in design for sure. This month some of the biggest trends in web design aren’t that new at all. Designers/designing schools are reinventing old-school typography styles, returning to the grid and rethinking on messaging on the home page. It’s an interesting combination of visual elements that we’ve seen in the past, and will probably see again in the future. Here’s what’s trending in design this month:

1. OLD SCHOOL TYPOGRAPHY

As per the recent trends of designing approach, Designers seems and are taking an old-school approach to display typography. As we all know Gone are the ultra-thin or condensed sans serifs, and more traditional type styles are in. Old-style, modern and transitional serifs are the new go-to display type style. It’s a bit surprising,  that actually,  For years. The “rule” has been to use sans serifs to improve readability and designers all did just that, often without question. Interestingly the use of serifs for big type — and even some smaller type — is refreshing and quite readable. The designs often live in a minimal space, so that type does not have to compete for attention and pairings focus on dark lettering on a light background. (All things that aid readability.) Don’t know much about these type styles? Here’s a quick primer on each of these “new” old-school serifs:
  • Old-style:Lettering has an old-world vibe that carries over from some black letter and gothic styles from early ages of printing. Letterforms often have small serifs (those tiny strokes at the end of longer stokes) and a rounded form. RSQ, below, is a perfect showcase of old-style typography.
  • Modern:This style of lettering is quite common in printed design, such as newspapers and magazines, but is just starting to make its way into web projects. Modern serifs have alternating thick and thin stroke widths in each letterform, sometimes with great amounts of contrast. Ink + Volt, below, uses a beautiful modern serif. But also note how the lettering is used. The type is inside of a white box so that the thin parts of each letter do not get lost in the video background, which would limit readability. This is the perfect solution for using a modern serif.
  • Transitional:These letterforms look a lot like modern serifs with one big difference – letters have uniform stroke widths. This makes traditional serifs easier to use because they can be more readable in more design situations.

Not all old-school typography falls into a serif category. But some of the old-school styles that are popping up just remind all of us of another time, such as that used by the Frontend Guide, below. The funky, tilted, late 1970s-early 80s theme really does take you to another time and place. (And that’s totally old-school approach.)

creative

2. DEFINED GRIDS

Sometimes you can see the grid, sometimes you can’t. Either way, a solid grid is the foundation for a great design that looks and sounds clean, and cleanly organized and easy on the eyes. It would be interesting to know as per recent trends and research work, More defined grids are making a comeback. Part of it might be from the influence of Material Design, which features most on plenty of elements in neat columns and  rows, and part of it might be the ease of moving and rearranging elements in responsive frameworks.

Either way, defined grids can look amazing for a variety of projects on pretty much any screen. What’s nice about using a defined grid that is that it makes life really easy for the designer. Once you get the hang of working within a grid, placements, sizing and design options clearly present themselves to you. The ideation of this trick is to, using defined grids is not to look too structured or overly-gridded. For many designers this means switching up sizes on different “screens,” such as having a full width hero image over a grid of elements. The Elegant Seagulls “Decade” page, below does this nicely. The website also features subtle gridding on the homepage in the picture, which is dark any mysterious, leading you into the mystery-themed grid pages. High Tide, below, does something similar with a cool intro video above grid blocks.

But a grid can be well-defined and a little less boxed. Zumtobel, below, uses the letters in its named to create grid blocks for specific product information. Only on hover do you see the perfectly sized grid boxes, even though the placements are ideally spaced horizontally and vertically in a clean grid.

The more you think about grids, the more you will start to see them through the eyes of the designer who created each one. You can start with some of the common web grids if you aren’t comfortable with the idea or create your own. The trick is that you have to use the grid consistently for real visual success.
sample
sample-2
sample-6

3. MINIMAL MESSAGING ABOVE THE “FOLD”

The question of the day is this: Is there enough information above the scroll to interest anyone enough to keep looking at the website? Surely, It can be tough and difficult to answer. But plenty of designers are betting on the idea that you will click or scroll, even if there is only one word on the screen. With other visuals such as video, scrolling sliders or enticing product displays, users might like do just that. But it can be a gamble gaming, especially with designs that don’t include a navigation menu with minimal messaging.
sample-3
sample-4
sample-5Then there’s this: Plenty of users enter websites through pages other than the homepage, so why not take a risk there? Look at the data and clicks, see what happens. This is one of those trends that will be interesting to watch. It could vanish almost as quickly as it has appeared, but there are a lot of sites using this model.

CONCLUSION

It’s a lot of fun to watch design trends cycle back into fashion. What’s nice about two of these trends — old-school typography and defined grids — is that they are highly usable in a number of design styles.What trends are you loving (or hating) right now? I’d love to see some of the websites that you are fascinated with. Drop me a link on Twitter; I’d love to hear from you.

HTML Color

html-colors

HTML Text Color
Adding color to your HTML page/text is belive me is very easy! In this short tutorial we’ll cover how to change the color of your HTML text using Hex color codes, HTML color names, RGB and HSL values.

Text color using Hex color codes
The most common ideal way of adding color to HTML text is by using hexadecimal color codes (Hex code for short). Simply add a style attribute to the text element you want to color – a paragraph in the example below – and use the color property with your Hex code.

<body>
<p style=”color:#FF0000″;>Red paragraph text</p>
</body>

DEMO ON CODEPEN

Text color using HTML color names
There is another way of adding to color the website’s text and simply is by using an HTML color name. The HTML code is similar, just replace the Hex code from the previous step with the name of the color you want to use (red in our example). There are 140 named colors to choose from, and we’ve compiled a list which you can check out here.

<body>
<p style=”color:red;”>Red paragraph text</p>
</body>

DEMO ON CODEPEN

Text color using RGB color values
Using RGB values is all the rage these days, but it’s just as easy as Hex codes or color names. Insert the RGB values within the rgb() parameter following the color property and can be used from the color picker to get RGB values in addition to Hex codes.
<body>
<p style=”color:rgb(255,0,0);”>Red paragraph text</p>
</body>

DEMO ON CODEPEN

When using an RGB value in the website, one can also very interstingly specify its opacity range. Instead of rgb() use rgba() – the a is for alpha, the color channel that controls opacity – and after your three color values add a fourth for opacity, on a scale from 0 – 1 (0 for completely transparent, 1 for fully opaque).

<body>
<p style=”color:rgba(255,0,0,0.5);”>Red paragraph text</p>
</body>

DEMO ON CODEPEN

Text color using HSL color values
One more, and infact a fourth method for adding color is by using HSL values. Its very Similar to the RGB syntax described above, HSL uses the hsl() prefix, and three values for hue, saturation and lightness. Hue is represented on a scale of 0 – 360, while saturation and lightness are each a percentage between 0% and 100%.

<body>
<p style=”color:hsl(0,100%,50%);”>Red paragraph text</p>
</body>

DEMO ON CODEPEN

Just like RGB, when using HSL you can modify the color opacity right in the color property. Use the hsla() prefix and include a fourth value between 0 and 1 for the level of opacity you need.

HTML

<body>
<p style=”color:hsla(0,100%,50%,1);”>Red paragraph text</p>
</body>
DEMO ON CODEPEN

HTML Color Codes

INDIANRED

#CD5C5C

RGB(205, 92, 92)

LIGHTCORAL

#F08080

RGB(240, 128, 128)

SALMON

#FA8072

RGB(250, 128, 114)

DARKSALMON

#E9967A

RGB(233, 150, 122)

LIGHTSALMON

#FFA07A

RGB(255, 160, 122)

CRIMSON

#DC143C

RGB(220, 20, 60)

RED

#FF0000

RGB(255, 0, 0)

FIREBRICK

#B22222

RGB(178, 34, 34)

DARKRED

#8B0000

RGB(139, 0, 0)

PINK

#FFC0CB

RGB(255, 192, 203)

LIGHTPINK

#FFB6C1

RGB(255, 182, 193)

HOTPINK

#FF69B4

RGB(255, 105, 180)

DEEPPINK

#FF1493

RGB(255, 20, 147)

MEDIUMVIOLETRED

#C71585

RGB(199, 21, 133)

PALEVIOLETRED

#DB7093

RGB(219, 112, 147)

LIGHTSALMON

#FFA07A

RGB(255, 160, 122)

CORAL

#FF7F50

RGB(255, 127, 80)

TOMATO

#FF6347

RGB(255, 99, 71)

ORANGERED

#FF4500

RGB(255, 69, 0)

DARKORANGE

#FF8C00

RGB(255, 140, 0)

ORANGE

#FFA500

RGB(255, 165, 0)

GOLD

#FFD700

RGB(255, 215, 0)

YELLOW

#FFFF00

RGB(255, 255, 0)

LIGHTYELLOW

#FFFFE0

RGB(255, 255, 224)

LEMONCHIFFON

#FFFACD

RGB(255, 250, 205)

LIGHTGOLDENRODYELLOW

#FAFAD2

RGB(250, 250, 210)

PAPAYAWHIP

#FFEFD5

RGB(255, 239, 213)

MOCCASIN

#FFE4B5

RGB(255, 228, 181)

PEACHPUFF

#FFDAB9

RGB(255, 218, 185)

PALEGOLDENROD

#EEE8AA

RGB(238, 232, 170)

KHAKI

#F0E68C

RGB(240, 230, 140)

DARKKHAKI

#BDB76B

RGB(189, 183, 107)

LAVENDER

#E6E6FA

RGB(230, 230, 250)

THISTLE

#D8BFD8

RGB(216, 191, 216)

PLUM

#DDA0DD

RGB(221, 160, 221)

VIOLET

#EE82EE

RGB(238, 130, 238)

ORCHID

#DA70D6

RGB(218, 112, 214)

FUCHSIA

#FF00FF

RGB(255, 0, 255)

MAGENTA

#FF00FF

RGB(255, 0, 255)

MEDIUMORCHID

#BA55D3

RGB(186, 85, 211)

MEDIUMPURPLE

#9370DB

RGB(147, 112, 219)

REBECCAPURPLE

#663399

RGB(102, 51, 153)

BLUEVIOLET

#8A2BE2

RGB(138, 43, 226)

DARKVIOLET

#9400D3

RGB(148, 0, 211)

DARKORCHID

#9932CC

RGB(153, 50, 204)

DARKMAGENTA

#8B008B

RGB(139, 0, 139)

PURPLE

#800080

RGB(128, 0, 128)

INDIGO

#4B0082

RGB(75, 0, 130)

SLATEBLUE

#6A5ACD

RGB(106, 90, 205)

DARKSLATEBLUE

#483D8B

RGB(72, 61, 139)

MEDIUMSLATEBLUE

#7B68EE

RGB(123, 104, 238)

GREENYELLOW

#ADFF2F

RGB(173, 255, 47)

CHARTREUSE

#7FFF00

RGB(127, 255, 0)

LAWNGREEN

#7CFC00

RGB(124, 252, 0)

LIME

#00FF00

RGB(0, 255, 0)

LIMEGREEN

#32CD32

RGB(50, 205, 50)

PALEGREEN

#98FB98

RGB(152, 251, 152)

LIGHTGREEN

#90EE90

RGB(144, 238, 144)

MEDIUMSPRINGGREEN

#00FA9A

RGB(0, 250, 154)

SPRINGGREEN

#00FF7F

RGB(0, 255, 127)

MEDIUMSEAGREEN

#3CB371

RGB(60, 179, 113)

SEAGREEN

#2E8B57

RGB(46, 139, 87)

FORESTGREEN

#228B22

RGB(34, 139, 34)

GREEN

#008000

RGB(0, 128, 0)

DARKGREEN

#006400

RGB(0, 100, 0)

YELLOWGREEN

#9ACD32

RGB(154, 205, 50)

OLIVEDRAB

#6B8E23

RGB(107, 142, 35)

OLIVE

#808000

RGB(128, 128, 0)

DARKOLIVEGREEN

#556B2F

RGB(85, 107, 47)

MEDIUMAQUAMARINE

#66CDAA

RGB(102, 205, 170)

DARKSEAGREEN

#8FBC8B

RGB(143, 188, 139)

LIGHTSEAGREEN

#20B2AA

RGB(32, 178, 170)

DARKCYAN

#008B8B

RGB(0, 139, 139)

TEAL

#008080

RGB(0, 128, 128)

AQUA

#00FFFF

RGB(0, 255, 255)

CYAN

#00FFFF

RGB(0, 255, 255)

LIGHTCYAN

#E0FFFF

RGB(224, 255, 255)

PALETURQUOISE

#AFEEEE

RGB(175, 238, 238)

AQUAMARINE

#7FFFD4

RGB(127, 255, 212)

TURQUOISE

#40E0D0

RGB(64, 224, 208)

MEDIUMTURQUOISE

#48D1CC

RGB(72, 209, 204)

DARKTURQUOISE

#00CED1

RGB(0, 206, 209)

CADETBLUE

#5F9EA0

RGB(95, 158, 160)

STEELBLUE

#4682B4

RGB(70, 130, 180)

LIGHTSTEELBLUE

#B0C4DE

RGB(176, 196, 222)

POWDERBLUE

#B0E0E6

RGB(176, 224, 230)

LIGHTBLUE

#ADD8E6

RGB(173, 216, 230)

SKYBLUE

#87CEEB

RGB(135, 206, 235)

LIGHTSKYBLUE

#87CEFA

RGB(135, 206, 250)

DEEPSKYBLUE

#00BFFF

RGB(0, 191, 255)

DODGERBLUE

#1E90FF

RGB(30, 144, 255)

CORNFLOWERBLUE

#6495ED

RGB(100, 149, 237)

MEDIUMSLATEBLUE

#7B68EE

RGB(123, 104, 238)

ROYALBLUE

#4169E1

RGB(65, 105, 225)

BLUE

#0000FF

RGB(0, 0, 255)

MEDIUMBLUE

#0000CD

RGB(0, 0, 205)

DARKBLUE

#00008B

RGB(0, 0, 139)

NAVY

#000080

RGB(0, 0, 128)

MIDNIGHTBLUE

#191970

RGB(25, 25, 112)

CORNSILK

#FFF8DC

RGB(255, 248, 220)

BLANCHEDALMOND

#FFEBCD

RGB(255, 235, 205)

BISQUE

#FFE4C4

RGB(255, 228, 196)

NAVAJOWHITE

#FFDEAD

RGB(255, 222, 173)

WHEAT

#F5DEB3

RGB(245, 222, 179)

BURLYWOOD

#DEB887

RGB(222, 184, 135)

TAN

#D2B48C

RGB(210, 180, 140)

ROSYBROWN

#BC8F8F

RGB(188, 143, 143)

SANDYBROWN

#F4A460

RGB(244, 164, 96)

GOLDENROD

#DAA520

RGB(218, 165, 32)

DARKGOLDENROD

#B8860B

RGB(184, 134, 11)

PERU

#CD853F

RGB(205, 133, 63)

CHOCOLATE

#D2691E

RGB(210, 105, 30)

SADDLEBROWN

#8B4513

RGB(139, 69, 19)

SIENNA

#A0522D

RGB(160, 82, 45)

BROWN

#A52A2A

RGB(165, 42, 42)

MAROON

#800000

RGB(128, 0, 0)

WHITE

#FFFFFF

RGB(255, 255, 255)

SNOW

#FFFAFA

RGB(255, 250, 250)

HONEYDEW

#F0FFF0

RGB(240, 255, 240)

MINTCREAM

#F5FFFA

RGB(245, 255, 250)

AZURE

#F0FFFF

RGB(240, 255, 255)

ALICEBLUE

#F0F8FF

RGB(240, 248, 255)

GHOSTWHITE

#F8F8FF

RGB(248, 248, 255)

WHITESMOKE

#F5F5F5

RGB(245, 245, 245)

SEASHELL

#FFF5EE

RGB(255, 245, 238)

BEIGE

#F5F5DC

RGB(245, 245, 220)

OLDLACE

#FDF5E6

RGB(253, 245, 230)

FLORALWHITE

#FFFAF0

RGB(255, 250, 240)

IVORY

#FFFFF0

RGB(255, 255, 240)

ANTIQUEWHITE

#FAEBD7

RGB(250, 235, 215)

LINEN

#FAF0E6

RGB(250, 240, 230)

LAVENDERBLUSH

#FFF0F5

RGB(255, 240, 245)

MISTYROSE

#FFE4E1

RGB(255, 228, 225)

GAINSBORO

#DCDCDC

RGB(220, 220, 220)

LIGHTGRAY

#D3D3D3

RGB(211, 211, 211)

SILVER

#C0C0C0

RGB(192, 192, 192)

DARKGRAY

#A9A9A9

RGB(169, 169, 169)

GRAY

#808080

RGB(128, 128, 128)

DIMGRAY

#696969

RGB(105, 105, 105)

LIGHTSLATEGRAY

#778899

RGB(119, 136, 153)

SLATEGRAY

#708090

RGB(112, 128, 144)

DARKSLATEGRAY

#2F4F4F

RGB(47, 79, 79)

BLACK

#000000

RGB(0, 0, 0)