Adobe Alternatives: Pixel Art Applications

Pixel art is often viewed as just a retro style of graphics made for the purpose of nostalgia; a throwback to the early days of video games. However to me, and many other lovers of pixel art, it’s the precision, intricacy and aesthetic born of meticulously placing each pixel onto a miniature stage that truly makes it a wonderful and fascinating art form–one that belongs just as much today as it did yesteryear. Outstanding pixel artists often remind me of artisans who create tiny ships in tiny bottles; achieving a lot with a little is always impressive.


Beautiful pixel art from the upcoming game No Place for Bravery

Just as pixel art is an exacting art form, so too can it be helped along by equally exacting applications. Adobe Photoshop has been a common application of choice for pixel artists for a long time, but there exist today some fantastic alternatives, and those designed expressly for pixel art arguably offer the most.

In this article we’ll be looking at five alternative applications for pixel art, and the tools they include that can help pixel artists along. Some of the key types of tools we’ll be looking for are: selecting and resizing tools that don’t add anti-aliasing, access to pixel art color palettes, pixel friendly shortcut tools for things like gradient creation and dithering, help with tilemap creation and animation, easily accessible color selectors for quick changes while drawing, pixel friendly shape drawing tools, real size preview pane, among others.

As far as deciding which software and feature set is “best” for pixel art, it goes a little further than just confirming the inclusion of the most commonly sought after tools, because there are roughly three subsets of pixel art creation to consider: 

  • Seamless tiles for games
  • Sprites & animation
  • Complete artworks

Whether an application is suitable to you can depend on which of the above types of pixel art you do. As we go through these alternatives to Photoshop for pixel art I’ll try to fill you in on which applications have features well suited to each area.

The beauty of dedicated pixel art applications is they tend to be very
inexpensive, so you don’t even really have to choose a single application you want to use. You could get every application on this list
and still have only spent $23.99, coming in well under our series per application price cap of $100.

Let’s start taking a look at what we have to play with!

1. Pyxel Edit

First cab off the rank is Pyxel Edit. I’m talking about this program at the top of our list, despite its current beta status, because it has strong tools for all three of the pixel art areas we described in the introduction to this article–something quite rare.


Pyxel Edit’s interface. Art by ansimuz

It includes absolutely fantastic tile tools, (not only for
seamless tile creation but also full tilesets and even exportable tilemaps), it has animation tools that give you all the essentials, and it allows you to create complete artworks as well. This is software built from the ground up with pixel artists, and in particular game artists, in front of mind.

Pyxel Edit has a lot of great features, but to me its tile creation tools are the real standout, so if you’re involved in game development this might be of particular interest to you. You can define tiles as you go
along and place multiple instances of them anywhere in your document. Then if you paint on one instance of a tile all other instances are updated in real time. This is very helpful for creating seamless textures as you can place tile instances next to each other and paint right over the seams.

Instead of painting over the seams between tiles, you also have the option to lock your pencil to only draw within the constraints of the tile you started on. And with the offset tool you can click & drag to shift the contents of an entire tile, with the displaced pixels wrapping around to reappear on the opposite side of the tile.

A big benefit of Pyxel Edit’s excellent tile system is you can see how
your tiles will actually look together in a real level, instead of working on your game art in a vacuum. You can watch this process in action in the video below.

Pyxel Edit’s tile functionality means you can also use it as your main level design
tool if you choose. It has the ability to export
your tilemap data in JSON, XML or TXT format so, depending on the game
engine and toolset you use, you may be able to load this data directly into your game projects. For example, you can use this importer addon for Unity, Haxe has an importer, and I understand Phaser has Pyxel Edit importing baked in.

As well as the great tile editing tools, Pyxel Edit checks almost all the boxes for the most commonly required tools for pixel art. It provides a 100% scale preview in the sidebar, it has a “clean 1 pixel line” setting for drawing lines you don’t have to painstakingly tweak afterwards, it has rectangle and ellipse tools, easy color picker access with right-click or ALT+left-click, great color palette management with classic palettes preloaded, and very good selection tools. It also autosaves your work as you go along.

Duplication
and movement of pixels is made very easy in Pyxel Edit with a handy set of shortcuts.
Hit S to select an area, CTRL to move a selection of pixels, or CTRL+ALT to duplicate and move those pixels. When working with tiles you can also double-click any tile with the Select tool active to select the whole tile, making it easy to duplicate frames for adjustment.

Unfortunately, however, the software doesn’t seem to have live mirroring, (though you can flip selections horizontally or vertically), or any type of dithering tools at present. Hopefully we’ll see these features added as the project moves through its beta phase.

Another really standout set of features in Pyxel Edit is its color management tools, in particular its automated suggestions of different colors, which are generated by adjusting your current color’s shading, lightness, saturation and hue:

These
color suggestion tools are so useful I wish they were in every
graphics application. Just by selecting a good “seed” color right at the beginning of
your project you can get a glimpse of how your entire color palette
might look.

Another great tool in Pyxel Edit is its Color Replace tool, which allows you to easily change your mind about colors after you’ve put them on the canvas. It will replace any pixels of the current secondary color, (equivalent to Photoshop’s background color), with the current primary color, (equivalent to Photoshop’s foreground color). So you just sample the color you want to change into the secondary slot, choose your new color in the primary slot, and draw over the pixels whose color you want to alter.

You also get some help with the creation of gradients: choose two colors in your palette and Pyxel Edit can generate a selection
of graduating colors in between them. With these colors you can then paint out your gradients.

I’ve focused primarily here on Pyxel Edit’s tile and drawing tools, but it also includes solid animation tools. The layout for animation is the same as for tile creation, whereby you work in a grid layout and place a frame of your animation into each one of the grid squares. You can create multiple animations within a single document, and you can control the time each frame in your animation is held. You can also turn on onion skinning, however it can only be used to show
the frame before and after any particular frame.

And finally, if you don’t want to create either a tileset or animation, rather you want to create a single artwork, you just select the “Single image document” option when creating a new file.

Pyxel Edit is a great tool, especially for people involved in game dev, and it can be picked up for $9 while it’s still in beta. It runs on Adobe Air so natively it only works on Mac and Windows, however I’ve found it runs quite well on Linux via Wine also.

  • Website: http://pyxeledit.com/
  • Platforms: Mac, Windows, (also works via Wine on Linux)
  • Price: $9 (Currently in beta)

2. Aseprite

Aseprite is the favorite tool of a great many pixel artists, and with its outstanding range of pixel art specific tools, that’s for good reason. Everything about Aseprite is 100% focused on pixels–even the UI itself is done in pixel art style.

Where Aseprite shines is as a tool for sprite creation and animation. It has a powerful layer and frame based animation system with several features that are not present in many pixel art focused applications.

There are many animation features in Aseprite, too many to list here, but I’ll give you a quick rundown. You have the ability to move multiple frames in your sequence to a new spot in the timeline, copy and paste a number of frames at a time, set onion skinning to show as many of your previous and next frames as you choose, loop or reverse sections of your timeline, move and copy frames (all layers) or cells (selected layers within a frame), and control frame duration. You can read about the full list of animation functions in Aseprite’s animation docs.

As well as the animation features, all the most essential tools for pixel art are present in Aseprite. You have a 100% preview window that floats over your main window, a “pixel perfect” mode for drawing clean lines, great color palette management with the ability to drag & drop swatches to reorder them, easy color picking by holding ALT then left mouse clicking, filled and empty ellipse tools, filled and empty rectangle tools, and a series of really fantastic selection tools including rectangle and ellipse marquees, magic wand, lasso tool and polygonal lasso tool.

On top of that it has quite a long list of super useful drawing tools. For example, with the Contour Tool you can draw an arc or partial outline and it will automatically be closed and filled for you. With the Polygon Tool you can draw out shapes with as many straight sides as you want and it will be automatically filled. With the Spray Tool you can add randomized speckles.

With the Curve Tool you can draw pixel perfect curved lines with a method comparable to using bezier curves. With the Jumble Tool you can randomize the location of an area of pixels to rearrange them. And with the Blur Tool you can generate pixels around the edge of a shape that blur it with the background color.

While drawing you can activate either horizontal or vertical symmetry modes, great for things like character faces. However you’re not stuck with said symmetry being around the center of your document. With either mode activated a line appears on your canvas and you can shift it to any position and draw your symmetrical shape there.


Aseprite’s interface. Art by Charles Gabriel

One
of Aseprite’s coolest features, in my view, is the “Shading” ink mode which allows you to
select a series of colors and use them all to automatically layer
shadows and highlights onto a shape. It also has an alpha compositing ink
mode which allows you to blend colors together, and an alpha lock mode to
enable painting only inside existing shapes on a layer.

Aseprite does focus on animation, but it’s not without tile creation tools. It has an excellent tiled mode, whereby you can have an image repeat itself horizontally, vertically, or in both directions, allowing you to draw directly over seams to create seamless tiles.

Aseprite also has very useful color mode settings that allow you to choose between RGB mode for full color images, grayscale for black and white, or indexed mode where your colors will be confined to those in the currently active palette.

If
you draw in indexed mode any color you choose will automatically
replace itself with the closest color in your active palette. If you
draw in RGB mode then switch to indexed mode your image will be converted to
use colors from that palette only. This can be a great way to allow yourself to draw with a little more freedom, then refine your color palette down to be more crisp at the end of the process.

Aseprite has a color replacement tool, but in contrast with Pyxel Edit’s color replace tool where you draw over the pixels you want to update, in Aseprite you just provide two colors and it will auto replace all pixels of the specified color at once. I personally feel both methods have advantages.

Aseprite was originally GPL so you can still get that open source version free of charge from GitHub, but it won’t have the latest features. The most recent version is available for $14.99, and works across all three desktop operating systems.

3. Piskel

Piskel is very straight
forward and to the point sprite and animation creation software. If you
want to get in and out fast this is a great solution. It’s so quick, in
fact, that it only takes about two and a half minutes for the essentials to be
explained in this video:

The focus of Piskel is definitely sprite creation and animation as opposed to tilesets or complete scene creation. It has a relatively limited set of tools, but it also has a direct approach that can be very efficient for sprite creation and animation. It’s made particularly convenient given it has a fully fledged online version, meaning you can access it anywhere.

After drawing your initial character sprite, animations
are created easily by just hitting the Add new frame button to the left of the canvas and
adjusting an FPS slider to control your speed. Onion skinning is
included, which is always a valuable feature in animation.

One thing to bear in mind is Piskel’s pen tool can only be set
to between 1px and 4px in size, meaning this software really is best for
focusing on sprites and not large pieces like landscapes where you
want to paint large areas such as skies quickly.

Of the common pixel art features you always like to have access to, Piskel includes a 100% preview in the right sidebar, it has rectangle, ellipse and stroke/lines tools, a vertical mirror pen for symmetrical drawing, and ellipse and shape selection tools. It also has a dithering tool, something very helpful yet surprisingly rare in pixel art applications.

Additionally it has a really great “shape selection” tool, which will identify any block of connected pixels of the
same color. It’s comparable to a magic wand tool, but is a little
simpler to use and also allows you to drag the selected shape around immediately after selection without needing to
switch to another tool.

As
well as a regular fill tool, Piskel also has a modified fill tool that will
alter the color of all pixels that share the same color, whether they’re
connected to one another or not. This is yet another approach to color replacement, the third we’ve seen in our article so far, and something incredibly helpful in
those moments when you’re fine tuning to get just the right color.

Another
fantastic tool is the lighten/darken tool which semi-automates the process of creating highlights and shadows. Draw directly over existing
pixels with this tool to create highlights, or hold CTRL to instead create shadows. You can
either progressively shift the color of a pixel as you draw back and
forwards over it, or you can hold down SHIFT to ensure the color is only
tinted or shaded one step at a time.

Piskel describes itself as an online app, which can be very convenient, but if you’d rather work offline you can also get desktop versions for Linux, Mac and Windows.

4. GIMP

GIMP is known primarily as an image manipulation program, so it’s perhaps ironic that I didn’t recommend it in our series entry on photo editing software but I am recommending it here. I personally find it to be fantastic for pixel art, with the right setup. I based my own setup on the video you see above, which is quite old now, but still an excellent starting point for pixel art in GIMP.

GIMP doesn’t have some of the pixel art specific tools that dedicated software like Pyxel Edit or Aseprite have, but it does have some general tools that I find very helpful when doing pixel art. For example, GIMP’s selection tool. Once you draw out a selection the marquee has transformation handles that make it easy to select the exact pixels you need. Its floating window mode is something many people turn off right away, but with it active you can  create a second view into your document at actual size and nestle it right into your layout.

GIMP’s color indexing mode can also be very useful for pixel art. If you’re under time pressure and need to produce fast, you can draw something with a more traditional painting technique in RGB mode then convert it to indexed mode to have it translated into a restricted color palette.

For example, I’ve taken the machete from this free game vector art pack.

I scaled it down, with no interpolation, to get it to a size where the pixels will be nice and chunky. Then in the main application menu I went to Image > Mode > Interpolated and allowed a 256 color palette to be generated for me, with no dithering. Then I scaled the image back up, again with no interpolation, to the original size. Here’s the before and after:

This could still use some cleaning up to give it the crispness expected from pixel art, but it’s certainly off to a running start. Strictly speaking this is not pixel art, but for large projects like games you might need to create such a large number of assets that some shortcuts here and there are helpful.

You can also do things like switching in between RGB mode and indexed mode while working in order to speed certain things along. For example, you can draw out a gradient while in RGB mode, which will transition smoothly between the colors. Then you can switch to Indexed mode and enforce a color palette to get a pixel art friendly gradient effect instead.

Another helpful feature for game pixel artists is GIMP’s new tiling symmetry mode. You’ll need version 2.9.5 (compiled from source via Github) to access this. What it does is allow you to repeat whatever you are drawing every certain number of pixels. So if you are drawing a 16×16 tile, set the symmetry offset to 16px on both axis then you can ensure you have seamless tiling as you work:

GIMP isn’t a dedicated pixel art application, but it has a lot to offer and even if you don’t use it as your primary design software, you still might find some of these features slot right into your workflow.

5. Krita

Krita might not seem like the obvious choice when it comes to pixel art but in my experience it can be fantastic. Out of the box it includes a selection of dedicated pixel art brushes, including a square brush, a round brush and a dithering brush.

A big help is the wrap around feature, making seamless tile creation a smooth experience. Just hit W on the keyboard and your canvas tiles in both directions, allowing you to paint over any seams. Another thing I find helpful in Krita is having a fully fledged set of high level color selection tools for fine tuning of color palettes.

Krita also has an excellent alpha locking system, allowing you to do things like drawing out a shape on one layer, then nesting other layers so their content is only visible through the previous layer’s shape–a sort of masking, essentially. This makes adding shadows, highlights and details a much easier process, and allows for a workflow uncommon in pixel art apps.

Part of why I find Krita enjoyable for pixel art is its excellent support for a drawing tablet, while on the other hand I’ve found some pixel art applications have lag when using a tablet, or just overall feel more mouse and keyboard oriented.

Index painting is also available in Krita as it is in GIMP, with the advantage it can be used along with non destructive filter layers. However the setup for this technique is somewhat complex, as detailed in this tutorial.

And another feature Krita has is some basic vector tools you can use to draw out irregular shapes then have them automatically stroked with your selected pixel brush, a technique you can see used in the YouTube video at the start of this section. This is functionality you won’t typically find in pixel art applications.

Krita does have basic frame by frame animation tools but they’re still very new, and probably not the number one choice for pixel animation just yet. But Krita development is always moving fast, so keep an eye out!

For the creation of complete artworks however, Krita is a real prospect.

Wrapping Up

In my personal experience, the two strongest applications on this list are Pyxel Edit and Aseprite, and I don’t feel you can really separate which of the two is “best”. This is because if you are involved in game development and the creation of tilesets you’ll find Pyxel Edit’s specialization very helpful. But if you’re a character and animation artist, you’ll find Aseprite’s specialization very helpful.

Both applications can do some of what the other specializes in, though I’d say Pyxel Edit is probably stronger in animation than Aseprite is strong in tileset creation. However Aseprite is probably stronger for self contained artwork creation than Pyxel Edit. Overall I’d suggest if you’re involved in multiple types of pixel art, using the two together might serve you well.

I would class Piskel as a great application for when you want to get something done fast, or for when you’re on the move and need to access a quality pixel art editor online.

As for GIMP and Krita, in reality they can’t offer the same set of pixel art specific features that the aforementioned applications can. However they do offer a whole gamut of other features, the kind that come with software meant for fully fledged image editing or digital art. Whether you want to use one of these programs for pixel art will likely depend on how much you enjoy each one’s overall toolset and UI.

For me I particularly enjoy that in each application I can use a pencil brush and my drawing tablet to sketch out a rough draft of what I want to create as though I were working on paper, then I can draw my pixel art over the top. And GIMP’s ability to process images into indexed mode is particularly useful. Neither Krita nor GIMP are really top tier options for tile creation or sprite
animation, but they can be great for drawing self contained artworks.

That brings us to the end of our roundup of Adobe Photoshop alternatives for pixel art. With a bit of luck you’ve found an application in this list that you’re considering taking on as your new favorite pixel art editor!

Up Next: Animation

Adobe has two animation tools in its suite at the moment: Animate (formerly Flash) which allows for skeletal and keyframe based animation, and Photoshop which also allows for keyframe animation. However, just as with all the other software specialty fields we’ve looked at so far, there are several options for you to choose from when it comes to animation.

In the next article we’ll be checking out some of the best software available for skeletal, keyframe, and frame by frame animation. Some of these programs have fantastic specialist tools that will make your life a whole lot easier while creating animations.

I’ll see you in the next article!


Source: Webdesign Tuts+

Taming Advanced Color Palettes In Photoshop, Sketch And Affinity Designer




 


 

Creating large, harmonious and uniform color palettes can be a challenge. Good intentions and confident plans can be abandoned when things get a little unwieldy.


Taming Advanced Color Palettes In Photoshop, Sketch And Affinity Designer

But you can equip yourself with some tools to manage the complexity. With the right techniques, large color palettes can be created, refined and refactored at will. Large color palettes can be tamed.

The post Taming Advanced Color Palettes In Photoshop, Sketch And Affinity Designer appeared first on Smashing Magazine.


Source: Smashing Magazine

Simple WordPress Snippets to Enhance Your Secondary Navigation

One of the great things about WordPress is the ability to reuse snippets of code over and over again within your themes. With that, you can build in ways to make websites easier to use.

In this article, we’re going to explore ways to enhance secondary navigation. In other words, navigation that is in addition to your site’s main menu. Adding these extra elements can further help users get where they need to go and discover content they may have otherwise missed.

Here are four such snippets you can use in your WordPress themes. While they’ll work as-is, it’s a good idea to add your own custom styles to ensure a perfect fit with your site.

Where to Place Code Snippets: The snippets below can be placed directly into your theme’s template files. The exact file may depend on your particular theme (check the Template Hierarchy for ideas). And, to some degree, it’s a matter of personal preference.  Use them where you think they’ll best serve your users.

It may also be a good idea to use conditional statements so that snippets are only displayed when certain conditions are met. For example, you might not want a particular snippet to run on your site’s home page.

Easily Navigate Within a Section of Pages

1. Easily Navigate Within a Section of Pages

<?php 
if (  $post->post_parent ) { 
    $children =  wp_list_pages( array( 
        'title_li' =>  '',
        'child_of' =>  $post->post_parent, 
        'echo'     => 0 
    )  ); 
} else { 
    $children =  wp_list_pages( array( 
        'title_li' =>  '', 
        'child_of' =>  $post->ID, 
        'echo'     => 0 
    )  );
} 
if (  $children ) : ?> 
    <ul> 
        <?php  echo $children; ?> 
    </ul> 
<?php endif; ?>

Source:  WordPress Code Reference

This code makes for a great secondary navigation menu that could be used, for example, within a sidebar. It automatically displays the pages within the current section you’re browsing.

As an example, let’s say your site has an About Us page, with subpages for History, Mission Statement and Staff. Users will be able to more easily navigate between the various pages within this section as a bulleted list of links.

Breadcrumb Style Page Titles

2. Breadcrumb Style Page Titles

<h1  class="entry-title">
<?php
//  Conditional Statement to Check for a Parent Post
if($post->post_parent)  {
$parent_title = get_the_title($post->post_parent);
$parent_link = get_page_link($post->post_parent);
// Display Parent Post Link, Title and Separator
echo '<span  class="parent-title"><a target="_blank" href="' . $parent_link .  '">' . $parent_title . '</a></span>' . '&nbsp;<span  class="title-arrow">›</span>&nbsp; ';
}
// Display  the Current Page Title
the_title();
?>
</h1>

This snippet will check to see if the current page has a parent. If so, the parent page’s link and title are displayed within the H1 tag at the top of the page. An arrow character is also displayed between the parent and current page title to complete the breadcrumb look.

Note that this breadcrumb effect only goes one level deep. So you’ll have to adjust the code if you want to link to multiple levels (Parent » Level 1 » Level 2).

JS Dropdown Menu of Tags

3. JS Dropdown Menu of Tags

<?php
// Show a  Drop Down Menu of Tags
echo  "<select  onChange="document.location.href=this.options[this.selectedIndex].value;">";
echo  "<option>Choose a Tag:</option>n";
foreach (get_tags() as $tag) {
echo '<option value="' . get_tag_link($tag->term_id) .  '">' . $tag->name . '</option>n';
}
echo  "</select>";
?>

If your site takes advantage of WordPress post tags, it may be useful to provide a simple way for users to navigate between them. This is particularly effective for sites with a lot of tags.

For example, a project I worked on used tags as a way to filter posts by a relevant geographic region (of which there were dozens). This dropdown menu utilizes JavaScript to instantly direct the user to whichever tag they choose. You can also do something similar with categories.

Post Archive Pagination

4. Post Archive Pagination

<?php
the_posts_pagination(  array(
'mid_size' => 5, // The number of pages displayed in the menu.
'prev_text' => __( '&laquo; Go Back', 'textdomain' ), // Previous  Posts text.
'next_text' => __( 'Move Forward &raquo;', 'textdomain' ), // Next  Posts text.
) );
?>

Source: WordPress Code Reference

While many WordPress themes have a simple back and forth navigation for post archives, it’s a nice touch to add individual page numbers to the mix. It allows for navigating to a specific page and also gives the user a sense of your content depth.

Note the 'mid_size' argument in the code above. The number placed there will determine the amount of pages seen between the Next and Previous text links.

Give Users a Helping Hand

Each of the snippets above can bring some measure of organization to how users access your content. This is especially important on sites that have a lot of subpages or blog posts. In the case of subpages, primary navigation can become overwhelming if you try to display each and every subpage. Adding some basic secondary navigation elements provide a more straightforward way for users to find what they’re looking for.

It’s also worth noting that these snippets are meant to be used as starting points. The flexibility of PHP and CSS allow you to add your own custom functionality and look. In many ways, you’re limited only by your own imagination.

The post Simple WordPress Snippets to Enhance Your Secondary Navigation appeared first on Speckyboy Design Magazine.


Source: Speckyboy

Weekly News for Designers № 394

This is our popular weekly design news post where we share our favorite design related articles, resources and freebies from the past week.

You can sign-up to our awesome weekly newsletter or follow us on Twitter for some more amazing design articles, resources and freebies.

New Resources & Tools

Moodboard Builder for Sketch – Create beautiful moodboards in a single click with this Sketch plugin.
Moodboard Builder for Sketch

40 Cheatsheets & Reference Guides for WordPress – A collection of WordPress resources geared towards everyone from beginners to advanced users.
40 Cheatsheets & Reference Guides for WordPress

Get FullStory for Free, Forever.
Get FullStory for Free Forever

Remote Starter Kit – Get off to a flying start as a remote team with these mighty-fine tools that are tried and tested.
Remote Starter Kit

What’s New In DevTools (Chrome 59) – Find unused CSS and JS code with the new Coverage tab. You can reduce the size of your pages by only shipping the code that you need.
What's New In DevTools (Chrome 59)

fractures– A Baseline atomic CSS toolkit that helps you bootstrap design-systems and prototypes by providing a set of non-blocking, atomic, utility classes.
fractures

GitPoint – The most feature-rich unofficial GitHub iOS client that is 100% free.
GitPoint

GatsbyJS – A blazing-fast static site generator for React.
GatsbyJS

pell – The simplest and smallest WYSIWYG text editor for web, with no dependencies.
pell

Learning Guides, Tutorials & Tips

Web Accessibility 101: Design for All People, Not Most By Stephen Moyers
Web Accessibility 101: Design for All People Not Most

How to create a pattern library and why you should bother By Paul Boag
How to create a pattern library and why you should bother

Design better onboarding tooltips By Jake Tsacudakis
Design better onboarding tooltips

The Options for Programmatically Documenting CSS By Kaloyan Kosev
The Options for Programmatically Documenting CSS

Responsive Design Workflow in Sketch By Kjelle
Responsive Design Workflow in Sketch

Designing and building a web app from scratch: a case study By Louis Eveillard
Designing and building a web app from scratch: a case study

CSS Architecture for Design Systems By Brad Frost
CSS Architecture for Design Systems

Stealing Your Way to Original Designs By Dan Mall
Stealing Your Way to Original Designs

Free UI Templates

Molly – A free HTML single website template based on Bootstrap.
Molly

Styleguide Free Template – A free styleguide template for Sketch.
Styleguide Free Template

…and finally…

The Ultimate Collection of Google Font Pairings (Displayed Beautifully with Classic Art) By Lou Levit
The Ultimate Collection of Google Font Pairings (Displayed Beautifully with Classic Art)

Browse the Designer News Archives

The post Weekly News for Designers № 394 appeared first on Speckyboy Design Magazine.


Source: Speckyboy

My Journey Of Learning Programming Through Flatiron School #32

flatiron school

My name is Mason Ellwood, and I’m currently working on Flatiron School’s Online Full Stack Web Development Program. Each week, I’ll be writing about my experience, what I’m learning, and tips on learning to code.

This week I finally finished one of the final project through The Flatiron School. With that final project we were supposed to write a blog post for the school, stepping out processes and procedures on how we approached this task. Below is the article I wrote for the school. This gives you a brief understanding of what was required of us for the project.

“Hi my name is Mason Ellwood and I finally did it! I created my first working gem. My approach to this came at a rough start. This was my first gem I have ever built and the first project that I have approached without the training wheels of the learn.ide or someone explicitly telling me what to do or how to do it. This was a big task especially when looking at a blank screen…

So for my app, because I have currently traveled I decided on building a weather app that when called asks what state you reside in. If on the chance you forgot how to spell the states, will list out the states as well. Once the user has typed a state they will then be prompted with a new message of which city they would like to know the weather off. If again the user does not know the names of the cities in that area, will also list the cities in that state. Once the user types the city they would like to know more about it will display the weather, all done with Nokogiri.

For this project, I closely followed the setup instructions supplied by Avi here (https://www.youtube.com/watch?v=_lDExWIhYKI). This follows the bundler preset setup instructions using (bundle gem GEMNAME). Using the rails casts (http://railscasts.com/episodes/245-new-gem-with-bundler) to get me started. Once my local environment, and getting my “hello world” message to display upon first initialization of the cli prompt I began to deviate from Avi’s video walkthrough.

For what I wanted to do, I first had to think of where I was going to get this information…. The best site I have found for this is (www.wunderground.com). With this site comes a lot of functionality right out of the box. First I noticed that their URL works great for user input and string interpolation. When I went to a site and searched a state it returned all the cities in that state which is just what I needed. In cli.rb document I allowed for a user input of a variable. With that, I then interpolated the user input of a state to the URL of the site (https://www.wunderground.com/cgi-bin/findweather/getForecast?query=#{USER_INPUT_OFSTATE}). With this, I was in business, now time to scrape.

I created a file that scrapped the state for all the cities in that state. This if prompted returned the user a screen that allowed them to place a city name or list the cities in that state. Depending on what the user wanted they could either place a city name or list out the city. If the user wanted a specific city input then they would just type the city name.

When they type the city name, it checks what city they imputed and then pulls that href from each city that was included on that state’s page interpolating the URL to the home URL. (https://www.wunderground.com/#{CITY_INPUT_URL}). This sends the user now to that URL and scrapes the relevant data they need.

This returns the weather information of that state at that instant displaying a message back to the user of the information they want. This then prompts if they want to get a new city’s weather information or go and get a different state’s information.

And there you have it a weather app! The main issue I did not foresee is naming convention… a weather gem already exists with the same naming conventions of my weather app. This caused issues when I wanted to push it to the rubygems.com website. So in the future, I will make sure to check before hand if something with these naming conventions already exists. This will save tons of time in the future, and major headaches.

Overall once I began to understand how all the files were related to each other, it was easy to proceed. Through this project, I learned how to create a ruby gem, how to create and plan a project from start to finish, how to publish a ruby gem, the importance of naming conventions, and how to build and install a gem to Bundle. Over it was an awesome project.”

Read More at My Journey Of Learning Programming Through Flatiron School #32


Source: Web Design Ledger

Web Development Reading List #189: Sync Via Push API, RTL CSS, And The Disaster Factory




 


 

Do you feel stressed from time to time? I do. Recently, I experimented with meditation and yoga, just to see if and how they work. There’s a lot of advice you can find online and they all claim to transform your life entirely.

The post Web Development Reading List #189: Sync Via Push API, RTL CSS, And The Disaster Factory appeared first on Smashing Magazine.


Source: Smashing Magazine

Three Facebook Ad Tips That’ll Help You Increase Conversions

If you’ve spent any time on a marketing or design blog lately (other than this one), you’ve probably noticed a lot of buzz around Facebook advertising. Something like, “10 Ways Facebook Can Get Your Products to Fly Off the Shelf,” and other grand promises. Unfortunately, a lot of these posts lack any real value. Most of us have tried some of their “hacks” only to be wildly disappointed.

But, today, we’re going to change the game. In this post, we’ll go over some tips as well as some real, actionable practices that will help you boost engagement with your Facebook ads and (better still) get more conversions! You’re probably thinking, Yeah, yeah, yeah. We’ve heard that before. Ok, you have every right to be skeptical. Just hear me out-I think you’ll be pleasantly surprised.

1. Before You Go Any Further, Evaluate Your Offer

Before you go and spend hours and hours designing the perfect ad, you need to take a moment and consider the value of what you’re actually offering to consumers.

Even if you have a highly appealing ad that grabs attention, it won’t make any difference if your offer doesn’t interest the viewer. This doesn’t necessarily mean that you have to go around offer 50 percent off your merchandise (which wouldn’t be a very effective long-term plan, even if your products were flying off the shelves). Before deciding on your offer, it’s important to consider where the audience is in your marketing funnel.

One tremendous problem that a lot of marketers run into with Facebook advertising is that they don’t use the appropriate offer for their audience. For example, if you’re advertising to new consumers who have never heard of your products or services before, it’s probably not the best idea to try to sell to them right off the bat.


Designed by EricWillis.me.

Because these are cold leads, you need to warm them up first. So, for new leads, try offering them something that will educate them on your brand and get them interested in who you are and what you do. Free content is usually the best way to do this. For example, you could offer them a free ebook or informational video in exchange for their email. Once you’ve engaged with them and gathered their contact information, you can start nurturing them for conversions.

On the other hand, audiences that have already shown an interest in your products or services also need a tailored advertisement. Instead of just showing a generic ad or offer, segment your retargeting audiences based on the specific URLs they visited. For example, if you sell WordPress Themes and icon sets, you’d want to separate your retargeting audiences into people who want themes and people who want icon sets.

Remember, these people have interacted with your products without converting. So, try offering them a discount or other promotion to help push them toward conversion.

2. Monitor the Right Metrics Before Making Changes

There are a lot of different metrics to look at when you’re using Facebook advertising. However, many of these are just “vanity metrics,” meaning they don’t really tell you much about how your ad is working with your audience and whether or not it’s effective. For example, just because your ad is getting a ton of clicks, that doesn’t mean it’s time to pop open the champagne.

Instead, you should be tracking how many of those clicks result in conversions. So, instead of obsessing over CTR and impressions (reach), start paying closer attention to the number of conversions and your cost per conversion.

To do this, you’ll have to install a Facebook Pixel on your website. This allows the social platform to track user activity on your site and count the number of events. There are several events that you can choose from when setting up a campaign, such as add to cart, initiate checkout, and more. In this case, you’ll want to setup your conversion event as a “purchase.”

Once your ads have had some time to run, take a look at the ones that have garnered the most conversions. You should be able to notice certain trends for what’s working and what’s not. When creating new ads, use your successful ones as a starting point-you should still aim for improvement, so feel free to keep making changes.

3. Sometimes, Great Ads Don’t Last Forever

Great ads don’t happen overnight. Even once you’ve had a couple of successful ads, you may not be able to reproduce them quite as easily as you might think. The really tough part is when an ad that’s been doing really well will suddenly start to choke. What’s with that? You didn’t make any changes, so what’s changed?

There’s another metric on Facebook’s Ad Manager that you should pay attention to: frequency score. This metric tells you the average amount of times that an individual sees your ads. So, the higher this number is, the more likely that people are going to grow tired of your ads (also known as ad fatigue).

To avoid ad fatigue, you’ll need to make sure that you have a good rotation of ads. You don’t want to allow the same one to run for too long-even if it’s doing well. Generally, you’ll want to keep this number under four. And, if you notice an ad’s performance start to dwindle, switch it off for a while.

Oh, and one bonus tip: make sure to exclude users who have already converted.

Final Takeaways

There, that wasn’t so bad, was it? Now, I’m not going to make any too-good-to-be-true, “diet pill” type claims here. But, applying the information outlined in this post will definitely give you a better grasp of how you can steer your campaigns in the right direction and avoid some common Facebook ad mistakes.

Just remember: no more vanity metrics, undefined goals, or obnoxiously redundant ads. Now get back out there-you can do this!

The post Three Facebook Ad Tips That’ll Help You Increase Conversions appeared first on Speckyboy Design Magazine.


Source: Speckyboy

Updated Course: Practical Web Animation

Our popular web design course, Practical Web Animation, gives an in-depth four-hour introduction to animating buttons, images, and other web elements. And recently we’ve updated it with three new bonus projects to help you with responsive animation, image animations, and CSS sliders.

What You’ll Learn

The days of animation-heavy websites are fading, but there is still something to be said for a site with small amounts of subtle, eye-catching motion to help users interpret interfaces. 

In this course, Envato Tuts+ instructor Craig Campbell shows you practical ways to create animations for buttons, pricing tables, and other web elements, using concise CSS and jQuery to do so.

Web animation course

Watch the Introduction

 

Take the Course

You can take this course straight away with a subscription to Envato Elements. For a single low monthly fee, you get access not only to this course, but also to our growing library of over 1,000 video courses and industry-leading eBooks on Envato Tuts+. 

Plus you now get unlimited downloads from the huge Envato Elements library of 200,000+ photos and 26,000+ design assets and templates. Create with unique fonts, photos, graphics and templates, and deliver better projects faster.

If you’re in a hurry and don’t have time to take the course, why not try one of the ready-made CSS animations on Envato Market. You can find hover effects, spinners, loaders, and much more.


Source: Webdesign Tuts+

Introducing The Website Speed Test Image Analysis Tool




 


 

Web developers spend their days writing hypertext, but, byte for byte, most of the web is composed of images. It is hard to overstate the effect that images have on the average web page’s performance; faster websites have broader reach and a higher impact. The first and most important thing you can do to improve the performance of your website’s images is figure out how to measure them.


Introducing The Website Speed Test Image Analysis Tool

Enter Website Speed Test, a free and drop-dead-simple tool that leverages our (Cloudinary’s) image smarts to let you measure, diagnose and (crucially) communicate about the image performance of any website. Better yet, it’s built on top of, and integrated in, Pat Meenan’s WebPagetest. Interested? Read on!

The post Introducing The Website Speed Test Image Analysis Tool appeared first on Smashing Magazine.


Source: Smashing Magazine

How To Apply Consistency in Web Design

You’re reading How To Apply Consistency in Web Design, originally posted on Designmodo. If you’ve enjoyed this post, be sure to follow on Twitter, Facebook, Google+!

How To Apply Consistency in Web Design

There’s tremendous value in consistency of digital interfaces. People browsing the web encounter dozens of websites that all have different styles, yet most feature very similar page elements. Most designers don’t even think about these features. Page headers, navigation menus, body copy, CTA buttons, the list seems endless. By designing with consistency you’ll learn how […]



Source: Designmodo