Tag Archives: tutorial

Prototyping An App’s Design From Photoshop To Adobe XD

(This is a sponsored article.) Designing mobile apps means going through different stages: pre-planning, visual concepts, designing, prototyping, development. After defining your project, you need to test how it will work before you begin to develop it.

This stage is captured by prototyping. Prototyping allows designers to get a feel for the functionality and flow of an app, and to preview screens and interactions. Testing with prototypes provides valuable insights into user behavior and can be used to validate the interaction model. It is possible to represent the interactivity of an app before its development, and this gives developers a global vision of an app’s functioning, user behavior and steps to afford.

Prototyping is the simulation of the final result of an app’s development. Through this step, it’s possible to show a workflow of an app and consider problems and solutions. The two fundamental roles who will work in this phase are the user interface (UI) designer, who creates the look and feel, and the user experience (UX) designer, who creates the interaction structure between elements.

There are many ways to design and create an app’s look. As a loving user of Adobe products, I work most of the time in Illustrator and Photoshop. Illustrator helps me when I create and draw UI elements, which I can simply save and use later with Adobe XD. The process is the same as I’ve done for icons and that I showed you in my previous article “Designing for User Interfaces: Icons as Visual Elements for Screen Design.”

Photoshop comes in handy when I have to work with images in UI. But that’s not all: With the latest Adobe XD release, we can bring Photoshop design files into XD very quickly, and continue prototyping our app.

Today, I’ll offer a tutorial in which we discover how to transfer our app’s design from Photoshop to XD, continuing to work on it and having fun while prototyping. Please note that I’ve used images from Pexels.com in order to provide examples for this article.

We will cover the following steps:

  1. Simple hand sketch,
  2. Designing In Photoshop,
  3. Importing PSD files to XD,
  4. Developing a prototype,
  5. Tips.

For Adobe tools, I will use Photoshop CC, Illustrator CC and XD CC — all in the 2018 versions.

Let’s get started!

1. Simple Hand Sketch

Before we start designing our app, we need a plan for how to go about it. There are some questions we have to answer:

  • What is the app for?
  • What problem does it solve?
  • How easy is it to use?

Let’s assume we want to create an app for recipes. We want something simple: a space for pictures with ingredients and recipes.

I sketched by hand what I have in mind :



Then, I grabbed Photoshop and created my layouts.

2. Designing In Photoshop

Before we create layouts for our app, we can take advantage of a very useful resource by Adobe: free UI design resources. Because we will be designing an iOS app, I downloaded the iOS interface for Photoshop.

Feel free to experiment with the layouts you’ve downloaded.

In Photoshop, I created a new blank document from a preset for the iPhone 6 Plus:



Below is our layout, as I designed it in Photoshop. I tried to reproduce what I drew by hand earlier.









The PSD file contains four artboards. Each has its own layers.

Note: The images used in this prototype are from Pexels.com.

Let’s see how to import this PSD file into Adobe XD.

3. Importing PSD Files To Adobe XD

Let’s run Adobe XD and click on “Open.” Select our PSD file, and click “Open.”



Ta-dah! In a few seconds, you’ll see all of your PSD elements open in XD.



More importantly, all of the elements you just imported will be organized exactly as they were in Photoshop. You can see your artboards on the left:



When you select an artboard, you will see its layers on the left — exactly the way it was in Photoshop before exporting.



Let’s do something in XD to improve our layout.

Go to Artboard 3. In this artboard, I want to add some more images. I just created three spaces in Photoshop to get an idea of what I want. Now, I can add more with some very simple steps.

First, delete the second and third image. From the first rectangle, delete the image, too, by double-clicking on it. You’ll have just one rectangle.



With this rectangle selected, go to “Repeat Grid” on the right and click it. Then, grab the handle and pull it downward. The grid will replicate your rectangle, inserting as many as you want. Create six rectangles, and adjust your artboard’s height by double-clicking on it and pulling its handle downwards.





Now, select all of the images you want to put in rectangles, and drag them all together onto the grid you just created:

Et voilà! All of your pictures are in place.

Now that all of the layouts are ready, let’s play with prototyping!

4. Developing A Prototype

Let’s begin the fun part!

We have to create interactions between our artboards and elements. Click on “Prototype” in the top left, as shown in the image below.



Click on the “Start here” button. When the little blue arrow appears, click and drag it to the second artboard. We are connecting these two artboards and creating interaction by clicking the intro button. Then, you can decide which kind of interaction to use (slide, fading, time, etc.).

See how I’ve set it in the image below:



Scrolling tip: Before viewing our prototype preview, we need to do another important thing. We have to make our artboards scrollable, giving them the same effect as when pushing a screen up and down with a finger on the phone.

Let’s go back a step and click on “Design” in the top left. Check which artboards are higher — in this case, the third and fourth. Select the third artboard from the left, and you’ll see the section “Scrolling” on the right. Set it to “Vertical.”

Then, you’ll see that your “Viewport Height” is set to a number, higher than the original artboard’s size. That’s normal, because we made it higher by adding some elements. But to make our artboard scrollable, we need to set that value to the original artboard’s size — in this case, 2208 pixels, the height of the iPhone 6 Plus, which we set in Photoshop and then imported to XD.

After setting that, you’ll see a dotted line where your artboard ends. That means it is now scrollable.



To see our first interactions in action, click on “Prototype” in the top left, and then click the little arrow in the top right. See them in action below:

Let’s finish up by connecting all of our artboards, as we’ve seen before, and check our final prototype. Don’t forget to connect them “back” to the previous artboard when clicking on the little arrow to go back:



And here is the final demo:

In this tutorial, you have learned:

  • that you can design your app in Photoshop,
  • how you can bring it into Adobe XD,
  • how to create a simple prototype.

Tips

  • Decide on one primary action per screen, and highlight its containing element through visual design (e.g. a big CTA).
  • White space is very important on small screens. It prevents confusion and gives the user more clickable space. And here comes that rule again: One primary action works well with more white space.
  • If you are not on a desktop, avoid all unnecessary elements.
  • Always test your prototypes with regular users. They will help you to understand whether the flow is easy to follow.

This article is part of a UX design series sponsored by Adobe. Adobe XD is made for a fast and fluid UX design process, as it lets you go from idea to prototype faster. Design, prototype, and share — all in one app. You can check out more inspiring projects created with Adobe XD on Behance, and also sign up for the Adobe experience design newsletter to stay updated and informed on the latest trends and insights for UX/UI design.

Smashing Editorial
(ra, al, il)

Source article:

Prototyping An App’s Design From Photoshop To Adobe XD

Free Sparkly Icons To (Literally) Make Your Designs Shine (30 Icons, EPS, SVG)

What would life be without surprises? Pretty plain, wouldn’t you agree? Today, we are happy to announce a freebie that bubbles over with its friendly optimistic spirit, bound to sprinkle some unexpected sparks of delight into your projects: Ballicons 3. If that name rings a bell, well, it’s the third iteration of the previous Ballicons icon set created by the folks at Pixel Buddha.
This icon set covers a vibrant potpourri of subjects, 30 icons ranging from nature, travel and leisure motifs to tech and office.

Continue at source – 

Free Sparkly Icons To (Literally) Make Your Designs Shine (30 Icons, EPS, SVG)

A Detailed Introduction To Webpack

JavaScript module bundling has been around for a while. RequireJS had its first commits in 2009, then Browserify made its debut, and since then several other bundlers have spawned across the Internet.

A Detailed Introduction To Webpack

Among that group, webpack has jumped out as one of the best. If you’re not familiar with it, I hope this article will get you started with this powerful tool.

The post A Detailed Introduction To Webpack appeared first on Smashing Magazine.

Read the article: 

A Detailed Introduction To Webpack

How To Create Icons In Adobe XD

Released in March this year, Adobe Experience Design is a new all-in-one tool that lets you design and prototype websites and mobile apps. XD is still in beta and available for Mac with a Windows version on track for a release later in 2016. It is bound to provide a fast and efficient way to create new user interfaces, wireframes, and visual designs with various devices in mind.

Creating Icons With Adobe XD

As an icon creator, I tried to use XD to create icons from scratch and to apply them to a new user interface. In this tutorial, I want to guide you through the steps it took so you can follow along. We’ll take a look at how to create a set of office icons for a new app. Plus, I’m going to show you how you can use XD’s features to interact with your newly-created user interfaces during the prototyping phase. So, let’s get started.

The post How To Create Icons In Adobe XD appeared first on Smashing Magazine.

View this article – 

How To Create Icons In Adobe XD

Thumbnail

Designers: Start Coding With uilang

Editor’s Note: Designers could learn how to code, and developers could learn how to design. Sometimes it might not be an option. In this article, the author makes a suggestion to designers without coding skills on how to start crafting code. You might want to take the suggested tool with a grain of salt (or not) but the idea might be worth looking into.

Designers have widely adopted HTML and CSS for a while now. They usually feel comfortable enough to implement their own designs, at least in a static form. However, they’re often intimidated by JavaScript — and rightly so! HTML and CSS are declarative and, I’d argue, closer to design than programming.

JavaScript, on the other hand, is “real” programming. This means you not only have to learn a whole new and complex syntax but also have to “learn how to think.” The barriers to entry are high and prevent many designers from taking the plunge. uilang1 tries to fix that.

This article will introduce you to uilang’s philosophy and syntax. We’ll start with a simple example to get you comfortable with the basics, before moving to something more exciting. At the end of this tutorial, you’ll (hopefully!) be able to code many typical interface widgets, such as popovers, tabs, overlays and much, much more.

The Bridge Between Designers And Developers

I strongly believe that designers should code the interfaces they design. They shouldn’t necessarily write production-ready code, but they should design the behaviors. Designers love these things. They could spend hours tweaking an animation delay or finding the right cubic-bezier curve. They usually just lack some technical skills to do so.

uilang tries to facilitate the communication between designers and developers by giving designers an extremely simple tool to prototype their interfaces. uilang reads like plain English, uses a one-line syntax declared right in the HTML and provides very few options in order to make its learning process and adoption as fast and easy as possible. We’ll cover the syntax in detail later, but here’s a sneak peek at it:

clicking on "button" toggles class "visible" on "div"

uilang is not exclusively a prototyping tool, though. It can safely be used on production websites to create, for example, tabs, photo galleries, popovers and more. Let’s see how it works!

Getting Started

uilang is based on a dead simple principle: manipulating classes on your elements. By just adding and removing classes when something is clicked, we can show, hide, transform and animate elements using CSS. This simple logic gives you endless possibilities. Let’s explore one of them by creating a simple notification banner like this:

See the Pen bNWaVz2 by Benjamin De Cock (@bdc3) on CodePen4.

We’ll start with the HTML markup, which is pretty straightforward:

<div id="notification">
  <p>You have 3 unread messages.</p>
  <button class="hide">Hide</button>
</div>

We’ll now use uilang to define a simple behavior: When the user clicks on an element that has a hide class, we’ll add a hidden class to the element that has a notification ID. The translation in actual uilang code looks almost the same as the explanation above:

clicking on ".hide" adds class "hidden" on "#notification"

This line of code should be written in a simple <code> element, right in the
HTML. uilang will automatically find the <code> element containing your
code and will ignore other <code> elements that you might have on the page.
Additionally, you’ll have to download and insert the uilang.js library5 (1 KB).

While both your <code> and <script> elements can
theoretically be inserted anywhere on the page, it’s recommended to place them at the very end of the document, just before the closing </body> tag:

<body>
  <!-- Your content -->

  <script src="uilang.js"></script>

  <code>
    <!-- Your uilang code -->
  </code>
</body>

By respecting that order, you’re making sure to reach the best rendering performance. Thereby, your final HTML markup for the notification banner will look like this:

<body>
  <div id="notification">
    <p>You have 3 unread messages.</p>
    <button class="hide">Hide</button>
  </div>

  <script src="uilang.js"></script>

  <code>
    clicking on ".hide" adds class "hidden" on "#notification"
  </code>
</body>

We’re almost done! Now that the behavior has been defined, we’ll rely on CSS to fade out that notification banner once the hidden class has been applied to it:

#notification 
  transition: .8s

#notification.hidden 
  opacity: 0

Congrats! You now know how to code! You might not realize it yet, but this simple logic will let you build a wide range of widgets and interactions. Let’s have a closer look at the options provided by the syntax.

Syntax

The syntax can be split into four parts:

clicking on ".hide"(1) adds(2) class "hidden"(3) on "#notification"(4)
  1. any CSS selector
  2. adds, removes or toggles
  3. any class name
  4. any CSS selector or the target keyword (which selects the clicked element)

That’s all you need to learn. Keep in mind that uilang is basically just HTML, so you can comment the code similarly:

<code>
  <!-- I'm a comment -->
  clicking on ".hide" adds class "hidden" on "#notification"

  <!-- I'm another comment -->
  clicking on "li a:first-child" toggles class "active" on "target"
</code>

Please note that uilang only supports click events. Hover effects can usually be achieved in CSS, and other events are simply beyond the scope of this language.

We’ve now covered the basics of uilang. It’s time to build a more advanced demo!

Apple-Like Explore Menu

We’ll create a collapsible, animated menu similar to the kind you can find on Apple’s website6. Check out the demo117 to see the result.

uilang demo: explore menu8
(See large version9)

HTML Markup

Nothing fancy, really, just a simple link to toggle the navigation, and the nav element containing our list of links:

<a class="explore" href="#">Explore</a>

<nav>
  <ul>
    <li>
      <a href="#"><img alt src="images/1.jpg">West Coast</a>
    <li>
      <a href="#"><img alt src="images/2.jpg">Venice</a>
    <li>
      <a href="#"><img alt src="images/3.jpg">Peyto Lake</a>
    <li>
      <a href="#"><img alt src="images/4.jpg">Iceland</a>
    <li>
      <a href="#"><img alt src="images/5.jpg">Golden Gate</a>
  </ul>
</nav>

Now, adding the toggling behavior with uilang will be extremely simple:

<code>
  clicking on ".explore" toggles class "open" on "nav"
</code>

We’ll then use this open class in our style sheet to show and hide the nav. Just before we do that, let’s add a few things to complete our HTML markup: a meta tag for mobile users, the link to our style sheet and, obviously, the uilang.js library! The whole HTML might now look like this:

<!doctype html>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1">
<title>Explore menu</title>
<link rel="stylesheet" href="style.css">

<a class="explore" href="#">Explore</a>

<nav>
  <ul>
    <li>
      <a href="#"><img alt src="images/1.jpg">West Coast</a>
    <li>
      <a href="#"><img alt src="images/2.jpg">Venice</a>
    <li>
      <a href="#"><img alt src="images/3.jpg">Peyto Lake</a>
    <li>
      <a href="#"><img alt src="images/4.jpg">Iceland</a>
    <li>
      <a href="#"><img alt src="images/5.jpg">Golden Gate</a>
  </ul>
</nav>

<script src="uilang.js"></script>

<code>
  clicking on ".explore" toggles class "open" on "nav"
</code>

Note: For those wondering about the brevety of the code, keep in mind HTML5 considers as optional the <html>, <head> and <body> tags. Feel free to adopt a different style if you have another preference!

CSS: Where The Magic Happens

As always with uilang, the interesting parts of the code are in the style sheet. uilang’s role is exclusively to define the behaviors, not to execute them.

Let’s start by styling and positioning our elements, so that our navigation is ready to be manipulated with uilang. I won’t go into much detail — I assume you’re already comfortable with basic, standard CSS — so I’ve only commented some parts of the code. Please note that irrelevant style declarations, such as for fonts and colors, have been omitted for clarity.

body 
  background: #f3f3f3;


.explore 
  /* Make sure the Explore link stays above the nav */
  position: absolute;
  z-index: 1;


nav 
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);


nav ul 
  /* Allow mobile-friendly horizontal scrolling when the browser isn't wide enough */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  /* Force the thumbs to display in a row */
  white-space: nowrap;
  padding: 80px 40px 40px;


nav li 
  display: inline-block;

Onto the interesting part: coding the toggling behavior! We’ll need two things:

  1. By default, the nav and the thumbs should be hidden. This means we need to initially slide up the nav and make the nav and images transparent.
  2. When the open class defined in our uilang code is applied to the nav, we need to reverse the default state: slide down the nav and fade in everything.

Step 1 is pretty easy: We’ll use translateY(-100%) to slide the nav up, opacity: 0; to hide the nav and images, and transition to animate these elements when the class is applied.

nav, nav li 
  opacity: 0;


nav 
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  transition: .4s;


nav li 
  transition: .3s;

This is not immediately related to uilang but, because uilang does rely on CSS for transitions and animations, we should probably remember a few important principles:

  • You can safely and smoothly animate only two properties: opacity and transform. Force yourself to stick with them.
  • When only the duration is specified in the transition shorthand property, all properties that might change in future will be animated and will use ease as their timing function.
  • Keep your animations fast! Animations are important because they help users to understand the flow between two states, but they should never get in the way. A good transition-duration is usually between 200 and 800 milliseconds.
  • While standard easing keywords are sometimes acceptable (such as with this demo), custom cubic-bezier curves are often preferable. Many tools enable you to find the right curve, such as Matthew Lein’s Ceaser10.
  • The examples in this tutorial use CSS transitions, but feel free to use CSS animations instead when needed! The principle is exactly the same, and keyframes might provide a finer level of control.

Now that our default state has been set up, we can go to step 2 and code the “open” state, which basically means reverting step 1 to the default values for the open class:

nav.open, nav.open li 
  opacity: 1;
  -webkit-transform: none;
  transform: none;


nav.open li 
  /* Wait for the nav to slide down a bit before starting the animation on the thumbs */
  transition-delay: .3s;

Boom! You now have a fully functional animated navigation menu. A few things are missing that would make it truly great, though, starting with the scale animation on the images. If you look closely at the demo117, you’ll notice that the images not only fade in when they appear but also zoom in a little. Let’s add that behavior by making them slightly smaller by default:

nav li 
  -webkit-transform: scale(.8);
  transform: scale(.8);

We’ve already defined that nav.open li will reverse to transform: none; and that all properties will animate, so there’s nothing more to add.

Good! We’re almost done, but one important thing is missing: changing the icon on the “Explore” link when the nav is open or closed. To do that, we’ll need to define a new rule in our uilang code. We’re currently toggling an open class on the navigation to show and hide it; we’ll need to do something similar for the link itself.

<code>
  clicking on ".explore" toggles class "close" on "target"
  clicking on ".explore" toggles class "open" on "nav"
</code>

Here, target represents the clicked element. In this case, you could have just reused .explore instead of target. However, that wouldn’t be the same if you had multiple “Explore” links on the same page (.explore matches any “Explore” link, whereas target selects only the clicked “Explore” link).

Back to the CSS. We’re going to use pseudo-elements to display our icons. .explore::before will represent our grid icon (visible when the navigation is closed), and .explore::after will display the cross when the navigation is open. Both will benefit from the same transition-duration.

.explore::before, .explore::after 
  content: "";
  position: absolute;
  left: 0;
  transition: .25s;


.explore::before 
  background: url(grid.svg);


.explore::after 
  background: url(close.svg);
  /* Hidden and scaled up by default */
  opacity: 0;
  -webkit-transform: scale(1.8);
  transform: scale(1.8);

The grid icon is already visible; the close icon is hidden but correctly positioned, ready to fade in as soon as “Explore” is clicked. We just have to reverse the default state when the close class defined in our uilang code is applied to .explore:

/* When the nav is open, hide and rotate the grid icon… */
.explore.close::before 
  opacity: 0;
  -webkit-transform: rotate(45deg) scale(.8);
  transform: rotate(45deg) scale(.8);


/* … and display the close icon */
.explore.close::after 
  opacity: 1;
  -webkit-transform: none;
  transform: none;

That’s it! We’ve achieved this pretty cool effect with just two lines of uilang and a few CSS declarations. Note that, while the uilang code might not be used in production by the developers you collaborate with, your CSS is production-ready. Most of the prototyping tools out there force you to build mockups outside of the actual HTML and CSS, which forces developers to reimplement your animations, delays, easings and so on. Details get lost all the time. With uilang, developers can just reuse your CSS and focus exclusively on reimplementing the logic in JavaScript.

Icing On The Cake

As a bonus, let’s end this tutorial by having some fun with CSS! The grid and close icons that we’re using on the “Explore” link are actually pretty simple, and using images for them (as we’re doing) would be a shame when we could just draw them in CSS. Let’s do this!

The grid icon is the most interesting one. While it might initially seem counterintuitive, we’re going to use gradients to draw it. The idea is that each of the nine squares will be drawn as a gradient from black to black. When you create a CSS gradient, you’re basically generating an image on the fly. This (background) image can then be sized and positioned anywhere.

12
(See large version13)

Here’s the translation in CSS (available on CodePen14):

.explore::before 
  width: 13px;
  height: 13px;
  background-image: linear-gradient(#000, #000),
                    linear-gradient(#000, #000),
                    linear-gradient(#000, #000),
                    linear-gradient(#000, #000),
                    linear-gradient(#000, #000),
                    linear-gradient(#000, #000),
                    linear-gradient(#000, #000),
                    linear-gradient(#000, #000),
                    linear-gradient(#000, #000);
  background-position: 0 0, 50% 0, 100% 0,
                       0 50%, 50% 50%, 100% 50%,
                       0 100%, 50% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-size: 3px 3px;

It’s verbose and arguably crazy, but keep in mind that, while we’re essentially doing it for fun, this technique comes with real advantages, the most important one being undoubtedly the HTTP request you save from not requesting a file.

The close icon is much simpler but still requires some tricks to make it look great. We’ll use a similar technique: drawing a gradient from black to black for each bar of the cross in order to form a plus sign, then rotating the plus to make it look like a cross. To prevent the lines from looking jagged because of the 45-degree rotation, we’ll scale up the icon a little using the transform property, which provides us with decent antialiasing.

.explore::after 
  width: 11px;
  height: 11px;
  background-image: linear-gradient(#000, #000),
                    linear-gradient(#000, #000);
  background-position: 50% 0, 0 50%;
  background-repeat: no-repeat;
  background-size: 1px 100%, 100% 1px;
  -webkit-transform: rotate(45deg) scale(1.4);
  transform: rotate(45deg) scale(1.4);

Go Create!

CSS is powerful, performant yet remarkably easy to use. uilang wants to stay invisible in your workflow and act as a gateway to using CSS to code interactions. After all, CSS might be the best “user interface” for creating prototypes.

Resources

(ds, il, al)

Footnotes

  1. 1 http://uilang.com
  2. 2 ‘http://codepen.io/bdc/pen/bNWaVz/’
  3. 3 ‘http://codepen.io/bdc’
  4. 4 ‘http://codepen.io’
  5. 5 http://uilang.com/lib/production/uilang.js
  6. 6 http://apple.com
  7. 7 http://demos.uilang.com/explore-menu/
  8. 8 http://demos.uilang.com/explore-menu/
  9. 9 http://www.smashingmagazine.com/wp-content/uploads/2015/01/demo-uilang-large-preview-opt.jpg
  10. 10 http://matthewlein.com/ceaser/
  11. 11 http://demos.uilang.com/explore-menu/
  12. 12 http://www.smashingmagazine.com/wp-content/uploads/2015/01/grid-icon-info-large-preview-opt.jpg
  13. 13 http://www.smashingmagazine.com/wp-content/uploads/2015/01/grid-icon-info-large-preview-opt.jpg
  14. 14 http://codepen.io/bdc/pen/emYpGJ
  15. 15 http://uilang.com/
  16. 16 https://github.com/bendc/uilang
  17. 17 https://medium.com/@bdc/the-educational-side-of-uilang-92d39da94c13
  18. 18 http://transpiler.uilang.com
  19. 19 https://medium.com/@zackcote_/sublime-text-snippet-for-uilang-efb05fbed0d

The post Designers: Start Coding With uilang appeared first on Smashing Magazine.

More here:  

Designers: Start Coding With uilang

An Introduction To Node.js And MongoDB

Node.js is a rapidly growing technology that has been overtaking the world of server-side programming with surprising speed. MongoDB is a technology that’s revolutionizing database usage. Together, the two tools are a potent combination, thanks to the fact that they both employ JavaScript and JSON.
At first glance, coming to grips with Node.js and MongoDB can seem both time-consuming and painful. Read on to learn how to wield these tools quickly and easily.

Source: 

An Introduction To Node.js And MongoDB

60 Astonishing Flat Icons For Free

Crafted with great attention to detail, today’s icon set is extremely easy to use and will most probably be the next ultimate resource for any of your design projects. This set of flat icons was thoroughly designed by the creative team at Roundicons and has been released exclusively for Smashing Magazine and its readers.
This freebie contains 60 icons that have been designed in both round and flat styles, and can be used for free without any restrictions and serve various design purposes.

View the original here: 

60 Astonishing Flat Icons For Free

How To Create A Tab Widget In WordPress

In this tutorial, you’ll learn how to create the Tabber widget, which is very useful for when multiple widgets need to fit in a sidebar. It saves space and streamlines the appearance and functionality of your WordPress-powered website.
In the past, there were different methods of doing this, most of which were theme-dependent. As we’ll see in this tutorial, creating a tabbed widget that works on its own and with any theme is easily accomplished.

View original:  

How To Create A Tab Widget In WordPress

Useful WordPress Tools, Themes And Plugins

If you’re looking for some great ways to improve your WordPress workflow, read on for a massive collection of free themes, plugins, tools and tutorials. These resources were all linked via the Smashing Magazine Twitter stream, Facebook stream, and other social-media streams around the Web.
These resources have now been organized and consolidated for easy reference to help you get the most out of the world’s most popular publishing platform.

Read this article – 

Useful WordPress Tools, Themes And Plugins

Teach Them How To Hit The Ground Running And Faceplant At The Same Time?

A few days ago, a tutorial on how to Create A Christmas Wish List With PHP was published on Smashing Magazine’s Coding section that frustrated me. It frustrated me as it was incredibly easy to predict the comment reactions it caused. It also frustrated me as it was a classic example of a tutorial resulting in very happy readers who will go out and cause a lot of terrible things on the Web unless they understand that this was meant as a “beginner tutorial”.

Continue reading – 

Teach Them How To Hit The Ground Running And Faceplant At The Same Time?