Archive for year: 2017

Original Source: https://www.webdesignerdepot.com/2017/12/the-state-of-web-design-december-2017/

I might have noticed a trend or two in web design this last year.

Let me rephrase that: I spend the vast majority of my time online. I do my shopping, here, and my work, and a lot of my leisure reading. I browse the Internet mid-gaming, whether to look up information on the game I’m playing, or just to entertain myself some more because my ADD is really that bad. I even spend a huge amount of time browsing portfolio sites, where designers get to live out their design fantasies.

And even with all of that, I know for a fact that I’ve barely scratched the surface of this huge-ass network. But in my corner of it—the corner mostly dominated by Western designers—I have noticed a trend or two. And here’s where we are:

Revenge of the Flash

No, not that Flash. I wish. Watching Barry Allen tear the world apart with his sheer ridiculous power would be kind of awesome.

I believe that we are currently in the middle of a light backlash, though few might say it that way. It’s a response to the trend of flat design (and the short moment of brutalism that would follow). But instead of making 3D-looking dials and knobs on every UI again, many people seem determined to resurrect Flash, or at least call up its spirit and put it into JavaScript’s body.

Designers very quickly got tired of “flat design” as a style. I don’t blame them. Many people just grabbed a framework that looked like Material Design and didn’t think too much about it. Nowadays, while many sites are still technically flat, they try to avoid the feel of flat design, and even the word itself. Their answer to this has been to take advantage of HTML5 and JavaScript to animate pretty much everything they could think of. Think I’m kidding?

Daniel Archam’s brutalist-looking website depends on JS to work at all. And it has a screen-saver. Now don’t get me wrong: it’s a creative and good-looking site. I even featured it in November’s monthly portfolio article. But you can’t deny that there’s a certain mentality at work, here.

The response to flat design has been turn it into flash design. Or some weird post-minimalist thing. Or some combination of the two. This mentality has resulted in some beautiful and highly innovative websites that are unintuitive, inaccessible, and generally a pain to use.

I predict that the pendulum will swing once more (now there’s a safe prediction if I ever saw one). Web standards advocates will probably turn their attention to JS and animation in general, and point out some of the flaws inherent websites that require JS to show their content at all. Then some people will take that too far, and ditch JS entirely, and perhaps CSS, too. Then there will be a backlash to that.

I’m only mostly kidding about that last part.

The Divide

I feel like the web design community may, for a while, become split in two. I mean, it kind of already is, but it might even become official. The two primary parties will probably be what I call The Standardistas and the Experimentalists.

The Standardistas are dedicated to making sure the web is accessible, usable, and as idiot-proof as humanly possible. If they can build it without touching JavaScript, they will. If they can make it a static site, they probably will. Fancy animations and effects are used minimally.

The Experimentalists are tired of being constrained by the technology of our era. As far as they’re concerned, if the user’s JavaScript is broken, or their browser is outdated, who cares? Their target demographic uses up-to-date hardware and software. They’re going to try new things, because they intend to lead the next wave of innovation, or at least follow right behind whomever is leading it.

Those are extreme descriptions, of course. Any good designer will recognize characteristics of both sides in themselves. The industry needs both. But as the pendulum keeps swinging, I can see more and more designers choosing one path over the other to some extent. I doubt it’ll ever come to blows, metaphorical or physical, but a contest of sorts may one day come.

Variety Ain’t Just a Magazine

People love their bandwagons. While some people are set on going their own way, and others are set on going whatever way is opposite the majority, most love a trend. This isn’t necessarily a bad thing. In web design, trends have been used to teach basic design principles, help new technologies catch on, oppose bad practices, and so on.

Sure, adopting a design trend without clearly understanding what it’s for has caused some issues. However, I’d say that overall, trends have pushed the web forward. The fact that a whole lot of websites end up looking almost exactly the same is probably just the price we pay.

That all being said, I have seen a lot more variety this year than in previous years. Maybe that’s because I was looking for it, though I doubt it. I’ve always looked for variety, and it has occasionally been darned difficult to find.

And then maybe it’s because we have a wide variety of trends now, and people are getting on board with all of them. Perhaps that’s the future of web design: if we eventually create hundreds or thousands of distinct aesthetic trends, we’ll get some variety by the sheer force of statistics. I can think of worse futures for the industry.

All around, I think we’re in for interesting times, and a lot of debate. I personally can’t wait.

Hi-Res Xmas Mockup Scene Generator – only $14 $10!

Source

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

Original Source: http://feedproxy.google.com/~r/1stwebdesigner/~3/9IRvQ8t-QKU/

Designer workspaces are an ever-popular source of inspiration. Creatives often enjoy looking at the computer and equipment a designer uses, their often-minimalist desk and furniture, or even the prints or art they have on their wall.

There’s plenty to be inspired by and draw from when putting together or rearranging your own workspace setup.

In this article, we’re going to round up a selection of the most beautiful and inspiring designer workspaces from the past year.

Workspace

Beautifully spacious, this minimalist workspace combines the simplicity of Apple products and white furniture, with some creative chairs and a bright red bean bag.

My Workstation

Eddie’s workspace shows off his wonderfully customized MacBook lid, covered with some beautiful stickers. He uses a Wacom tablet and curved widescreen monitor.

My Workplace!

A little messy, but nonetheless inspiring, Svetlana’s workspace is filled with cards, prints, coloring pens and pen tablets. The iPad Pro is also used for illustration.

Workstation

This futuristic example is beautifully themed with purple throughout. The lighting is atmospheric and reminiscent of a gamer setup.

Workspace 2017

This workspace includes a beautiful colorful print, action figures, and a limited PS4 games console. It’s simple but playful and offers a balance between minimalist and maximalist.

Workstation

Very minimal in its setup, this workspace uses an abundance of white, with a beautifully curved seat and fancy lighting, walls and an unorthodox pencil pot.

Workspace

Similarly minimalist, this setup uses a glossy white desk with a signed photo, simple clock, and small cactus plant.

Home Workspace Setup

Using a wall-mounted monitor, this setup is extremely colorful against the teal wall behind. The desk looks high quality and has been carefully themed with lighting and items like the clock and lamp.

Original Source: http://feedproxy.google.com/~r/tympanus/~3/88gNj-zE9ZA/

Today we’d like to show you how to create a little experimental glitch-like effect on an image. The effect will be powered by CSS animations and the clip-path property. The technique involves using several layers of images where each one will have a clip-path, a blend mode and a translation applied to it. It was inspired by the technique seen on the speakers page of the 404 conference.

Please note this effect is very experimental; we use several properties that won’t work in older browsers. The clip-path property is not supported in IE or Edge.

We also use CSS variables for setting some properties that will allow for an easy adjustment of the effect.

Breaking down the effect

When searching the web for an easy to use and light-weight glitch implementation, we came across this question on Reddit. Somebody was asking how the glitch effect was pulled off on the speaker line up page of the 404 conference. The glitch effect was made using CSS animations on a stack of three images that are the same. The animations consist of a rapidly changing clip property on all layers except the first one. Additionally, the layers are being moved slightly. So what we are seeing, is slices of the image, slightly offset and in constant movement.

We wanted to experiment with this and recreate the effect using the clip-path property instead. Although it has less browser support (it doesn’t work in IE or Edge), it allows for a more flexible usage since we can use percentage values and apply it to elements that are not necessarily positioned absolutely.

Combining the effect with background blend modes, allows us to create some interesting looking image effects.

The way this works is to create an image stack where each overlaying image will animate its clip-path in, what looks like, random sizes. We’ll use a stack of 5 images:

<div class=”glitch glitch–style-1″>
<div class=”glitch__img”></div>
<div class=”glitch__img”></div>
<div class=”glitch__img”></div>
<div class=”glitch__img”></div>
<div class=”glitch__img”></div>
</div>

Let’s have a look at the main styles for the hover effect that you can see in the last demo. Note that we’ve defined some variables previously, but they should be self-explanatory:

.glitch {
position: relative;
width: var(–glitch-width);
max-width: 400px;
height: var(–glitch-height);
max-height: calc(400px * 1.25);
overflow: hidden;
margin: 0 auto;
}

.glitch:hover {
cursor: pointer;
}

.glitch__img {
position: absolute;
top: calc(-1 * var(–gap-vertical));
left: calc(-1 * var(–gap-horizontal));
width: calc(100% + var(–gap-horizontal) * 2);
height: calc(100% + var(–gap-vertical) * 2);
background: url(../img/1.jpg) no-repeat 50% 0;
background-color: var(–blend-color-1);
background-size: cover;
background-blend-mode: var(–blend-mode-1);
}

We don’t want to show the sides being cut off, so we make sure that the image dimensions take the gap, i.e. the movement into consideration.

Then, we set the background colors and blend modes for each layer:

/* Set the background colors for the glitch images*/
.glitch__img:nth-child(2) {
background-color: var(–blend-color-2);
background-blend-mode: var(–blend-mode-2);
}

.glitch__img:nth-child(3) {
background-color: var(–blend-color-3);
background-blend-mode: var(–blend-mode-3);
}

.glitch__img:nth-child(4) {
background-color: var(–blend-color-4);
background-blend-mode: var(–blend-mode-4);
}

.glitch__img:nth-child(5) {
background-color: var(–blend-color-5);
background-blend-mode: var(–blend-mode-5);
}

As this is going to be a hover effect, we want all layers except the first one to be hidden by default:

.glitch__img:nth-child(n+2) {
opacity: 0;
}

Then, on hover, we show all layers:

.glitch:hover .glitch__img:nth-child(n+2) {
opacity: 1;
}

And we also apply the animations and a transform to each layer:

.glitch:hover .glitch__img:nth-child(2) {
transform: translate3d(var(–gap-horizontal),0,0);
animation: glitch-anim-1-horizontal var(–time-anim) infinite linear alternate;
}

.glitch:hover > .glitch__img:nth-child(3) {
transform: translate3d(calc(-1 * var(–gap-horizontal)),0,0);
animation: glitch-anim-2-horizontal var(–time-anim) infinite linear alternate;
}

.glitch:hover > .glitch__img:nth-child(4) {
transform: translate3d(0, calc(-1 * var(–gap-vertical)), 0) scale3d(-1,-1,1);
animation: glitch-anim-3-horizontal var(–time-anim) infinite linear alternate;
}

/* Hover flash animation on last image */
.glitch:hover > .glitch__img:nth-child(5) {
animation: glitch-anim-flash 0.5s steps(1,end) infinite;
}

The calc(-1 * var(–gap-horizontal)) basically allows us to set a negative value of a given variable.

Have a look at this slow motion visualization to see what’s going on under the hood (this GIF is quite big, so it might take a while to load):

The last layer is only flashing and moving slightly while the others also get cut by a clip-path.

Let’s have a look at one of the animations for setting the clip-path:

@keyframes glitch-anim-1-horizontal {
0% {
-webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
}
10% {
-webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
}
20% {
-webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
}
30% {
-webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
}
40% {
-webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
}
50% {
-webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
}
60% {
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
}
70% {
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
}
80% {
-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
}
90% {
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
}
100% {
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
}
}

The slices will go from tiny, to a bit larger and also nothing, leaving a “pause” on some of the frames and then starting again from another position.

A great tool to visualize clip paths is Clippy by Bennett Feely.

The final animation is a simple flash of the last layer:

@keyframes glitch-anim-flash {
0% {
opacity: 0.2;
transform: translate3d(var(–gap-horizontal), var(–gap-vertical), 0);
}
33%, 100% {
opacity: 0;
transform: translate3d(0,0,0);
}
}

This looks especially interesting when applying an overlay blend mode with a fitting color.

Note that we can also apply this effect to text elements. Check out the demos to see it in action!

And that’s it! We hope you’ve found some inspiration in this little experiment.

References and Credits

Images by Unsplash.com
imagesLoaded by Dave DeSandro

CSS Glitch Effect was written by Mary Lou and published on Codrops.

Original Source: http://feedproxy.google.com/~r/1stwebdesigner/~3/XpS3Na-3JQA/

Reddit is the #1 social news community for every topic. Sports, gaming, fishing – there’s a community for everyone. Naturally this includes all kinds of design topics from web to mobile.

So I’ve curated my picks for the top 10 subreddits geared towards designers. Each sub comes with a different community, but all of them can be useful if you’re looking for design ideas or advice from other designers.

Take a look and see what you think!

1. /r/Design

First in this list has to be /r/Design. This subreddit is also one of the largest digital design subs with over 200k subscribers.

Granted, this community isn’t just focused on interface design. It runs the gamut of digital design including logos, branding, print work and even motion graphics. There’s a lot you can learn from skimming the front page.

But it’s also one of the best subs to pick up ideas for new projects, find cool interviews, or just share your ideas with the community. Since it’s a fairly large sub you’re guaranteed to get some comments on anything you post.

2. /r/web_design

The default web design community is /r/web_design and it has been around for quite a few years. This one’s even larger than the main design sub with more active posts per day.

At the time of this writing it has a total of 290k subscribers and counting. Many front page articles relate to guides, tutorials and general resources for web design.

But this is also a place for newbies to come and ask basic questions. You’ll see a lot of beginner-level questions on the front page so this can feel like an introductory forum at times. Yet there’s also a good number of pros who lurk around as well. This one is full of gems.

3. /r/webdev

It may seem weird that I’m recommending a development community in a UI/UX design list. But /r/webdev isn’t just for developers. In fact, it’s mostly a frontend community so there’s a lot of overlap.

The front page updates daily with new posts, most of which relate to professional development work. HTML, CSS, and JavaScript are key topics. If you consider yourself a designer who codes, you should definitely subscribe.

But even if you don’t code, this is still a great community to keep up with the pulse of modern web development.

4. /r/userexperience

Reddit’s /r/userexperience sub is pretty small but very active. Most regular users comment frequently and the sub has grown a lot over the years.

User experience is a tricky subject because it doesn’t just relate to websites. It can cover mobile apps, software and pretty much anything that’s interactive and digital.

This sub is a fantastic place to learn and pick up advice relevant to the UX field.

Also, if you want another place to browse, this subreddit is one of the more active UX communities.

5. /r/UI_Design

General interface design is a broad topic with a lot of room for discussion. The /r/UI_Design community is a small one, and not necessarily the most active.

But it does allow for a huge range of topics – so long as they relate to interface design. It’s a great place to share an article you’ve read or even share an article you wrote on your blog.

Each day there’s an estimated 2-4 new posts, so the front page does move. The community is also engaging if you pose a great question about design.

6. /r/servers

You may not think that designers need to know anything about servers. But if you work as a freelancer, then you should understand them – at least at a basic level.

On the /r/servers subreddit you’ll find advice for managed hosting, VPS hosting and shared hosting alike. Depending on the type of site you’re launching, this subreddit can help you make a great decision that will fit your needs.

However, it can also be a fairly complex community, discussing more advanced technologies like memcached & varnish. You certainly don’t need to delve that far, but it helps to have a working knowledge of web servers.

7. /r/learnwebdesign

While this sub is small and very quiet, I still think /r/learnwebdesign is a great place to subscribe.

It’s a small community geared towards beginners and semi-intermediate designers. Every post links to a tutorial or detailed article that can help improve your design skills.

Articles range from how-tos in Photoshop all the way to more technical guides for frontend design in the browser.

8. /r/design_critiques

Here’s a much larger and more active sub, totaling nearly 30k subscribers at the time of this writing.

In /r/design_critiques, you can post your work and ask for honest critiques. The community is full of beginners, semi-skilled pros and industry veterans alike. This means the critiques you’ll get can range from simple quips to incredibly useful paragraphs.

For a free community, it’s one of the best you’ll find on this topic. Whether you just need a small pick-me-up or need genuine design advice, I highly recommend checking out this sub.

And, you can even learn from the critiques of other people’s work – if you browse around long enough.

9. /r/usability

Humans are the ones who use technology and it’s humans that we’re designing for. The /r/usability community forces you to keep this in mind by sharing articles related to HCI and general usability.

This sub is not just about web design. It covers everything related to usability from wearables to desktop software.

But what I’ve found is that most usability topics relate to each other. Yes, there are differences between mediums and devices, but usability is an easy topic to read through once you understand the main goal: to help the end user.

10. /r/UnsolicitedRedesigns

I stumbled onto this sub a few years back and it’s been one of my favorites to hit every so often. As the name suggests, /r/UnsolicitedRedesigns is a curation of redesign projects created by designers – just for fun. They include new branding & identity designs, new websites and mobile apps.

It’s a pretty small community and there’s usually about 1-2 new posts per week.

Still, the community is fantastic and some of the constructive critiques are surprisingly helpful. It’s a place you come back to time & again for new ideas.

Original Source: https://www.webdesignerdepot.com/2017/12/whats-new-for-designers-december-2017/

The holiday season is upon us, and that’s the perfect time to give yourself a few design goodies. While the season for new releases has slowed some, there are still plenty of news design tools and beta releases to test out. Take the opportunity to play with some of these great new elements for designers.

If we’ve missed something that you think should have been on the list, let us know in the comments. And if you know of a new app or resource that should be featured next month, tweet it to @carriecousins to be considered!

DesignEvo

Want to create a logo on your own in just a few minutes? DesignEvo is a free online logo maker that has more than 3,000 templates to help you create a simple logo in a hurry. Search by template type (or brand category) to start working on a custom logo right away. Everything you need, including icons, color swatches and fonts, are included in your logo design.

Oiga

Project management tools are a must have part of the creative workflow. Every project comes with assets, colors, fonts, files and schedules that team members have to be aware of. Oiga, which is currently in beta, is a modern project management tool that helps you keep track of everything in one place. It’s designed for remote work and unlike many other project management tools, it also includes an asset manager so that everything is in one place.

Google Poly

Google is developing a great repository of three-dimensional assets for AR and VR apps. What’s even better is that all of these assets are open source and come with creative commons licenses so that you can use them. The database is growing quickly and is a great resource for getting started with these cutting-edge apps.

Flawless

Flawless is an app that uses real-time comparisons of expected and implemented designs to help you ensure the quality of mobile apps.

SessionStack

Ever wonder what your app looks like to users? SessionStack helps you see web app problems in the same way users do. This tool can help you pinpoint and correct small issues before they become major problems. The biggest feature of this tool is the record and playback tool.

Direction Reveal

Direction Reveal is a plugin that detects which direction a user enters and exits a block so that content and hover actions follow the same user action. Hidden content animates from the direction the user enters or can animate based on the direction a user leaves. This makes for pretty interesting animated effects. Animations can swing, slide or rotate.

Color Scheme Generator

Generate a color palette from a base color. See different optimum color combinations rooted in color theory. This is a great tool for designers that struggle with picking colors.

Superstruct

Superstruct makes it easy to define interfaces and then validate JavaScript data against them. It is designed for validating data at runtime, so it throws (or returns) detailed runtime errors. This can be useful for accepting arbitrary input in a REST or GraphQL API. But it can also be used to validate internal data structures at runtime.

World City Icons

The world cities icon pack includes graphic representations of popular cities from around the globe. Each icon is drawn in a vector format and collections include Asia and Oceania, Middle East and Africa, Europe, North and Central America and South America. Each icon comes in line style, but can be filled.

Threed

Threed helps you generate three-dimensional mockups in-browser. Just upload a design, adjust a few settings and download the mockup. The tool, which is still in beta, is free to use.

Scri.ch

Draw something on the screen and save the unique link to share. It’s like the grown up (digital) version of an Etch-a-Sketch.

Akaunting

With so many creative professionals working in the gig economy, it’s important to have plenty of effective and low-cost tools to help with business tasks. Akaunting is free accounting software for small businesses and freelancers. It is an open source tool that provides invoicing, expense tracking and basic accounting so you can keep up with finances easily.

Orion

This tool bills itself as the best icon tool with a large database of elements to search, download and customize. The search features are robust when it comes to finding just what you envision (and don’t want to draw yourself).

Electron Toolkit

Electron Toolkit is a lightweight open source application to launch Electron apps. It bundles a suite of tools to generate assets and artifacts such as installers, binaries, icons, screenshots, and product videos. You can even generate full landing pages.

Instabug Integrations Tool

The Instabug Integration Tool help you receive detailed bug reports and in-app messages directly from whatever tools you use. Whether it’s Jira, GitHub, Slack and more, there are dozens of integrations to help your team focus on what matters without disrupting workflow.

Creative Equals

There’s a lot of talk about making sure the creative space is welcome, diverse and inclusive. Creative Equals includes resources and information to help you or your business, and the industry as a whole, drive change and provide a more equal playing field for all creatives. It’s packed with training resources, campaigns and even a talent recruiting tool.

Lona Studio

Airbnb has a new tool for defining and using design systems and it is making the experiment public. “What if we had a single design system specification that encodes all of the detail needed to accurately translate from design to code? This spec would act as the source of truth. An engineer could then write code which captures the design with 100% accuracy. If the design file is missing a key piece of information, the designer and engineer could work together to add it to the source of truth.” That’s the concept of Lona, which operates on component files and is supposed to work with your current design tools.

Ballada

Ballada is a brush-style typeface with a slanted stance and plenty of loops and curves. It has a somewhat feminine feel and is designed for display use. It is free for personal and commercial projects.

Brewmaster Gothic

Brewmaster Gothic is a block-style sans serif for display type. The typeface is powerful and bold and includes a full set of uppercase letters.

Onomber

Onomber is an interesting geometric style typeface with mixed cap heights for extra visual interest. It has open letterforms that can work well in display uses.

Spirited

Spirited is a set of hand-drawn letters that create a modern script with a retro feel. This typeface could work for logos, display type or other special projects that require a font with a special touch.

Studio Gothic

Studio Gothic is a simple sans serif with uniform stroke widths with thick and thin options. The versatile typeface can work for display or larger text blocks and has a modern feel.

3500+ Textures, Brushes, Icons, Watercolors & More Graphic Elements

Source

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}