Essential design trends, November 2016

It’s time to break out of your (design) shell and try something bold. Larger-than-life bold techniques are the big theme this month as we look at three trends that incorporate items that make users look at the design.

Here’s what’s trending in design this month:

1. The color purple

Purple color palettes are traditionally somewhat rare. The color can be difficult to use in some situations and has such a range of emotional associations that many designers avoid it. Purple is not a common color option for brands either and might often be in conflict with the rest of the color palette.

But that’s not stopping designers anymore. Bold, purple color palettes are popping up everywhere, and they are pretty impressive.

Many of these design have a few commonalities that make purple a little easier to work with:

• Monotone color schemes
• Simple design patterns without a lot of competing elements
• Minimal use of photography
• Space themes (always a popular option with purple)
• Use of darker purple hues (rather than pastels)

Because purple is such a striking color, particularly the dark, deep purples that many designers are using, a simple framework is an ideal option. Minimalistic styles or typography heavy designs can benefit from such a powerful color.

When choosing a purple to work with, a darker hue can be the best option. It will work well with light typography and it won’t have so much of a feminine association. The trendy route is to pick a bright purple that matches some of the regal tones from the material design palettes.

http://www.kikk.be/2016/

http://driver.xyz/

http://www.filippobello.com/en/

2. Giant buttons

A button can be the most important element in any design. Buttons do everything from take users to the next page, help complete a step in a path of actions, or submit information in a form. A button is the end goal of a call to action and completes a feedback loop between the user and the interface design.

While button design has evolved some in recent years, there haven’t been many trends as big as this one: Designers are incorporating giant buttons into designs. (This is almost the exact opposite of the last button trend, ghost buttons.) Giant buttons are a fun alternative for users, but there is a trick to it. Users have to know the buttons are buttons. They can’t hide as a different type of design element.

In each of the three examples below, clever hover animations are the secret to button identification. Each design takes a unique approach:

• Bark Design: Large images display a headline and subhead as the user hovers indicating the potential for a click action.
• Mt. Cuba Center: The plant identification site uses hover actions so that buttons almost jump off the screen with color and by changing size. The animations are hard to miss and the imagery is so engaging that you want to click. (Almost every image is a link to more information.) There are two types of buttons in the design: Images that have a card-style look at the giant round purple button, shown below. What’s especially nice about the round button is that it looks like a button, but because it is so big you second guess it, but the hover state reveals the click option. That’s a fun element for users.
• Simon Foster: This portfolio site is interesting because elements that would not normally be used as buttons are just that. Each portfolio element is a button to more about the project. The simple black and white design comes to life with full color hover states that encourage users to click into each portfolio item.

http://barkdesignchicago.com/

http://mtcubacenter.org/

http://simonfosterdesign.com/home/

3. Geometric shapes

There are a number of ways to incorporate geometric shapes into a design project. You might use shapes as navigational elements, for buttons or background patterns. Cool geometry can also make an interesting overall aesthetic.

The use of hard-edged and straight-line geometric shapes takes some of the softness out of a design and gives it a more impactful feel. Sean Klassen juxtaposes soft and hard imagery in his portfolio website, below, by using flowers and complementary geometric shapes in the same dominant visual. All that really ties the elements together is color, but somehow the soft, curved lines of the roses and hard angles of the triangles work together.

Combining geometric shapes can also be a way to create a little something out of nothing when you are designing a website that really lacks visual information, such as The Graphic Design Conference, below. Shapes and bold color options can work together in a way that reminiscent of childhood. This subtle connotation can make a user feel fondly about a design.

Finally, converting a common element into a combination of geometric shapes can create a more interesting visual. The mouse, for example, from Cobay.es, below, would not be nearly as intriguing if it were a stock art version of a white mouse. That’s an image that users have seen, but the geometric version is different and the animated effect with the moving shapes around it adds to that visual interest.

http://seanjklassen.com/

http://projections.pl/?lang=en

http://cobay.es/en/

Conclusion

Do these bold design decisions appeal to you? Each of the trends this month are interesting on their own because they take common elements and super-size them. Bold color, giant buttons and fun geometry are all usable techniques, even if you don’t design an entire project around any one technique.

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.

Lifetime Access to Premium WordPress Themes with Themezilla “Forever” Membership – only $49!

Source

from Webdesigner Depot http://www.webdesignerdepot.com/2016/10/essential-design-trends-november-2016/

Popular design news of the week: October 24, 2016 – October 30, 2016

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers. 

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.

The Designers Guide to Git

 

10 Helpful Tools for Web Developers

 

10 Problems your Content Management System will not Solve and How to Overcome Them

 

What is Design Thinking and Why is it so Popular?

 

Design by Committee Ruins Famous Artwork

 

8 Things Every Creative Should Know

 

People are Freaking Out Over the New Macbooks’ Missing Escape Key

 

Presentation Design Inspiration

 

10 Tips to Teach Yourself Design & Boost your Design Skills

 

Design Freebies Websites

 

Indie Hackers – Learn How Developers are Writing their own Paychecks

 

The Power of Typography in Web Design

 

Why Friday’s Massive DDoS Attack Should Be Terrifying

 

Designers, We Need to Talk About Development

 

Material.io Gets a New Site Design

 

I Am Done Starting Startups

 

How to Make Color Overlays Work in your Design

 

Improving Perceived Performance with Multiple Background Images

 

You’ll Never Be a Design Specialist by Generalizing your Skills

 

How to Lift your UX Out of the Ordinary with Micro-Interactions

 

In Search of the Ultimate User Experience

 

Origami Studio by Facebook

 

How to Use CSS Shapes in your Web Design

 

When Illustrations Matter to the Design Process

 

Why is Creativity so Difficult?

 

Want more? No problem! Keep track of top design news from around the web with Webdesigner News.

LAST DAY: Learn 3D Modelling with The Blender Creator Course – only $19!

Source

from Webdesigner Depot http://www.webdesignerdepot.com/2016/10/popular-design-news-of-the-week-october-24-2016-october-30-2016/

Comics of the week #363

Every week we feature a set of comics created exclusively for WDD.

The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.

These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.

So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.

Feel free to leave your comments and suggestions below as well as any related stories of your own…

Social alarm

A little busy

 

Fire in the sky

Can you relate to these situations? Please share your funny stories and comments below…

5 Authentic Vintage Handmade Fonts from TSV Creative – Only $12!

Source

from Webdesigner Depot http://www.webdesignerdepot.com/2016/10/comics-of-the-week-363/

5 years of Foundation: a look back

This month, ZURB celebrates the 5th birthday of its Foundation front-end framework. This popular framework is known for its responsive grid, CSS and HTML user-interface components, code snippets, and templates. What makes it stand out as well is that it’s an open-source project.

In a blog post earlier this month, Danny Codella, ZURB’s marketer, wrote about the occasion and the many ways that Foundation has changed the design and development world. Essentially, Foundation started its life merely as an internal ZURB style guide to help its team build websites faster and more efficiently. From there, it’s gone on to be a framework that’s currently used by thousands of brands and millions of users.

In the last five years, Foundation has become a favorite of some of the world’s best designers, developers, businesses and brands.

Here’s a quick recap of some of the most important firsts of Foundation’s young existence:

Responsiveness – What makes Foundation stand out is that it was the first open-source framework to embrace responsive design. This was a testament to Foundation’s and, more broadly, ZURB’s philosophy of being a trailblazer. A few years ago, when Ethan Marcotte was just beginning to explain what responsive design was, most companies were developing for fixed pixel widths. Foundation made it simpler for designers and developers to wrap their heads around responsive.

Semantic markup – HTML5 moved the web toward semantic markup. This permitted consistency between what people see in a webpage and what a text reader or web crawler can identify. This was a huge development in the last few years. Early adoption was slow, yet Foundation’s semantic approach to it helped balance things for developers.

Mobile-first – Now that mobile has overtaken desktop in the number of users, allowing for mobile-first design was really revolutionary. Foundation was instrumental in popularizing the mobile-first mentality of design, significant because it happened right before mobile really took off! The mobile-first approach was sorely needed, as designers and developers used to design for desktop screens first and then look at mobile as an afterthought, which, as some will remember, led to very bad user experiences on smaller devices.

SASS – Rebuilding with Sass showed the build process to one and all. This allowed designers and developers to take charge of this framework, bringing it from a mere theme that designers would build on top of to a truly customizable framework that’s ready for any design.

Accessibility – ZURB’s philosophy is that the web should be for everyone. Foundation reflected this belief in that its Foundation for Sites 6 was reworked to include accessibility standards and inform Foundation users how to make their sites more accessibility-friendly. In short, many are learning accessibility basics from this framework.

In the last five years, Foundation has become a favorite of some of the world’s best designers, developers, businesses and brands. This is due to Foundation’s role in being a trailblazer and moving the web forward this way.

Looking to the future, front-end development is a hot place to be. Browser tech is always advancing, and JavaScript frameworks are empowering developers to build more sophisticated applications. You can bet that Foundation is going to continue to be at the forefront of this movement.

Build your own custom Photoshop and Illustrator panels – only $9!

Source

from Webdesigner Depot http://www.webdesignerdepot.com/2016/10/5-years-of-foundation-a-look-back/

20 essential CSS tricks every designer should know

This one’s for the absolute beginners. Once you’ve learned how the box model works, and how to float those boxes, it’s time to get serious about your CSS. To that end, we’ve compiled a massive list of tips, tricks, techniques, and the occasional dirty hack to help you build the design you want.

CSS can get tricky, and you should too. And now, in no particular order, (almost) everything you’ll need to know:

Absolute positioning

If you want control over where an element lives on our website at all times, absolute positioning is the key to making this happen. If you think of your browser as one big bounding box, absolute positioning allows you to control exactly where in that box an element will stay. Use top, right, bottom and left, accompanied by a pixel value to control where an element stays.

position:absolute;
top:20px;
right:20px

The CSS above sets the position of an element to stay 20px from the top and right edges of your browser. You can also use absolute positioning inside of a div.

* + selector

The * enables you to select all elements of a particular selector. For example, if you used *p and then added CSS styles to that, it would do it to all elements in your document with a <p> tag. This makes it easy to target parts of your website globally.

Overriding all styles

This should be used sparingly, because if you do this for everything, you’re going to find yourself in trouble in the long run. However, if you want to override another CSS style for a specific element, use !important after the style in your css. For example, if I wanted the H2 headers in a specific section of my site to be red instead of blue, I would use the following CSS:

.section h2 { color:red !important; }

Centering

Centering is tricky, because it depends on what you’re trying to center. Let’s take a look at the CSS of items to be centered, based on content.

Text

Text is centered using the text-align:center;. If you want it to either side, use left or right instead of center.

Content

A div (or any other element) can be centered by adding the block property to it, and then using auto margins. The CSS would look like this:

#div1 {
    display: block;
    margin: auto;
    width: anything under 100% 
}

The reason I put “anything under 100%” for width is because if it was 100% wide, then if would be full-width and wouldn’t need centering. It is best to have a fixed width, like 60% or 550px, etc.

Vertical alignment (for one line of text)

You will use this in a CSS navigation menu, I can almost guarantee that. The key is to make the height of the menu and the line-height of the text the same. I see this technique a lot when I go back and edit existing websites for clients. Here’s an example:

.nav li{
    line-height:50px;
    height:50px;
}

Hover effects

This is used for buttons, text links, bock sections of your site, icons, and more. If you want something to change colors when someone hovers their mouse over it, use the same CSS, but add :hover to it and change the styling. Here’s an example:

.entry h2{
    font-size:36px;
    color:#000;
    font-weight:800;
}

.entry h2:hover{
    color:#f00;
}

What this does is it changes the color of your h2 tag from black to red when someone hovers over it. The great thing about using :hover is that you don’t have to declare the font-size or weight again, if it isn’t changing. It only changes what you specify.

Transition

For hover effects, like with menus or on images in your website, you don’t want colors snapping too quickly to the end result. You ideally want to ease the change in gradually, which is where the transition property comes into play.

.entry h2:hover{
    color:#f00;
    transition: all 0.3s ease;
}

This makes the change happen over .3 seconds, instead of just instantly snapping to red. This makes the hover effect more pleasing to the eye and less jarring.

Link states

These styles are missed by a lot of designers, and it really causes usability issues with your visitors. The :link pseudo-class controls all links that haven’t been clicked on yet. The :visited pseudo class handles the styling of all of the links you’ve already visited. This tells website visitors where they have already been on your site, and where they have yet to explore.

a:link { color: blue; }
a:visited { color: purple; }

Easily resize images to fit

Sometimes you get in a pinch where images need to fit a certain width, while scaling proportionally. An easy way to do this is to use max width to handle this. Here is an example:

img {
    max-width:100%;
    height:auto;
}

This means that the largest the image could ever be is 100%, and the height is automatically calculated, based on the image width. In some cases, you might have to also have to specify the width at 100%.

Control the elements of a section

Using the image example above, if you only want to target the images of a certain section, like your blog, use a class for the blog section, and combine it with the actual selector. This will enable you to select only the images of the blog section, and not other images, such as your logo, or social meia icons, or images in any other sections of your site, like the sidebar. Here’s how the CSS would look:

.blog img{
    max-width:100%;
    height:auto;
}

Direct children

I wish I’d known this when I first started out using CSS. This would have saved me so much time! Use > to select the direct children of an element. For example:

#footer > a

This will select and style all of the active link elements that are immediately under the Footer ID. It won’t select anything past the active element, or anything else contained in the footer, like plain text. This works great with top level navigation elements, too.

Specific Child Elements

Believe me, this is handy when you are styling lists. You just need to count how many items down the element is that you want to style and then apply that style.

li:nth-child(2) {
    font-weight:800;
    color: blue;
    text-style:underline;
}

The CSS above targets the second item in the list and makes it bold, underlined, and blue. Add an “n” after the number in parenthesis and you can target every 2nd list item. Imagine being able to style every other line in a table-style layout for easy reading. The CSS would be:

li:nth-child(2)

Apply CSS to multiple classes, or selectors

Let’s say you wanted to add an identical border around all images, the blog section and the sidebar. You don’t have to write out the same exact CSS 3 times. Just list those items out, separated by commas. Here is an example:

.blog, img, .sidebar {
    border: 1px solid #000;
}

Whether you’ve been a web designer for years, or you’re just starting out, learning how to build websites the right way can seem like a rocky, never-ending journey. Once you’ve narrowed down which languages you want to learn, you have to learn and refine your skills.

No matter what you learn, CSS is one of those essential, but daunting skills you have to master. It doesn’t have to be so difficult, though, especially if you know a few handy and lesser-known CSS techniques to get the job done.

box-sizing: border-box;

This is a favorite among many web designers, because it solves the problem of padding and layout issues. Basically, when you set a box to a specific width, and add padding to it, the padding adds to the size of the box. However, with box-sizing:border-box;, this is negated, and boxes stay the size they are meant to be.

:before

This CSS is a selector that allows you to choose a CSS element and insert content before every element with a specific class applied to it. Let’s say you had a website where you wanted specific text before every H2 tag. You would us this setup:

h2:before { 
    content: "Read: ";
    color: #F00;
}

This is extremely handy, especially if you are using an icon font. You can place icons before certain elements, and apply it globally.

:after

Like the :before selector, you can use :after to insert content globally on specific elements. A practical use would be adding “read more” after every excerpt on a blog. Here’s how you would do that.

p:after{ 
    content: " -Read more… ";
    color:#f00;
}

content

content is a CSS property that comes in handy when you need to insert an element that you want to be able to control. The most common use I’ve seen for this is to insert an icon from an icon font in a specific place. In the examples above, you can see that you have to wrap the text you want to insert in quotation marks.

CSS reset

Different browsers have default CSS settings, so it is a must to reset those, so you have an even, consistent playing field. Think of it as building a house, and whether you build on the side of a mountain, on a sandy beach, or on the middle of a wooded area, you want that foundation to be level.

This CSS reset method sets a standard base for all of your websites, giving them consistency in their CSS starting point. It removes unwanted borders, preset margins, padding, lines heights, styles on lists, etc. Eric Meyer created one that works well.

Drop caps

Everyone loves drop caps. It reminds us of the traditional printed book, and is a great way to start a page of content. That 1^st, large letter really grabs your attention. There’s an easy way to create a drop cap in css, and it’s by using the pseudo element: :first letter. Here’s an example :

p:first-letter{
    display:block;
    float:left;
    margin:3px;
    color:#f00;
    font-size:300%;
}

What this does is set the letter to 3x the size of the other letters. It sets 3px of space around the letter to prevent overlapping, and sets the color of the letter to red.

Force text to be all caps, all lowercase, or capitalized

It would be absurd to type an entire section in all caps. Imagine having to go back and fix that later when the format of the website changes, or it gets updated. Instead, use the following css styles to force text to a certain formatting. This css targets the h2 title tag.

• h2 { text-transform: uppercase; } – all caps
• h2 { text-transform: lowercase; } – all lowercase
• h2 { text-transform: capitalize; } – capitalizes the 1^st letter of each word.

Vertical screen height

Sometimes you want a section to fill the entire screen, no matter what the screen size is. You can control this with vh, or view height. The number before it is a percentage, so if you want it to fill 100% of the browser, you would set it to 100. You might set it to a value like 85% to accommodate a fixed navigation menu.

Create a class for the container and apply the amount of vh you want it to have. One thing you may need to tweak is the media query value for specific screens or orientations like phones in portrait mode. Imagine stretching a landscape image to fit portrait mode. That just wouldn’t look good.

.fullheight { height: 85vh; }

Style telephone links

If you have a link that calls a phone number when a user taps it on their phone, you may have trouble styling it with the traditional active link selector. Instead, use the following CSS:

a[href^=tel] {
    color: #FFF;
    text-decoration: none;
}

Build your own custom Photoshop and Illustrator panels – only $9!

Source

from Webdesigner Depot http://www.webdesignerdepot.com/2016/10/20-essential-css-tricks-every-designer-should-know/