Wednesday, 31 May 2017

My Journey Of Learning Programming Through Flatiron School #26

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.

Today I would like to touch on one of the most widely used tool, and in my opinion one of the the most important tools in development I have came across, Version Control, GIT, and GIThub.


“The past is never where you think you left it” – Katherine Anne Porter

When I first started using GIT and GitHub I really had no idea how to use the thing, other than I had to know to use it. I did not understand the necessity of storing a repo for my code, and for a lot of the implementation processes I had done in the past, it seemed mundane. Until a few years ago something happened. My computer crashed…..

There went all the code I had been working on, all the images, templates, everything. Poof. So I did what any sane person would do in the early 2000’s. I spent way too much money on portable hard drives. I bought two 512GB portable hard drives. And BAM my problem was solved. On these I could hold everything, images, code, movies, you name it. And it was safe in my drawer at home.

But like every great Disney movie, one day, for no apparent reason at all, everything decides to take a turn for the worse. My hard drive decided to stop working. SO BACK TO SQUARE ONE!

Through these poor experiences, i have begun my hunt for alternative sources to backup and save my data. This is where I fell in love with GIThub. Though this tool, I was able to read, write, and save code online in a public or private repo which was accessible and writable from anywhere. Version control has allowed to me better understand my own code, and comment what I did and why I did something better and faster than any other method I have found.

Version control is the process of storing multiple versions of a single project, allowing each version to be recalled at a later date. This is useful because it allows you to easily rollback to a previous version of your application, saving you extensive time and extra work. It is also useful for testing and implementing new versions you may have written without messing up for original database.

So there are two types of version control. The first is local version control. This stores all the information locally on your machine. This is great for personal projects, but not so great if you want to collaborate with a team; storing all your files within a local repository. A repository is a big folder that stores all the files of a particular project. And GIT.. GIT is the version control system you will use, which has become the most widely used version control system in the industry.

In the next post, I will get into how to create and set up this environment locally. Then after this basic setup is complete, how to sync that to a remote repository on Github, where you will be able to push, pull, and play with your code you are working on. The Flatiron School does a great job at explaining this concept. For the longest time, things just were not quite clicking. But through the lessons at The Flatiron School, I have been able to better understand the concept of version control and how it is used.

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

from Web Design Ledger

Tuesday, 30 May 2017

10 Best Udemy Courses For Learning Web Design

webdesign udemy courses

One of the cheapest and best quality sites for learning anything is Udemy. Their courses range from Photoshop to baking and even yoga, so there’s something here for pretty much everyone. But Udemy got its start as a digital learning resource and it still excels in that field. One of the most in-demand skills people […]

The post 10 Best Udemy Courses For Learning Web Design appeared first on Vandelay Design.

from Vandelay Design

Monday, 29 May 2017

9 Free Minimalistic Fonts To Use On Your Next Project

Butler Free font example1

“The world is full of beautiful fonts—choosing the right one for your next project can be a daunting task.”

– Gary Hustwit


Regardless if it’s about print, logo, packaging or web design, minimalistic fonts are an integral part of the process for every designer who wants to create eye-catching, effective and memorable graphic design projects. In modern design trends, the typography has gained more and more importance, as each project requires a different font in order to match with the general visual design and convey the right message to the audience.

Every designer loves freebies and there are so many free fonts released out there, that is hard to keep track all of them Therefore, we have rounded up 9 of our favorite free fonts to help you.

1. Entra

Entra free font



Entra is an original and unusual looking font that was designed for usage in logos and eye-catching headlines. With a quite unique combination, the secret of this font lies in between sharp corners and rounded shapes, Entra is a modern looking cap-only font. Designed by Gatis Vilaks and Wild Ones Design, this font is free for personal and commercial use.

Free for personal and commercial usage.

Download this minimalistic font here 


2. Ubuntu

Ubuntu font



The Ubuntu typeface has been specially created to complement the Ubuntu tone of voice. It has a contemporary style and contains characteristics unique to the Ubuntu brand that convey a precise, reliable and free attitude.

The Ubuntu Font Family is a set of matching new libre/open fonts. The typeface is sans-serif, uses OpenType features and is manually hinted for clarity on desktop and mobile computing screens. The technical font design work and implementation is being undertaken by Dalton Maag. Both the final font Truetype/OpenType files and the design files used to produce the font family are distributed under an open license

Free minimalistic font for personal and commercial usage.

Download the font here 


3. Crimson Text


Crimson Text Font


This free font family has been created specifically for book production and it is inspired by old-time, Garamond-esque book typefaces. Crimson Text is the work of German-born, Toronto-based designer Sebastian Kosch, who says he was inspired by the work of Jan Tschichold, Robert Slimbach and Jonathan Hoefler. 

It’s also the favorite free aesthetic font of Taylor Palmer, a senior UX designer based out of Utah, USA. “Crimson is a sophisticated serif that makes a nice alternative to traditional Garamond-esque typefaces,” he says. “It also has a very expressive italic, which pairs nicely with strong, geometric sans-serifs like Futura or Avenir.”

Free for personal and commercial usage.

Download the font here


4. Comfortaa


comfortaa free font


Comfortaa is a rounded geometric sans-serif type design intended for large sizes. Created by Johan Aakerlund, it’s a simple, minimalistic font, which includes a large number of different characters and symbols. Part of the Google Font Improvements Project, the latest updates to the family include the addition of a Cyrillic character set and support for Vietnamese. David Airey, a graphic designer and occasional writer in Northern Ireland, is among its admirers. “For a recent identity project, I used Comfortaa as the base for a bespoke wordmark. The before and after are really quite different, but Johan’s work gave me a great foundation, and the client loves the result.”

Free for personal and commercial usage.

Download the font here

5. Butler


Butler Free font example Butler Free font example1


Inspired by a mix between both Dala Floda & the amazing Bodoni family, Butler is a free serif typeface. The main goal was to bring a bit of modernism to serif fonts by working on the curves of classical serif aesthetic fonts and adding an extra stencil family. Because of its highly contrasted typeface, this minimalist font is “great for posters, very big title, books and fancy stuff”. The Butler family contains a total of 334 characters, 7 regular weights and 7 stencil weights, text figures, ligatures, fractions and a lot more. It also suits many different languages with its added Free for personal and commercial usage.

Download the font here


6. Jaapokki


Jaapokki free font

Jaapokki free font1


Jaapokki has been created by Finnish designer Mikko Nuuttilaa. This beautiful sans-serif font features clean lines, two alternatives and large set of glyphs and it’s great for headlines, posters, logos and more. And Rob Hampson, head of design at The Bot Platform, is particularly attracted to the more unusual elements of this free aesthetic font family. Hampson explains: “I found Jaapokki around a year ago and instantly fell in love with it. In fact, it’s the font I chose to use on my personal website. It has a range of choices, with some being more experimental than others. For example, ‘alternative subtract’ [shown above] experiments with removing elements of the font. This is definitely one to use at larger sizes.”

Free for personal and commercial usage.

Download the font here


7. Clear Sans


Clear Sans Intel Free Font

Designed with on-screen legibility in mind, Clear Sans is a versatile OpenType font suitable for screen, print, and Web. It strikes a balance between contemporary, professional, and stylish expression and thoroughly functional purpose. It has a sophisticated and elegant personality at all sizes, though its thoughtful design becomes even more evident at the thin weight.

Clear Sans is notable for its minimized characters and slightly narrow proportions, making it a great choice for UI design, from short labels to long passages (it has, for instance, been adopted by Mozilla for the ‘Firefox for Android’ browser). Also, Michael Surtee (Typographica) gives credit to this minimalist font: “I was drawn to Clear Sans for its practical nature. The different weights …offer great options for both readability and contrast, making all sorts of type and numbers easy for users to digest.”

Created by Daniel Ratighan at Monotype under the direction of Intel, Clear Sans supports a wide range of languages using Latin, Cyrillic and Greek, and includes medium, regular, thin, and light weights with upright, italic, and bold styles.

Free for personal and commercial usage.

Download the font here

8. Source Sans Pro

Source sans Pro




Released in 2012, Source Sans Pro was the first open source type family for Adobe, and has proved to be wildly popular among the designers. It was envisioned as a classic grotesque typeface with a simple, unassuming design, intended to work well in user interfaces. Designed by Paul D. Hunt, who continues to work as a type designer at Adobe, Source Sans Pro has Source Serif Pro as complementary free aestetic font .

Source Sans Pro is one of the favorite free minimalist fonts of James Hollingworth, a senior-level digital designer and illustrator based near Bath, UK. “It’s such a solid, reliable font to use in design work,” he enthuses. “Being dyslexic myself, I find it a very easy font to read, and it works brilliantly in user interfaces.” 

Free for personal and commercial usage.

Download the free minimalist font here


9. Cormorant


Cormorant minimalist font Cormorant minimalist font


Cormorant is a display serif typeface inspired by the Garamond heritage. It was hand-drawn and produced by Christian Thalmann, (Catharsis Fonts), who describes it as containing “scandalously small counters, razor-sharp series, dangerously smooth curves, and flamboyantly tall accents”. The font is best used for headlines and poster text at large sizes, both on screen and in print, but is also highly legible at smaller text sizes.

The design goal of Cormorant was to distil the aesthetic font essence of Garamond, unfetter it from the limitations of metal printing, and allow it to bloom into its natural refined form at high definition.

Cormorant fonts come in three distinct master styles: The classic Cormorant Roman, the matching true italics, Cormorant Italic, and Cormorant Upright. Furthermore, in order to make it more accessible for users without OType savvyavvy applications, Cormorant Roman offers four variant styles:

  • Cormorant Garamond – offers larger counters and subtly more traditional Garamond shapes for a few key characters to achieve more reading comfort
  • Cormorant Infant  – the letters «a g y» and their derivatives are replaced by gentle schoolbook-style single-storey shapes; 
  • Cormorant SC –  the lowercase glyphs are replaced by small-caps
  • Cormorant Unicase  – a small-caps variant having some lowercase letterforms for an eye-catching futuristic look. 

Each style is available in a range of five weights: Light, Regular, Medium, Semibold, and Bold.

  • Free for personal and commercial usage.
  • Download the font here


Which one is your favorite minimalist font? Have we missed anything? Let us know in the comments bellow.

Here are more awesome headline fonts.

Read More at 9 Free Minimalistic Fonts To Use On Your Next Project

from Web Design Ledger

Friday, 26 May 2017

How to optimise your landing pages for multi-channel marketing

landing pages

Building a high-converting landing page isn’t easy.

Unfortunately, it’s not any easier when you’re designing a landing page for a multi-channel marketing campaign, with multiple devices, platforms, and points of origin to take into account.

But despite all of this complexity, many of the same simple values still apply.

Here are a few tips to help you optimize your multi-channel landing pages, following four of the most essential tenets of landing page optimization – a singular purpose, a clear offer, minimal resistance, and a structured journey.

Stick to just one goal

You’re trying to optimise a landing page for prospects from multiple marketing channels. So you need some kind of all-in-one wonder-page, right?


If you’re looking for a page that can cater to every type of casual visitor, then what you’re really thinking of is a home page.

An effective landing page is one that’s designed with a singular purpose.

It doesn’t matter if your prospects are arriving on different devices or have been led there from different platforms. They should all be there for the same reason, and your landing page should be focused on encouraging your visitors to take the one action you need them to take.

So to get your landing page as focused as possible, make sure you:

  • Remove all unnecessary links. Ideally, the only thing left that can be clicked should be the call to action (CTA) that takes them where you want them to go next.
  • Craft a concise and clear headline. Your visitors should immediately know what you’re about, what they’ll get and how they can get it.
  • Keep your landing page simple and uncluttered. Your prospects’ eyes should automatically be drawn to the relevant information and the CTA without any mental effort on their part.

brand-generatorThe graphic design tool Brand-Generator is a great example of a landing page that’s been distilled down to the bare minimum. There’s nowhere to scroll, and minimal text and a small explainer video other than the headline, sub-header and the CTA.

There’s just one extra place to click that doesn’t continue the sales pitch – the Log In button – but it’s clear that they’ve worked hard to make that link as close to invisible as they can.

In other words, they’ve designed their landing page around a singular goal, with an absolute minimum of options or distractions. Whether their visitors are arriving from an email campaign, a Google search or a TV advert, there’s only one thing for them to do: test out a heat-map of their own website.

Match your messages

When it comes to multi-channel marketing, you should always follow the three Cs – choice, consistency and continuity.

Your prospects should be free to choose which channel they use to engage with you, and they should be able to continue their journey with your brand by switching channels without being inconvenienced.

But what’s perhaps most important is that your multi-channel marketing efforts are consistent.

If your adverts and email campaigns are promising “flexible project management software”, but your landing page headline is talking only about “collaboration tools”, your visitors are going to think they’ve arrived at the wrong place. They’ll go straight back to Google to find one of your competitors, instead.

Similarly, if you’re running a pay-per-click (PPC) advert to capture browsers who are searching for “cloud accounting app”, you’d better make sure that both your advert and your landing page include those keywords in their headlines and copy. If not, they’ll bounce – and you’ll have just paid for a wasted click.

Here are a couple of examples to show how much of a difference a simple thing like message matching can make to a prospect’s journey.

A quick search for “landing page builder” brings up a handful of adverts.

First up is Leadpages. Their advert in the search engine has the headline “Build Landing Pages”. A little dry, but so far, so good – the advert nearly matches the exact keyword phrase we were searching for.


Following the link, we find a landing page with the headline “The #1 Landing Page Builder”. It’s a perfect match, and we instantly know that we’ve arrived at a place that can give us what we want.


They’ve even added a little internal consistency within their own landing page, with a CTA button that matches the page’s headline: “Start Building Pages”. At that final critical moment of decision, we’ve been reassured of what we’re about to do, and what this landing page is offering us.

At every step of our journey with Leadpages – PPC advert, landing page headline, and CTA – we’ve had a consistent set of messages, confirming what’s been previously promised, using almost the same wording that we used to search for it.

It’s not just a case of avoiding confusion. This consistency makes us feel more confident in the landing page that we’re dealing with – Leadpages has managed to gain our trust.

On the other hand, the same search also offers us an advert for Easymarketer, with the advert headline “Master Email Marketing in 2017”. That might have something to do with what we’re looking for, but it can hardly be called a match.

Following that link, we arrive at a landing page with the headline “Builderall Email/Funnel Builder”.

BuilderallAside from the word “Builder”, this headline bears no resemblance to our search terms, and isn’t even close to the headline on their own Google advert.

It’s not immediately clear that we’ve arrived at a place that can give us what we want. We’re confused, possibly annoyed, and we’re ready to go back to Google.

Make it mobile-friendly

With more than 50% of all online sales coming from mobile devices, you need a landing page that can keep those mobile users happy.

Unfortunately, there’s a whole lot more to designing a mobile-friendly site than just getting the font size right.

Perfecting a mobile-friendly version of a landing page is a complex discipline, but there are a few critical points that any designer should keep in mind.

First, a mobile-friendly landing page needs to be fast.

According to Google, 53% of mobile visits are abandoned if the page takes longer than 3 seconds to load – which means that a slow landing page is a crippling disadvantage to your conversions.

So keep your page lightweight.

Remove unnecessary images or scripts, and reduce the size or resolution of your images as much as you can – anything you can do to reduce the number of megabytes standing between your prospect and your desired outcome.

If you’re not sure where to begin, you can use Google’s handy site-tester to get a mobile-friendly score and a few suggestions for improvement.

Second, a mobile-friendly landing page needs to be thumb-friendly.

We all know what it’s like to struggle with a fiddly link on a mobile device – and if your visitors have to zoom in on every button or link, they’ll quickly back out to find a competitor who’s more accommodating to fat-fingered customers.

According to Google’s recommendations, the average pad size of an adult finger is around 10mm wide – and that means your tap targets need to be at least 7mm in size, with no other targets within 5mm.

Finally, a mobile-friendly landing page needs to be concise.

No matter how much you’re in love with it, that killer twelve-word headline you spent hours crafting might simply be too long for a mobile device.

Similarly, the average mobile user isn’t always browsing in the comfort of their own home. They’re on the move, with little free time and a myriad of distractions around them. So your online sales pitch needs to be brief: cut down the copy and the headline to the absolute minimum.

Control the journey with the fold

You’ve got a fast-loading site that’s been tailored to work well on different devices. Your graphics and links have all been adjusted, and your copy has been trimmed down to cater to the typical short attention span.

But there’s still one essential element of your visitors’ experiences that you haven’t addressed yet – the precise journey they’ll go through as they arrive on your site.

When everything you include in your landing page has been chosen to aid the conversion process, it can be hard to decide what should be relegated to the area below the fold. It’s not an exact science, and there’s still plenty of debate about the importance of the fold. But in general, it’s usually a safe bet if you:

  • Keep everything above the fold simple and inviting. Get your offer across to a new visitor immediately, without any other distractions.
  • Push dense text or complicated information below the fold. The last thing you want to do is overwhelm a prospect within the first few seconds.
  • Put your call-to-action (CTA) at the place where your visitors are most ready to commit. That might be above the fold, below the fold, or both. Don’t let the fold dictate where you put it – let the overall journey of your sales pitch decide the best place.
  • Use directional cues to encourage scrolling. It could be an animated arrow pointing down, or even a simple “find out more”.

WorkflowMax‘s landing page, for example, hasn’t followed the stereotypical approach to the fold.

workflow1They know that project management software isn’t something you just sign up for within the first few seconds.

Their prospects need to learn a little more about how the software works, or even to see it in action to get a feel for it. So to the right of the headline and imagery – where you might normally expect a sign-up form or a CTA – they’ve included a huge and highly clickable link to watch a short video.

workflow2The sign-up form and CTA are actually found immediately below the fold, represented by the horizontal red line below.

The natural progression is to arrive on the landing page and watch an introductory video showcasing the software’s features, and then be presented with a sign-up form after you’ve already been warmed up to the product.

And just in case there was any confusion about what to do after the video, the border of the main background image above the fold has been shaped into a downward-pointing arrow – an inoffensive and unobtrusive cue to move further down the page.

Of course, in a multi-channel marketing effort, you can’t rely on presenting the same above-the-fold experience to every user without a little extra configuration.

Your prospects will be arriving from all sorts of devices, and all sorts of screen resolutions. So make sure you test out how your landing page looks on different screens with tools like the Responsive Design Checker and the Fold Tester.

Putting it all into practice

Sadly, there’s no guaranteed formula for improving conversions on any landing page. The variables are too numerous, and human behaviour is far too erratic – and things only get more complicated when you’re dealing with prospects from multiple marketing channels.

With that said, you’d do well to keep the following rules of thumb in mind:

  • Pick a single goal and stick to it. It could be gathering email addresses, getting visitors on board with a free trial, or closing a sale. Stay focused and keep it simple – don’t let too many options distract your visitors away from the purpose of your landing page.
  • Always be clear and consistent. Make sure your headlines, offers, and CTAs all match up to the messages you use in your other platforms and channels. Confirm and reassure your prospects, and you’ll build trust and confidence in your business.
  • Make it easy for every user and every device. No matter where your potential customers are or how they’re engaging with you, you need to make it quick and painless to move from interest to action.
  • Plan out every step of their journey. Your job is to make your visitors feel comfortable and informed enough to commit to your business – not to overwhelm them at the start or blast them with a demanding CTA as soon as they arrive.

It’ll be a long journey to fully optimise a landing page, and you’ll need plenty of testing along the way before you arrive at the best combination of tweaks.

But with enough time and diligence, you’ll start to see the results of a multi-channel marketing campaign that really converts – and a landing page that’s doing most of the work for you.


About the Author:
Danny Molt has been involved in design for almost 25 years working with some of the top uk design and marketing agencies. Having launched several companies online and offline, he is currently head of digital marketing strategies for Print-Print Limited
You can contact him at on Twitter @DanMolt

Read More at How to optimise your landing pages for multi-channel marketing

from Web Design Ledger

Thursday, 25 May 2017

15 Best Sliders and Galleries For Your Next Project

If you want to grab a visitor’s attention by displaying a set of images, sliders are a great way to get that done. The best sliders are attention-getting, with attractive animations that match the tone and purpose of your site. We’ve collected a list of some of our favorite sliders and galleries below.

Fair warning: like many animated web plugins, most of these sliders are based on jQuery, the hat that JavaScript wears when it wants to seem cool. If you’re not already familiar with it, it’s fairly easy to learn, but it is distinct from JS in its own special ways. jQuery sliders also might not be ideal for every application. They often require large scripts that need to be downloaded and executed on the client computer, making them clumsy for mobile applications where data use is a concern. And some developers just plain don’t like jQuery, feeling like it’s the child’s version of JavaScript. If you’re not into it, Sequence.js and WOW Slider are CSS-only options.

Amazing Slider

best sliders gallery

Based on jQuery, Amazing Slider offers numerous skins to users. You can choose from a gallery of options including custom backgrounds, banner buttons, thumbnail icons, vertical sliders and a lot more. It can be so flexible because it’s not just free code. Non-watermarked versions of the slider start at $69 and go up from there.

Huge IT Slider

best sliders gallery

The Huge IT Slider is a plugin for WordPress that supports video and photo content along with captions and variety of interaction styles. It’s one of the best sliders for websites built on WordPress, and one of the more flexible.


best sliders gallery

Unslider is a minimal jQuery slider for a more modern aesthetic. Promoting itself as “ultra simple,” the code is as basic as an unordered list with some animation elements applied. It’s simplicity means it can support a huge range of options, if you know what you’re doing, from full-page sliders to text-only options.

Avia Slider

best slider gallery

Avia Slider is a jQuery slider that builds itself on unique transitions. The diagonal block build is particular impressive, and each feature of the slider is thoroughly documented by the developer


best sliders gallery

Jssor is a flexible jQuery slider built with a deep level of customization available. It includes complex features like z-axis animation and layers effects alongside common options like thumbnail views and video panes. Users can download a variety of pre-built version, or apply pre-developed skins to their own slider. In the tradition of open-source projects, power users have almost unlimited flexibility in how they use the project, and it’s free to download. Jssor is also one of the few sliders on this list that comes in a non-jQuery version as well, and one of the best sliders available for free.

Camera Slideshow

best sliders gallery

Camera Slideshow is a responsive and adaptive slider built with jQuery. It’s basic but free, and includes a number of skins that ship with the code for limited customization. Mostly, though, it looks nice out of the box, and its plain enough to drop into most projects without clashing with your aesthetic.


best sliders gallery

Sequence.js is goes beyond the best sliders and offers a “responsive CSS animation framework,” allowing developers to create a whole host of effects by applying CSS3 animations to their projects. CSS animations are astounding simple to implement, support by a wide variety of browsers, lightweight and modern. This also makes Sequence one of the most complex sliders on this list. However, that also makes it the most customizable by far. Sequence.js is supported by every browser since Explorer 10, with graceful degradations in place for Explorer 8 and 9.

jQuery Banner Rotator

best slider gallery

jQuery Banner Rotator is a simple but useful jQuery-based slider. It offers solid animation options, a variety of transitions and easy super-imposed text options. You also get configurable tool tips for each thumbnail, flexible text descriptions and resizable UI elements.


best slider gallery

Sideways is one of the more unique best sliders on our list. It’s forte is full-page sliders with complex, side-mounted gallery tabs. An excellent choice for building out a photographer’s portfolio, though not as applicable for headers on corporate sites. Users also get custom toolbars and mouse wheel-based navigation.

Bootstrap Carousel

best sliders gallery

Bootstrap Carousel is made for non-coders, offering robust WYSIWYG tools and with a complete set of point-and-click options. The slider is built is custom software and then exported to your site. Users can even build full sites using the drag-and-drop website builder for quicker development timelines.

Master Slider

best sliders gallery

Like Bootstrap Carousel, Master Slider also offers a visual builder for creating WYSIWYG sliders without coding. It’s based on jQuery, with support for animated layers and touch navigation as well as more than 25 pre-built templates that users can implement immediately.

WOW Slider

The last slider for folks who would prefer not to code, WOW Slider is designed to be easy to use.  It’s also built entirely off CSS, letting you ditch the heavy scripts required for many jQuery plugins. Users get a surprisingly wide array of options, include Joomla and WordPress support, complex transitions, intelligent image caching, and support for every browser since Internet Explorer 6.

Accordion Slider

best sliders gallery

Accordion Slider uses a somewhat-unique user interface metaphor, displaying an “accordion” of images for users to choose from in the carousel. It’s not the first or last slider to do this, but it’s the most popular and flexible to offer this option. It’s touch enabled and SEO friendly, with animated layers and smooth animations.


best sliders gallery

Rhinoslider bills itself as “the most flexible jQuery slideshow there is.” All its flexibility is wrapped inside of a generator that allows those with limited JavaScript and jQuery experience to swiftly implement the slider’s features on their website.


best sliders gallery

Lastly, there’s CSSSlider, an aggressively non-jQuery slider. It’s not as functional as some of its jQuery counterparts, with fewer animations available, but its responsive and massively cross-browser.

You might also like:

How To Build a Grid-Style Image Gallery with jQuery Modal Popups

Code a Dynamic Featured Image Gallery Layout using jQuery

The 32 Best Free Icons for Commercial Use to Download Today

The post 15 Best Sliders and Galleries For Your Next Project appeared first on SpyreStudios.

from SpyreStudios

Wednesday, 24 May 2017

How to Add Gradient Text to your Adobe Muse Website

Muse For You - Gradient Text Widget - Adobe Muse CC - Web Design Ledger

How to Add Gradient Text in Adobe Muse. No Coding Skills Required.

 Muse For You - Adobe Muse CC Adobe Muse CC Logo

Gradients can be a great touch when wanting to add more styling to your website. With a lot of UI and UX design these days we are seeing gradients everywhere. It is actually a real art and skill to make sure the right colors blend together and to give the user a unique visual representation of a product or brand. Lately, I’ve been having a lot of fun with gradients and looking at different ways to incorporate more advanced gradients into Adobe Muse. Adobe Muse has its own built-in gradient option but it only allows you to add two colors and make the gradient either horizontal or vertical. That is why I released the “Advanced Gradients” widget that allows you to add more than two colors to a gradient and to set the gradient angle from 0 to 360 degrees. I myself have been using it quite often to add more styling to sample pages I’ve been creating. I will talk more about the Advanced Gradients widget in another article.

In this article, I am going to be covering the “Gradient Text” widget. I haven’t seen gradient text as often as elements with gradients so I thought now would be the perfect time to introduce it. Gradient text looks really slick and it can add that extra bit of styling to make a website really stand out.

Muse For You - Gradient Text Widget - Adobe Muse CC - Web Design Ledger

Here is how to add the Gradient Text widget in Adobe Muse:

1. Install the widget by double clicking on the .mulib file.

2. Go to the Library Panel in Adobe Muse. If you do not see the Library Panel go to Window > Library.

3. Click, hold, and drag the widget onto your Adobe Muse website. The initial text will say “Muse For You,” and it will have a blue to green gradient.

4. Set the instance number for the widget in the “Instance” section. Each new gradient text with different styling properties should have a unique instance number.

5. Type the text you would like to apply a gradient to in the “Text” section.

6. Format the text within the “Text” section of the widget. Here you will find all the options to customize the size, letter spacing, line-height, text transform, alignment, and font weight of the text. To change the font type for the text select the widget and then go to the built-in Adobe Muse text option and select a web font from the drop-down.

7. Next, open the “Gradient” section. Here you can set the gradient angle, the first color, and the second color for the gradient. You can also adjust the gradient position and opacity for each color.

8. There is an “IE Fallback” section that allows you to select the color for the text on browsers that do not support gradient text. At the moment Internet Explorer browsers do not support gradient text. The Edge browser does support gradient text.

9. To make sure the gradient shows up well within the text make sure the widget container is not too large in width. Making the width of the widget container larger stretches out the gradient behind the text and makes the gradient not as visible. You can set the gradient width so it is very close to the left and right side of the text.

10. Done!

For more video tutorials and widgets for Adobe Muse visit

Happy Musing!

Read More at How to Add Gradient Text to your Adobe Muse Website

from Web Design Ledger

My Journey Of Learning Programming Through Flatiron School #25

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.

Throughout my courses that I have taken within The Flatiron School so far, I have realized one major thing. Holy smokes I have a lot to learn…. It was like when I got my first web job roughly five years back. In my mind at that time, the internet was this small thing.

It is kind of like a car to people who do not work on cars. A cars sole purpose is to get you to point A or B. But once you dive a little deep into that thing that you spend a lot of your time in or doing, like the internet, it turns into this very complex thing that is dependent on a lot of other pieces to make it work effectively. And not just the steering wheel and the gas pedal.

Like this example, the internet in my eyes was finally being realized. I found out that everything I knew about the internet was basically the big toe. Not even that, but the tip of the toenail. And as I slowly hiked the toenail, I got a glimpse of what that was attached to. And then inched my way forward and saw what that was attached to, you get the point.

What I am trying to say is, development is not an easy profession to master. You have to be well versed, intuitive and have the range to see the bigger picture. Which like everything take a lot of stinking time. The legs that make up the internet are insane, but with patience and practice, you can learn to master them like anything else.

When I am greeted with a new problem, from getting loops to work to ad code implementation I would probably say I spend 90% of my time reading about how to solve the problem, and one roughly 10% of that time implementing. But like everything that is how it is. Preparation and planning, only after this, implementation can become a seamless extension of that.

When I first started programming, my biggest issue with it was that every circumstance was unique to the next. Conceptually everything was roughly the same, but the pieces never quite fit into each other, even though I just completed a very similar issue. There was this constant adaptation to the next situation, which made it feel like you never quite had a grasp on what the code was actually doing. But this has become easier. I see the code as tools now. And each object or block of code is a new puzzle piece, which brings everything closer to completing a task.

So to say that programming is easy, I would not say it is, but like everything, practice increases proficiency. The Flatiron School has enabled me to increase proficiency and helped me see how all this “stuff” connects to each other, bringing together the whole picture.

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

from Web Design Ledger

10 Killer Tools to Launch and Build Your First Startup

10 Killer Tools to Launch and Build Your First Startup

As our lives continue to plunge deeper online, there is no better time to launch a killer startup than now. The increasing demand for products and services to satisfy our thirst for information and entertainment continues to open gaps in the market for new goods and services to make our lives better. But building and […]

The post 10 Killer Tools to Launch and Build Your First Startup appeared first on Vandelay Design.

from Vandelay Design

General Design Elements For Basic Website Development

The concept of web design can easily appear to be intimidatingly complicated. Designers are expected to achieve versatility and visibility, deliver information in an enticing and enriching manner, and be technically sound as well as visually coherent in one robust package.

It sounds like a pretty daunting task, especially when you recognize that many developers are self-taught. But surprisingly, web design is still somewhat of a tangential concern in most educational environments; which is odd, in view of the fact that the world is well on its way to being relying completely upon the Internet and the services and access it provides.

In a time when you can find literally millions of websites to explore, it’s imperative for designers to grasp a few essential design elements so they can optimize any site for maximum visibility and usability. Take a moment to learn something that could possibly be new to you, by reading through the following general design elements that may be essential for basic website development.

A space to disperse knowledge and experience

The rising value of a blog is nothing to take lightly. Blog entries work as far more than an informative piece of chatter. When coordinated with website design, a popular blog post can create opportunities to build an intricate system of backlinks that will attract others to your original website.

Blog entries can also be used to saturate the website’s design and content further with key terms and phrases that are likely to be commonly used in searches for information that pertains to your website’s products or services. This particular website’s blog layout is exceptional, because it incorporates excellent communication tools with an array of information that’s directly related to the company’s niche.

The more your website saturates its design with the appropriate subject matter, the easier it will be for web users to find the page.

Speaking of space with respect to design

Space is not necessarily effective when it’s jammed with images, text, and other forms of media content. White space can have just as much impact as the content. It can help makes the content look more uniform and organized.

With regard to spacing, designers must keep in mind three primary concepts:

Line Spacing: When designers lay out the text of the website, it’s worth keeping line spacing in mind. Too little vertical space between lines of text can create confusion when people are reading and cause them to stop. Too much space between text lines gives the eyes opportunities to get lost.

Padding: The space between a picture and another element of the website is called the padding. Padding keeps the site looking clean and purposeful. Lines of text should never touch a picture or video embedded in the page.

White Space: The main thing to understand here is that “white” space does not necessarily have to be white. The purpose of negative space on a page is to provide balance, proportion, and contrast in the site’s design.

Understand the concept of visual hierarchy

The proper usage of visual hierarchy encourages visitors to understand visual elements of a website’s design in order of apparent importance. The key for designers is to guide viewers’ perceptions naturally along a route that supports the site’s mission or purpose the best.

The primary goal is to guide visitors in a way that feels casual and uncomplicated to completion of the desired interaction. Designers use colors, shapes, and an array of text fonts to arrive at a successful layout.

Credibility builds rapport between business owners and web users

The credibility of a website has a large impact on the way the online community regards the company or product promoted by the design. When people trust that a site is not trying to slide something by them, they tend to be more open to working with the person or organization behind it.

The best way to create a credible website is to be straightforward about pricing and other facets of the product or service. People should not have to dig through pages of ads and other nonsense to locate the exact cost of an enticing product.

The post General Design Elements For Basic Website Development appeared first on SpyreStudios.

from SpyreStudios

Tuesday, 23 May 2017

How Can Getting An UltraWide Monitor Change a Designer’s Life



Curve and Create‘ by @Littledrill featuring LG UltraWide Monitor 34UC98


A couple of months ago, we got the chance to test LG’s UltraWide monitor. To be frank, my expectations before the monitor arrived weren’t very high. I’m a typical mac user and I’m not much of a monitor user. But that was before I got to use an ultra wide monitor.

Besides the amazing and pixel-perfect quality of the images, the extra space has helped me out tremendously to split screen work. Right now, I have google docs on the right, while I read some of the monitor’s specs online to the left. The only disadvantage for me is that I’ve developed a gaming habit since I got the monitor. The refresh rate is amazing and the graphics are to die for. But we’ll get to that later.

Going back to productivity, it is actually proven that using a larger monitor helped participants complete tasks up to 52% faster, saving an average 2.5 hours each day, according to a study by the University of Utah.

Designers, architects, and photographers find wide monitors or dual monitors appealing.

The benefits of the ultra-wide monitor are as expansive as the displays themselves. Hands down, the best part of this monitor is the immersive feeling of it all. The 34-inch curved screen seems to suck you in and just fully submerge you into the screen content. The Monitor’s resolution is 3440X1440, which is almost 4x the resolution of standard HD monitors.


The LG is obviously a great choice for people from the creative industry and content creators. This is why LG has partnered with leading design institutions to provide UltraWide Monitors to help students produce work that’ll transform their industries, from architecture to product design.  


Parsons Making Center 3D Lab


The most recent partner in this grant program is The New School’s Parsons School for Design in New York City, which received a state-of-the-art computer lab featuring new LG 34” Class 21:9 UltraWide Monitors.


Designers are taking full advantage of this monitor.

The 21:9 UltraWide displays offer more visual information on screen at once, creating a workspace that enables designers to be more productive compared to the usual two-monitor setup. They also utilize sRGB over 99% IPS technology, that guarantees color accuracy with factory color calibration and eliminating frustrating color shifting and distortion that is common with traditional monitors.  It’s easy to adjust settings via the On-Screen Control and the monitors have a Screen Split function with 14 options for simple multitasking.

UltraWide Monitor

Parsons student experiences LG UltraWide Monitor


“Personally, I think creative professionals would definitely benefit from it,” said Joe, an illustration alumni from Parsons. “The monitor is basically the new drawing board. The color correction and what you see on screen should be exactly what you printed. And if you’re video editing, then there should be no lag whatsoever.”


People are already praising the new LG monitor. According to a survey of Parsons students, over 70 percent felt the UltraWide’s expansive display made multitasking easier and improved productivity.

UltraWide Monitor LG

Parsons Making Center Graphic Lab


“It’s  very wide and makes it easy to create 3D models or use Adobe Creative Suite, as the screen’s big enough to accommodate all the panels.” said Lorraine, a Product Design student.


It’s awesome to see corporations like LG making the lives of fellow designers and creative folk easier.
If you haven’t tried an ultra wide monitor yet, I definitely recommend it. It’s an amazing and immersive experience and most definitely would make you more productive.


Parsons Making Center 3D Lab

Samuel, who is studying illustration said “I think the 21:9 monitor is the future of screens.  You are putting yourself inside the screen as it curves around you. It’s user oriented. It’s ergonomic. This brings full immersion; the future of virtual reality.”

For 2017, LG is considering a range different specialized schools — including institutes for photography, film and design — to receive the UltraWide Academy Sponsorship Program, furthering its commitment to giving talented individuals the freedom and comfort to create.


Read More at How Can Getting An UltraWide Monitor Change a Designer’s Life

from Web Design Ledger

Monday, 22 May 2017

Microsoft Is Redesigning Windows 10 And We Love It

Fluent Design System - Material

Although Microsoft revealed a lot during its Build developer conference that took place in Seattle last week, for the developers, the most expected news was the announcement of the Windows 10’s biggest UI refresh:  Windows 10 “Fall Creators Update”. As the name implies, this update will come up later this year; because Microsoft didn’t want to say the exact date of this launch, I think it’s a fair bet to assume they will put it for all Windows 10 users somewhere in September.

There are many updates in the Fall Creators update, but perhaps the most notable is for the former Project Neon; except that now, it has another name: The Microsoft Fluent Design System. Given that the name is a mouthful, let’s all go ahead and agree to name it on short, Fluent.

Fluent not just brings a new aesthetic philosophy but also aims to give developers the access to a single design language that will work across all devices. According to Kevin Gallo, Microsoft’s VP for Windows Developer Platform, the team wanted to build a system that would help the developers write more “delightful” applications.

This update will actually come up with a number of few features that will change the way you use Windows device and possibly your smartphone. The Fluent’s overall design principles want to create a design language that looks light, feature layers and depth and animations, as well as materials. Because of its support for materials, Fluent will also bring back some translucency, which Windows app lost in the recent iterations of the operating system.     

In Gallo’s view, what makes it stand apart from the competition is that Fluent is meant to work well both in 2D and 3D environments. This is something Microsoft is very interested in, given its investment into HoloLens and the overall “mixed reality” ecosystem. According to Gallo, “the way we define this is that we wanted a design system that allows you to build for all devices”. Taking into consideration that Fluent is optimized for a wide range of use cases, it’s at least somewhat comparable with Google’s Material Design, in that both adopt a flat design philosophy.

For a quick view, you can check out Microsoft’s intro video below before we dive in.
Fluent is an aesthetic philosophy, made up of five primary aesthetic components. Here is the synopsis:


Light has a way of drawing out attention, being warm and inviting, fluid and purposeful. Light creates atmosphere, by adding an element of illumination to apps – particularly useful for mixed reality, in which illuminating where you’re gazing serves as a pointer, and helps separate UI elements from virtual environments.

light microsoft

Depth adds z-axis information to the UI for things like parallax effects and some extra pizzazz in mixed and virtual experiences. It helps establish a relationship between UI elements, adds some polish to animations, and can increase the sense of space within an app.

depth microsoft design

Fluent Design System - Depth

Motion adds animations that interconnect as you navigate throughout an app’s UI. It helps establish continuity as you move between pages, selections, and tasks. The seamless transitions keep you focused on the story and bringing experiences to life.

motion design


Material controls ‘physical’ properties of UI elements. It can help take the full advantage of the available screen space to celebrate content, bringing a sense of lightweight, ephemeral user experience.  The first of these is a frosted acrylic look, with modifiable characteristics. Materials can also dictate how the UI can “bend, stretch, bounce, shatter, and glide” as you interact with them, something that will likely play a greater role as mixed reality becomes more prominent.

Fluent Design System - Material

Scale affects how apps reshape and present themselves across different devices. Scale allows us expand our toolbox for more dimensions, inviting innovation across new device form factors. We can scale our design system from 2D to 3D, inviting innovations across new forms. The adoption of these responsive design concepts makes resizing windows much more useful than it was once.


These appear to be general concepts rather than hard-and fast rules.

But if you expect to see how Fluent will dramatically reinvent Windows 10 with the Fall Creators Update out of hand, you’ll be disappointed. Microsoft says only some Fluent elements will be found in the Windows 10 Creators Update, as the system was (and perhaps is) still being developed. When the Windows 10 Fall Creators Update ships later this year, the transition to Fluent won’t be complete yet. According to Aaron Woodman, a senior marketing director at Microsoft, “it’s going to be a long journey”.  So, you’ll start to see some elements of it this year, but Microsoft is describing Fluent as a series of ‘waves,’ each introducing new features and visual elements.


Fluent will be launched in gradual “waves”

Microsoft mention two “waves” for launching Fluent, but the graphic shown during the presentation seems to indicate at least five waves on the way; and still it’s not clear the timing for each wave. They could be launched with every new release of Windows 10, or the features will be made available as they come.   


Some of these features have already rolled out

You might’ve already seen some elements of Fluent if you have paid close attention to Microsoft’s first-party apps. The People, Calculator, Voice Recorder and Groove apps, are already showing off some of the cool lighting effects, transparent materials, and fancy animations.


Discovering Fluent Wave 1

Fluent Wave 1 seems to focus on five new specific effects for developers: Reveal Highlight, Acrylic Material, Connected Animations, Conscious Controls, Perspective Parallax. Most of these aren’t particularly revolutionary, and some of these effects could already be achieved, but Microsoft will feature these elements directly into Windows to give the regular users a cleaner more cohesive look and to ease the work of developers.

You can already find Reveal Highlight in some of Microsoft’s first-party apps mentioned earlier. It shows up as a glowing effect that highlights different buttons you can interact with. It helps show what you’re pointing at when using mixed reality apps, or when you’re hovering over a screen with a stylus.

acryllic-video recorder

Microsoft said that more materials are planned, but for now, they will start with just one: “Acrylic”. This is a translucent, generated material that uses Gaussian blur combined with noise to create a sort of plastic-like effect. Moreover, there are different types of acrylic materials you can use to establish design hierarchies or just prettify things a bit. They can also be assigned colors or match your current Windows theme.

Connected Animations: Adds seamless transitions for individual UI elements as you navigate around an app. For example, tap on an album in Groove, and the album cover will animate into place instead of instantly changing.

Conscious controls are a bit more of a vague concept than specific addition, but they are UI elements that can adapt to different device types and appear only as you need them. For example, scroll bars only appear when you hover over them, rather than taking up permanent space on the side of the window. And in the example shown below, tapping on the text box in Edge with a pen automatically displays a handwriting box.

Part of Fluent ‘Depth’ pillar, Perspective Parallax essentially puts different UI elements on different planes of the Z-axis, in order to help establishing some interaction hierarchy. Background might scroll slower than foreground elements, creating some parallax, which in turns adds a sense of depth.

These are just the features expected to roll up with the Fluent’s Wave 1, but there are also few concepts for future versions of Windows 10. Some of the new features already are, some of the concepts that flashed by during Microsoft’s demo reel are much more interesting and dramatic departures from the current aesthetic.


The message is clear: Fluent isn’t just something for Windows 10, but rather something that will likely permeate throughout the company – much like Material Design has shaped Google. In the future, we’re likely to see Microsoft branding evolve from the current totally flat design to something with a bit more variety and motion. It seems the company wants to make Fluent a pioneering UI for all 3D interfaces.

In any case, it’s crystal clear that we’ll be hearing about Fluent for quite some time – Microsoft is just getting started. 

Read More at Microsoft Is Redesigning Windows 10 And We Love It

from Web Design Ledger