Category Archives: internet

15 Free Web-Based Apps & Tools For Web Developers

With the right tools you can build a website from scratch in less than a day. This requires some experience, but web development is easier to pick up than you’d think.

The best way to speed up a dev workflow is with tools that automate your process and help to improve your knowledge.

I’ve organized my top picks for the best tools/web apps for web developers here that can make you a much better developer in the long run.

1. RawGit

rawgit generate github

I’m constantly finding incredible projects on GitHub that I want to demo. But downloading the whole repo or pulling via npm is a lot of effort for something I may not even like.

That’s where RawGit can help. You simply copy the URL of any file in a GitHub repo into this tool, and it’ll spit out a raw content URL with proper headers for embedding into a web page.

You can do this with any CSS/JS files in any GitHub repo online. This way you can demo literally any GitHub project without downloading files locally. Pretty cool!

2. CSSReflex Frameworks

css reflex list

With so many frameworks to choose from it can be tough getting started. It’s also easy to feel like you’re missing out on some secluded underground framework.

The folks at CSS Reflex put together a huge frameworks list for just this occasion. It’s certainly not complete but it is one of the most complete lists I’ve seen.

Each framework includes a small icon along with details about the license and links to the main site + GitHub repo. It’s all organized alphabetically so you can scroll through all these frontend frameworks to mark whichever ones you want to try.

Another great site like this is CSS DB although it’s a bit tougher to browse through.

3. WP Hasty

wp hasty generator

WordPress developers always want shortcuts to shave time off theme development. WP Hasty is the best solution I’ve found since it’s one of the most detailed code generators out there.

With WP Hasty you never need to memorize templates or code snippets for WordPress features. You just select what you want, pick your settings, and then copy/paste the code right into your functions file. Easy!

These features include WP menus, custom taxonomies, shortcodes, custom WP_Query() loops, and even snippets for adding elements to the visual composer.

No doubt this is the best WP code generator you can find and it’s brilliant for saving time on WP development.

4. Animista

animista webapp

You can also find a ton of web-based CSS animation generators. These got popular right after the release of CSS3 when CSS animation got popular.

But over the years many new code generators have sprung up and my favorite is Animista.

This tool is so detailed and easy to use. It’s by far the best CSS animation tool to date.

It’ll let you select which styles you want for your animation and auto-generate all the keyframes. You can even pick if you want CSS prefixes or if you want the code minifed by default.

Plus this animation editor is gorgeous with dozens of CSS3 techniques at the click of a button(full visual editor). If you’re sick of hard-coding CSS animations then you’ll want to bookmark Animista for safe keeping.

5. CSS3 Generator

css3 generator webapp

The CSS3 Generator is a handy code generator that’s been around for years. This is also one of the best for getting quick & easy CSS3 codes in case you forget the syntax or just don’t want to type it all out.

Note this does support the CSS3 transition property but it does not support custom animation with keyframes. So this works well in conjunction with Animista, but it’s not a replacement.

The better features aren’t in the animated codes, but rather with the more complex CSS3 properties like gradients and flexbox.

6. Can I Use

caniuse flexbox webapp

Browser support changes all the time and thankfully we’re moving towards an era where most CSS & JS features are supported.

But if you’re concerned with legacy browsers then Can I Use is an unrivaled resource. It’s the ultimate database of browser support for CSS and JavaScript with information on every browser. All versions of Firefox, IE, Chrome, Opera, and even mobile browsers are included.

You just search for a CSS property or JS method to find the related table. There you can view all browser versions or just check whichever browser you’re unsure about.

7. CodePen

codepen ide

I can’t write this gallery without including some type of cloud IDE. Being able to code right in your browser is one of the biggest changes in web development over the past 10 years.

And right now my top recommendation is CodePen because it’s just so detailed and supports so many features.

It lets you write Sass/Less right in CodePen and it’ll auto-compile for you. Same goes for Haml/Jade templating and you can even include remote JS libraries like jQuery.

A browser-based editor has almost become the starting point for demoing ideas. No software required beyond a web browser and some Internet access.

8. Quantity Queries

quantity queries webapp

Not everyone uses CSS quantity queries since they’re a lesser-known feature in the language. But with the Quantity Queries webapp you can auto-generate these queries fast.

I’ve yet to find another CSS generator that supports quantity query code. The only trouble is that this site doesn’t really explain how a QQ works, at least not in fine detail.

So it helps if you already know how to write quantity queries and then use this more as a time saver.

9. MJML Framework

mjml newsletter framework

Frontend web developers aren’t just tasked with creating websites. They often need to develop newsletters and these do not have the easiest coding standards.

That’s why other devs created email newsletter frameworks to save time and frustration. One of my favorites is the MJML framework which has its own custom syntax for building newsletters.

It may take a little while to learn, but once you get it, you’ll never want to go back. Plus this even has a live editor where you can test your newsletter designs right in your browser, just like CodePen but for newsletters.

The best tool for anyone developing a custom newsletter layout.

10. Mega Tags

metatags social generator

Every website features meta tags in the header section. These define the language, the page size for mobile, and many other settings like social features.

Mega Tags focuses on that last part. It’s a social meta tag generator site where you can input what type of site you have and what type of meta tags you want.

The default is Open Graph which works on Facebook, Pinterest, Google+, LinkedIn and many others. But you can also add custom Twitter meta tags too, and you can even change the information with a handy visual editor.

11. Clean CSS

clean css tools

Code formatting is never an easy task. Some developers create their own scripts to automate minifying code but it’s a lot easier to use someone else’s script.

That’s why Clean CSS is so valuable. It’s a free website with tons of small webapps for minifying code, cleaning out duplicate codes, and auto-formatting whatever code you want.

It has different apps for HTML, CSS, JS, SQL, XML and even JSON notation. Plus new tools get added every so often which makes this a wonderful resource for code cleanup.

12. Sharing Buttons

social sharing buttons

Looking to add quick & easy social buttons onto your site? Then Sharing Buttons is the perfect tool.

It runs with SVG icons and uses HTML for opening new sharing windows. Everything is styled with CSS so the whole webapp generates compliant code without any JavaScript.

Some devs may like this, others may hate it. But it’s one of the few social sharing button scripts that automates the whole process and gives you quite a few styles to pick from.

13. Layout Debugger

css layout debugger

This small script works as a bookmarklet in your browser. You simply drag the link up to your bookmarks bar & visit any website you want to study.

Clicking the bookmarklet automates small CSS outlines to show how certain elements fall in the DOM. This way you can easily study where certain divs end and how child elements are contained.

Really simple script but super useful for debugging CSS layouts.

14. Larder

larder code bookmarking

This isn’t so much a coding tool but rather a resource for coders. Larder lets you bookmark your favorite snippets from around the web and keep them organized based on language or project type.

You can curate libraries of your favorite codes or projects straight from GitHub. It’s like Delicious but geared strictly towards coders.

And if you connect with GitHub repos they’ll automatically sync new changes every day. This way you can keep on top of updates and keep your bookmarks fresh.

15. Panda Reader

panda reader webapp

I know reading through news isn’t always productive but Panda Reader should be a staple for every web developer.

It’s the best web-based RSS feed reader with a slant towards the web design crowd. You can choose among dozens of popular tech & design blogs along with larger sites like Dribbble or GitHub.

This way you can keep on top of news, hot new projects, and updates to current projects. All from one handy dashboard. Plus this comes with built-in bookmarking so it works like Larder but with tech/dev articles around the web.

Original Article:

How to Achieve Your Own Definition of Success as a Freelance Web Designer

In society, success is often portrayed as having pretty close to a singular definition. We think of a successful entrepreneur driving a Tesla and living in the smartest of smart homes. Or we see the opulence of a big shot executive “living the life”, as they say.

But success is a very personal and subjective thing. There is no right or wrong definition because it’s a matter of what is in our hearts. My measure of success may be different than yours. But does that mean we should still take the same approach to achievement?

While traits like hard work and integrity will always be shared factors, how we approach our freelance design businesses should better reflect our personal definition of success. Here are some ways to tailor your business to help you get to your happy place.

Focus on the Right Types of Projects

For some people, part of what defines success involves working on specific kinds of projects. Fulfillment may come in the form of designing websites for non-profit organizations or a favorite sport. Others may not care about industry so much as they care about luring projects that pay big money.

The point is to figure out the types of projects that will get you to where you want to go. From there, it’s a matter of marketing yourself to whatever niche that interests you.

Of course, this is much easier said than done. The realities of running your own business sometimes mean having to take on projects that aren’t necessarily aligned with your vision of success. But that’s okay – so long as you don’t get stuck with something that interferes with your long-term goals.

Indeed, unless you already have industry connections, pointing your business towards a specific type of project is often a process that takes time. But once you get your foot in the door, it can open up all sorts of possibilities.

Think About Where, When and How Much You Work

Success can be greatly influenced by your work environment. When you think about it, this is an area that both affects and defines our success. If you’re cranking out websites from a place you don’t want to be, it’s going to be that much more difficult to do well.

But it also goes well beyond just location. There are a number of scenarios where part of our success is not only where we do our work, but also the time we spending working. Consider three of the most common ones:

Being a Parent and a Designer
Freelancing provides a great opportunity for parents to both make a living and be there for their children. Personally, it allows me to get my daughter to and from school, along with the chance to spend extra quality time with her. So for me, working standard daylight hours at home is the right situation. Weekends are generally off-limits unless absolutely necessary.

This can be a fairly simple arrangement in terms of initial business setup. The biggest challenge is that there are interruptions in the day that can be a bit chaotic. But being at home certainly makes any chaos easier to handle than it would be at a traditional office.

Putting the ‘Free’ in Freelancer
There are many designers who use their freelance career as a vehicle to pursue other passions like travel or volunteering. Therefore, the flexibility to work your own hours is a big deal. It’s also a bit more of a challenge to achieve.

Working odd hours really depends on the type of clientele you have. Some gigs demand that you to be available during “normal” business hours. And being in the office less than the standard 5 days a week can also take some careful planning.

Still, it can be done. It’s all about finding an equation that a) lets you work a personalized schedule; and b) enables you to make a living. If you’re really passionate about something, you’ll find a way to make it all work.

Hitting the Big Time
Those looking for big ticket projects may take a different tact to freelancing than the two scenarios above. For one, higher level projects might mean working with big companies. While some clients may be comfortable with remote meetings, others may prefer to meet you in person. This means either traveling or having a meeting space may be necessary.

The other major consideration here is the amount of extra work involved. Even if you’re managing other freelancers, there could be plenty of nights and weekends filled with work (not to mention the time spent marketing yourself).

If this sounds like your jam, then focusing on process efficiency can do wonders for keeping everything running smoothly. Establish a process for how projects get done on-time and on-budget so that you can keep that money machine cha-chinging.

When Progress is Slow…

One of the best aspects of being a freelancer is the ability to do things your own way. That’s a big responsibility, though. It’s easy to get into bad habits that end up hurting your chances to live and work the way you want.

So, if you’re not seeing the progress you hoped for, it may be time to take a hard look at how you’re running your business. While bad luck can play a role, most often you’ll find that are specific things you could be doing differently.

When it comes to your financial situation, scrutinize how much you charge and how you collect payment. Web design, in particular, is an industry where prices run the gamut. You want to make sure that you’re not charging too much or too little.

As for collection, ask yourself if you’ve made it easy enough for people to both receive invoices and make payments. For example, I noticed that not long after I started accepting online payments, I had a significantly lower number of clients who were late with payment. While online payment processors usually charge a fee for every transaction, I found that this was a worthy tradeoff over being stressed out by unpaid invoices.

It’s also vital to review the services you offer. Are you providing services that don’t fit in with your goals? Do your services set you up for a predictable stream of income? While it may be hard to fully weed out services that aren’t in your best interest, you can always grandfather them out over time. Or, you might structure pricing in such a way that it’s much more worthwhile.

Lastly, review just how organized (or not) you are. If you find that you’re always scrambling to put out fires, you might want to invest some effort into better organizing your average workday. There are plenty of tools and services out there to help. If something makes your life easier and doesn’t require you to sacrifice quality – go for it.

Creating Success on Your Own Terms

Being a freelancer puts you in a unique position to determine your own present and future. It enables you to achieve the kind of success that reflects who you are as a person.

But getting there requires a thoughtful approach. Simply working day-to-day without regards to your goals isn’t enough (I now know that from experience). The key is to find out what it is you want and then implement any necessary changes in order to make it a reality.

It may take some time to get there, but that journey is part of the fun.

Original Article:

10 Free iOS 11 UI Kits, Mockup Templates & Icon Sets

The launch of iOS 11 has resulted in a great selection of resources being designed and released.

These include iPhone X grids, full iOS 11 app designs, beautiful device mockups, app icons, and complete UI kits.

Many of these have been executed to an incredibly high standard and are available for various applications, including Sketch, Photoshop, Adobe XD, and Figma. As well as this, most resources are free for personal and commercial use, meaning you can download and play with as many of them as you like.

They are a perfect aid when building your next app, and also a valuable resource to learn the specifications and features of iOS 11 and the iPhone X.

In this collection we bring together ten of the most beautiful and free iOS 11 resources for you.

Dark & Light iPhone X Minimal

Dark Light iPhone X Minimal Free iOS 11 UI Kits Mockups Icon Sets

These minimal iPhone X mockups for Adobe XD are perfect for showcasing your iOS 11 app designs. They come in both light and dark variants.

iOS 11 GUI

iOS 11 GUI Free iOS 11 UI Kits Mockups Icon Sets

This iOS 11 GUI Template is incredibly useful as a resource and reference when designing an app for iPhone X and/or iOS 11. It has almost every element you could ever need and also comes in handy for copying across visual effects and spacing.

8 iOS 11 Icons Sketch Resource

8 iOS 11 Icons Sketch Resource Free iOS 11 UI Kits Mockups Icon Sets

These 8 icons are a great starting point if you’re designing or redesigning an app icon for iOS 11. The style is much-refined, as are the icon graphics.

Food Dark iOS 11

Food Dark iOS 11 Free iOS 11 UI Kits Mockups Icon Sets

This dark food app resource for iPhone is a stunning example of what can be achieved within iOS 11 guidelines. It has effectively carried through many elements you’ll find in default iOS apps like the app store.

iOS 11 Grid Template Sketch Resource

iOS 11 Grid Template Sketch Resource Free iOS 11 UI Kits Mockups Icon Sets

This grid template is incredibly handy when starting out on a new iPhone app design project. The grids are clear and structured and save a great deal of time and energy when laying out a new user interface.

iPhone X Wireframe with iOS 11 Guides

iPhone X Wireframe with iOS 11 Guides Free iOS 11 UI Kits Mockups Icon Sets

These blue iPhone X wireframe templates are beautifully put together and serve as the perfect base for building mid- to high- fidelity wireframes upon. They would also be great for printing and sketching low fidelity wireframes on.

If you’re looking for more free wireframe templates, take a look at this collection.

Verb App for iOS 11 Sketch Resource

Verb App for iOS 11 Sketch Resource Free iOS 11 UI Kits Mockups Icon Sets

Another great example of an iOS 11 app design is this Verb app kit for Sketch. It’s beautifully presented and incorporates a wide variety of elements and styles from Apple’s user interface guidelines.

iPhone X Clay

iPhone X Clay Free iOS 11 UI Kits Mockups Icon Sets

These clay iPhone X mockups offer a slightly different style to standard mockups. They strip away the intricacies of the actual iPhone design and work perfectly when combined with minimal user interface designs.

iOS 11 App Store Sketch Resource

iOS 11 App Store Sketch Resource Free iOS 11 UI Kits Mockups Icon Sets

This recreation of the redesigned iOS 11 app store is a great resource when examining the new direction of iOS. It includes many of the new elements and styles including buttons, icons, rounded images, and larger input fields.

iPhone X 4K Mockups

iPhone X 4K Mockups Free iOS 11 UI Kits Mockups Icon Sets

This realistic iPhone X mockup, made in Cinema 4D, is extremely close to being mistaken for a photograph. The shadows and highlights are perfectly crafted and present a resource that would look exceptional on any landing page design.

You might also like:

Original Article:

10 Free Invoice Templates for Creatives

Invoicing is a necessary task for independent and freelance creatives. While default invoices can often be underwhelming in terms of design, there are a number of ways to improve them and bring them up to the high standards we creatives set for ourselves.

One of these is to use a beautiful free invoice template, tailored toward individuals in the creative industry. From there, it’s quick and easy to customise them to fit your personal brand and desired design language. In turn, it should help to further impress upon clients and improve your overall personal brand.

In this article we are going to bring together ten of the most beautiful free invoice templates available for creatives.

Invoice Free Sketch Source

Invoice Free Sketch Source Beautiful Free Invoice Templates for Creatives

This free invoice template for Sketch uses a spacious layout with bold titles and a single primary color. The backside uses an impressive repeating pattern which could easily be customised to fit your personal brand.

Invoice Template

Beautiful Free Invoice Templates for Creatives

This invoice template is one of the more simplistic and minimal template designs. Swapping the logo and brand colors for your own would only take minutes and present you with a wonderfully polished design.

Invoice Template Free Sketch

Free Sketch Beautiful Free Invoice Templates for Creatives

This beautiful free invoice template is another minimal example which uses an abundance of white space and well-chosen typography alongside a splash of color.

Modern Invoice Template

Modern Beautiful Free Invoice Templates for Creatives

This perfectly presented invoice template makes use of the full page width and houses a well-structured and orderly design. The logo and colors are easily editable and allow you to have the invoice customised in minutes.

Invoice Free Template

Beautiful Free Invoice Templates for Creatives

This invoice template is one of the most visually impressive with beautiful header gradients and a bold green highlight color. It wouldn’t make for the most printer-friendly option, but in today’s climate the printing of invoices is fast becoming a rare occurrence.

Free Branding Identity

Free Branding Identity Beautiful Free Invoice Templates for Creatives

Another visually impressive option is formed as part of this branding identity set. It uses well spaced content alongside a single primary color and monochrome footer image.

Diamond Yellow Invoice

Beautiful Free Diamond Yellow Invoice Templates for Creatives

This simple grid-based invoice design is very printer-friendly and may suit best those creatives who need to offer paper copies of their invoices to clients.

Invoice Free Template

Beautiful Free Invoice Templates for Creatives

As one of the finest and most polished examples of an invoice design, this template is all but guaranteed to impress any client.It’s wonderfully presented and uses a unique two-tone design to separate the total due and due by date from the description list.

Free PSD Invoice Template

PSD Beautiful Free Invoice Templates for Creatives

Another simple design with a lot of merit. This free invoice template would be particularly good for printing and may also present the opportunity to code the template into an editable HTML-based invoice.

Elegant Invoice for Sketch

Elegant Sketch Beautiful Free Invoice Templates for Creatives

This free invoice template casts significant focus on the typography. It’s been executed elegantly and is ready to start using from the moment you download. There is great scope for customisation with this template design.

Original Article:

Costly Freelance Design Mistakes (and How to Avoid Them)

While being a freelance designer can be an incredibly fun and fulfilling career, it’s not without its downsides. Chief among them is that it can place those of us who aren’t experienced businesspeople into a position of having to make critical decisions. Worse yet, it’s very possible to make the exact wrong choice in any given situation.

Making the wrong choice could be as harmless as ordering the wrong paper stock on your new business cards. Or, it could be serious enough to cost you a small fortune in money, reputation or both.

Truth be told, I have made costly mistakes over my time in business (their depths go far beyond this list). I can tell you from experience that it’s not very fun. But thankfully each mistake has provided me with a learning experience. So now I’m going to pass those lessons on to you. Hopefully, they save you from having to learn the hard way.

Unauthorized Use of a Copyrighted Image

There was a time when the use of images on the web was just a matter of saving one and then doing whatever you wanted with it. It probably wasn’t smart then, but it’s really not a good idea now. With copyright trolls looking for literally the slightest excuse to send you a hefty bill for unauthorized use of an image – you’d better make sure that you have clear rights to use it (including ones that clients provide).

It’s bad enough if this happens with your own website. But it’s a whole other kind of terrible when it happens to a client’s site – and it was you who posted the image. It puts you on the hook financially and makes you look the fool (I won’t comment on any personal involvement on this one).

The Solution
Scrutinize any image you download from the web. If it’s from a stock photo site (free or premium) ensure that the license allows you to use the image for your intended purpose (commercial, for example). Some license agreements even include limits as to the image’s size when used on a website. With free images, look for the CC0 type of license. That allows you the freedom to use the image in both personal and commercial projects.

Failure to Put Agreements in Writing

Knowing that you are running a business, working without at least some form of a contract is an invitation to get stiffed on payment. For your consideration, a personal anecdote:

For a long time, I relied on the goodness of people when starting new projects. Amazingly, it worked out quite well for a number of years. Then I got burned. I started a project without getting the standard deposit – even though I knew better. And when the relationship soured, I lost out on that check. While I could have gone through the legal process to get it straightened out, in this case it was good enough just to be able to walk away from a bad situation.

The Solution
When a new client wants you to work on a project – get the terms agreed to in writing. If you usually require that a client provide a deposit, you’ll want to make sure that they know you won’t start work until you have it in your hands. It doesn’t mean that you’ll never have an issue with payment or other related troubles, but at least you’ll have it down on paper.

Taking Responsibility for Things You Shouldn’t

This one will come back to bite you over and over. And it’s especially difficult because we so often say yes to things (out loud or in our heads) in the early part of our freelancing career. But usually, the pain really starts later – well after you’ve decided that you no longer want to do a specific task.

I can share an example of this from my own experience. Over a decade ago, I had agreed to administer a promotional app on a client’s website. Essentially, it was there to send a birthday coupon out to folks who signed up to their mailing list. Sounds simple enough, right? Well, not the way I did it.

Since I didn’t have anything to tie directly into their email list that would trigger the sending of a message, I instead rigged up this ridiculous system for manually adding users to an app that would send out those coupons. Because of my foolishness, I manually checked the mailing list for new subscribers and added them to a separate coupon app – for years.

This, along with a sprinkling of other short-sighted decisions took up a great deal of time that really could have been better spent. The frustration was compounded by the less-than-ideal setup.

The Solution
Think long and hard about taking on things you really don’t want to do before saying yes. You could be living with the consequences long after. Oh, and automate everything you can!

Failure to do Your Homework

The last costly mistake in our roundup can really cost you – as in tons of time and lost revenue. It’s the failure to do enough research to provide an accurate cost estimate for a project. And the real kicker is that this sin is just as easy to commit when quoting a from-scratch website or a redesign.

So often, we see cases of “scope creep” work their way into our projects. It’s those seemingly little things that turn into a huge mess. But part of that might be because we didn’t ask enough probing questions at the beginning of the process. If we’re not on the same page with our client, we might be in for a surprise.

When it comes to redesigns, we might do a cursory scan of an old site thinking that there’s nothing major lurking underneath (especially so if a prospective client hasn’t mentioned it). So, instead of clicking through a bunch of content – we assume it’s all the same. Only when we begin working on the project do we find that key element we missed. At this point, it’s probably too late (or at least too awkward) to go back to the client and ask for more money.

The Solution
The key here is to be as thorough as possible when reviewing an existing website or going over project requirements with your client. Reviewing a website should be simple enough. It’s a matter of clicking through each and every link to see what’s there. If there’s something you don’t quite understand – ask questions. And, when going over project requirements, it’s not enough to just know what functionality the client needs. It’s also important to find out how they expect the whole process to work and any data portability needs they may have. The more information you collect, the more accurate your estimate will be.

Learning as You Go

If you’ve never been in business before and all-of-the-sudden find yourself running one, you’re bound to have some missteps. That’s a natural part of the process. As a designer or developer, we’re often focused on what we do best. Sometimes the other job requirements aren’t as apparent until something goes wrong.

The good news is that most mistakes are correctable – if not outright preventable. The best way to avoid these situations is to really think things through. Take time and review the pros and cons. Think about how a decision may impact you a year or two down the road. Over time, you may find that doing things this way will become easier. And both your bank account and sanity will be the better for it.

Original Article:

10 Creative Interpretations of the iOS Interface Guidelines

Compared to Google’s Material Design, iOS is considerably more lax in defining styles and design direction. This leaves it much more open in terms of interpretation.

In their Human Interface Guidelines, Apple do not go into the same level of detail as Material Design when outlining their design system. This has a negative impact on consistency, but does open the door for some interesting and creative applications of the guidelines.

In this gllery we are going to take a look at and analyse ten of the most creative interpretations of the iOS Human Interface Guidelines.

Shop Exploration III

Shop Exploration Creative Interpretations iOS

This first example implements a beautiful card-based user interface. The icons are minimal and the two-tone primary color scheme of black and white offers great contrast.

Checkout Flow

Checkout Flow Creative Interpretations iOS

This card-based checkout flow is highly visual and incorporates a beautiful header section. It uses a well-selected color palette of purple and green, and the gradients combine perfectly with the patterned shapes.

Application for Riders

Application for Riders Creative Interpretations iOS

This app for jobs implements a unique approach to navigation and primary actions. The buttons are constrained to the corners, offering a potential iOS version of the floating action button.

Below App

Below App Creative Interpretations iOS

Using plenty of colorful and minimal imagery, Below App offers a take on iOS which incorporates elements of brutalism. The colors are stark and the typography is bold and impactful.

Business Calendar

Business Calendar Creative Interpretations iOS

The business calendar is another app to offer its own take on Android’s floating action button. It uses a clean solution which is very much appropriate for iOS’s design language.


Aia Creative Interpretations iOS

Aia’s chat bot user interface is exceptionally minimal. It displays beautiful crimson graphics underneath the status bar and uses large, clean typography throughout.

Crowdfunding Campaign

Crowdfunding Campaign Creative Interpretations iOS

This crowdfunding campaign app uses an abundance of white. It’s contrasted with minimal imagery which appears to fall off the edge of the screen. It’s seemingly aiming for a similar effect to that achieved on Android devices like the Samsung Galaxy S8.

Music App

Music App Creative Interpretations iOS

This visually impactful iOS design is incredibly creative in its use of color and imagery. The purple background spans almost half the screen and the primary actions use some rarely-seen button designs.

Map on iPhone X

Map on iPhone X Creative Interpretations iOS

This map app uses all the real estate available on the iPhone X. The maps span edge to edge and the card-based navigation contrasts beautifully against the green/blue gradient background.

Who’s Hungry?

Whos Hungry Creative Interpretations iOS

Though it’s missing the necessary bottom bar which replaces the home button, this design offers a beautiful take on card-based design elements. These elements are becoming more popular as they can be displayed over existing content with excellent contrast.

Original Article:

10 Free WordPress Theme Collections You Need to See

There is no doubt that WordPress is one of the most popular content management systems. It’s used for blogs but also for small business websites, large corporate sites, personal portfolios, and so much more.

One of the reasons WordPress is so popular is because of the sheer number of themes that you can choose from. No matter what niche your website or blog is in, you are guaranteed to find a theme that will align with the topic of your blog. And the best part? You can find a great looking theme for free.

However, finding the right free theme is not an easy task. The number of results you get when you search for a free WordPress theme is quite overwhelming:

That’s why we’ve done the hard work for you and gathered the best free theme collections in this post. You’ll find themes suitable for bloggers, business owners, designers, and more.

30+ Free High-Quality WordPress Themes for 2017

This roundup features the best free themes listed in the official WordPress theme repository. You’ll find themes that are suitable for small business websites but also themes that can be used for personal blogs, online stores, and even portfolios.

The themes don’t lack in features either: they can all be customized using the native WordPress Live Customizer, and some even feature plenty of widgets for the homepage so you can easily rearrange elements and add different content.

21 Free WordPress Magazine Themes for 2017

This collection is perfect if you’re looking to start an online magazine or a news site. It features nothing but the best magazine themes that can be used no matter what category your magazine belongs to.

The themes range from having a traditional magazine layout with large images and bold typography, but you’ll also find themes that make use of the grid layout. All of the themes also have plenty of ad space so you can monetize your magazine right from the start.

10 Free WordPress Video Themes for Self-Hosted and Embedded Videos 2017

Video is the latest and hottest marketing method right now so if you want to take advantage of it, browse through this theme roundup. Although it doesn’t boast a high number of themes, you can be sure that the themes have been hand-picked to ensure they have the right features.

You’ll find themes that allow you to use videos as a creative background on your pages as well as themes that make it easy to embed or upload a video directly to your post.

30+ Best FREE Business WordPress Themes and Templates 2017

If you need a theme for your business site or if you’re about to launch a business website, don’t skip this theme roundup. The themes in this collection come with all the necessary features that allow you to share what your company does, present your services or share examples of your work as well as showcase your products.

The themes also come with the ability to insert multiple calls to action, newsletter integration and social media integration, as well as customization options.

15+ Best Free Responsive Personal Blog WordPress Themes 2017

Starting your own personal blog is a great way to establish yourself as an authority, share your day to day life, keep your friends and family up to date with what’s going on in your life and connect with like-minded people. But, it can also be an excellent way to share your skills and knowledge in the form of a personal resume.

Regardless of the reasons, there is a theme to suit your blogging needs. This collection features themes that can be used by lifestyle bloggers, fashion blogs, travel bloggers, writers, and more.

10+ Best Free Portfolio WordPress Themes

Showcasing your portfolio is the best way to impress potential clients and find more work as a freelancer. Whether you’re a graphic designer, web designer, photographer or writer, the themes on this list will help you feature your work in style.

Clean design, beautiful featured images, elegant typography, and grid-based layouts are sure to make your past work stand out. Most of the themes on this list also integrate with some of the most popular WordPress plugins and are easy to customize through the built-in Live Customizer.

41 Best Free WordPress Photography Themes (Expert Pick)

If you’re a skilled photographer, this roundup is for you. Creating a website to feature your photography is a must, especially if you’d like to sell your prints, offer exclusive stock photos as downloads or simply promote your photography services.

The themes featured in this roundup will allow you to do just that. Features like large and beautiful sliders and galleries paired with minimal design and clean typography will make your photos come to life while still allowing your visitors to get a better preview with Lightbox.

35+ Best Free WooCommerce WordPress Themes to create Awesome looking Responsive eCommerce sites 2017

Launching your online store has never been easier thanks to WordPress and plugins like WooCommerce. With this collection, you’ll be able to get your store up and running quickly without sacrificing the aesthetics or functionality.

The themes featured in this roundup put a high focus on showcasing products right on the homepage along with custom widgets, plenty of customization options, detailed setup instructions, and SEO-friendly code that will help your store rank even better in search engines.

10 Free Education WordPress Themes 2017

If you run a daycare or plan to launch an online course site, then WordPress themes geared for the education industry are the perfect choice. With the help of one of these themes, you’ll be able to share what your school or program covers, introduce your instructors, and share the preview of different modules.

All of the themes are responsive, and they also come with the ability to accept student registrations, calendar and booking integrations, customization options, and more.

Free Parallax WordPress Themes & Templates 2017

The last collection on our list features stunning parallax themes. The parallax trend has been dominating the design industry for a while now and there are plenty of free WordPress themes that make creative use of parallax backgrounds.

These themes can be used for almost any purpose; from business sites to creative portfolios as well as blogs and e-commerce stores. You can choose between one page and multipage themes, although do keep in mind that parallax works best with one-page sites for those of you who want to have a simple yet effective online presence.

Final Thoughts

Back in the day, free WordPress themes had a bad reputation for lacking in features and having a design geared primarily for bloggers. But, as you can see from the theme roundups above, a lot has changed in the recent years.

Nowadays, free themes are almost on par with the premium themes, offering attractive design and plenty of features to help you get your site up and running quickly without hurting your bank account. Check out the theme collections featured in this post to find the perfect theme for your WordPress site.

Original Article:

10 Beautiful Examples of iOS 11 App Design

With iOS 11 having now been officially rolled out across Apple devices, we are beginning to see some beautiful examples of what can be achieved using the revised design language.

Aspects such as the larger title text, heavily rounded corners, subtle shadows, and refined buttons and icons, are all inspiring designers and developers to put forward their own take on iOS 11.

Last month’s announcement of the iPhone X has also lead to some beautiful app designs, with designers all pushing for their own unique take on elements such as the status bar and increased screen real estate.

In this article we are going to review some of the finest iOS 11 app designs and concepts that we have seen so far.

iPhone X Todo App

iPhone X Todo App iOS 11 App Design

This beautiful iOS 11 design for iPhone X uses a visually clear and colorful design language with well-refined interactions to match.

Shopping Cards

Shopping Cards iOS 11 App Design

This shopping app uses the beautiful shadowed card designs that have now become an integral part of the iOS 11 design language. The cards are featured prominently in the podcasts and app store apps.

Kids Event App

Kids Event App iOS 11 App Design

Using an abundance of color, this kids event app is a really well-executed example of iOS 11. It uses the emphatic title type and plenty of rounded imagery with white space around.

User Profile

User Profile iOS 11 App Design

Dark apps like this user profile are particularly impressive when displayed within an iPhone X mockup. The dark background blends seamlessly with the bezel and camera notch.

Sales Dashboard

Sales Dashboard iOS 11 App Design

This sales dashboard concept shows how beautiful colors and gradients can look in both day and night modes on iOS 11. The graphs span edge-to-edge and make excellent use of the expanded real estate.

Property Developer Finder Mobile App

Property Developer Finder Mobile App iOS 11 App Design

This property developer finder app for iOS uses simple, yet effective icons, as well as shadowed cards and a large title. It’s been executed perfectly and makes tremendous use of gradients and depth.

News & Account

News Account iOS 11 App Design

While a more ‘default’ implementation of iOS 11, this news and account app is nevertheless a stunning example of how to work within Apple’s guidelines. The spacing, iconography, and typography have been designed with exactitude.

Newbank Today

Newbank Today iOS 11 App Design

Another more ‘default’ implementation, Newbank utilises a limited color scheme with precision, and makes excellent use of depth elements and a card-based layout.

Text Vote

Text Vote iOS 11 App Design

Text Vote showcases one of the more minimal approaches to iOS 11 app design. It keeps both the iconography and typography very simple with a focus on written content.

Photography Product

Photography Product iOS 11 App Design

This photography app is an example of a more visual iOS 11 design. It’s something more akin to a fashion app where visuals are of great importance and shows off the edge-to-edge display of the iPhone X in all its glory.

Original Article:

12 Best A/B Case Studies On Conversion Rates In Web Design

There’s so much to learn from case studies. They can help you reach conclusions for UX ideas, optimization techniques, and even written copy.

For this post I’m focusing on conversion rate case studies that aim to increase total sales and signups with just a few small tweaks.

If you go through each case study one by one you’ll find many CRO ideas that you can try on your own projects.

1. Homepage Sign-up Form

homepage signup ab test

Most visitors enter a company website from the homepage. This is the best place to capture leads if you can place a signup form above the fold in clear view.

This case study, with Tom’s Planner, increased total signups by 43% just by adding a form onto the homepage.

It seems like a crazy thing to overlook but it really makes a difference. Anyone hoping to add more subscribers to their newsletter should try out this simple design trick.

2. Promo Code Boxes

promo code box checkout

There’s an interesting study done on Bionic Glove’s ecommerce checkout page. They ran a promo code box on the checkout page and noticed a lot of potential buyers left the page to go search for promo codes in Google, then never came back.

By simply removing this promo code box, total revenue increased by 24.7% over the testing period.

Some of this increase probably comes from fewer promotional codes that reduced pricing, but the company also saw an uptick in total conversions with more people completing the checkout process. Impressive results for such a strange test idea.

3. Stock vs Real Images

stock real photos

I always prefer natural photos over stock because they feel more relatable. Many companies still go with stock pics but this case study might be enough to change their mind.

The 160 Driving Academy firm tested different photos on their homepage: one of a generic stock image and another of real students from the academy. They were testing against total signups for the newsletter and new registrations.

This A/B test garnered a 161% increase in total conversions across both actions combined. Just from switching one picture and making the site feel a little more authentic.

4. CTA Text

cta text ab test

Great CTA buttons are necessary for solid conversions. Small mistakes with CTAs can cost you sales, and one big mistake that many overlook is their CTA copy.

The team at Price Charting ran this A/B test for two different CTA button texts:

  • Download
  • Price Guide

The latter increased total clickthroughs by 620.9% and clearly dominated over the generic “download” text.

Moral here is to make your CTAs specific. Tell the user what they’ll get or what’s in it for them, not just what the action should be.

For example, you might try writing “create my account” for your signup button instead of just “sign up.”

5. Adding “Free” Text

adding free text checkout

Here’s a case study that really surprised me because it’s just so simple. Soocial ran a small A/B test by adding “free” text right beside their CTA button.

The conversion rate jumped from 14.5% up to 18.5% which may not seem like a whole lot at first. But it’s well over a 20% increase which adds up if you’re running high volume traffic.

6. Short vs Long Pages

shortform longform pages

This frequently debated subject may be as old as the web itself. Should you build a longform landing page or use a smaller design?

Well the answer will differ based on your audience and what you’re selling. But this A/B test by PayPanther shows that the long-form redesign really did work better with a 372.62% increase in signups.

If you haven’t tested your landing page content, definitely try a longer-form style. You might be surprised with the results.

7. Homepage Copy

homepage header copy ab test

Header text on your homepage can also play a vital role in conversions. If you already have a signup form in your header then all you can do is optimize it for more user actions.

Check out this small study by VenueSphere to see how much copy affects conversion rates.

They ran a variation with a slight change in the subheading(not the heading) and this increased total leads by 69%. You may have to go through a few variations to see similar results, but there’s no doubt that your page copy matters.

8. Price Comparison Information

price comparison at checkout

I don’t see this on many ecommerce sites but it seems like a solid idea for increasing growth. The team at Paperstone ran this A/B test where they added price comparisons next to their checkout form.

This comparison measures their price against their top competitors showing they were ultimately the more affordable choice.

Over a total of 12k unique visitors the price comparison increased total “add to cart” clicks by 10%. Not too shabby!

It’d be difficult to do this yourself if you don’t know your competitor’s pricing, but it may be worth testing if you run enough traffic through an ecommerce shop.

9. Product Page Authenticity

product authenticity badge

Here’s another case study focused on a really small change that blows my mind. ExpressWatches ran a test by adding an authenticity badge to their checkout page.

Over their 30-day test they saw a whopping 107% increase in total conversions. That means doubling the total number of sales, just from adding a small graphic saying “authorized dealer” next to the checkout button.

10. Larger Product Images

large product images

Whether you’re selling your own or affiliate products, images always gain higher clicks. Optimized images help a lot but you also want to consider total image size and how each photo fits onto the page.

That’s where this case study comes into play.

By making product images larger, the Czech ecommerce shop was able to increase total sales by 9%.

That doesn’t sound like much, but when you’re running a large ecommerce site with many different products, 9% can be a huge difference in revenue. And this higher CR happened not by adding anything new or changing text, but just by resizing the images they already had.

11. Remove Nav From Landing Page

remove nav from lander

I should note this split test seems best suited for websites running paid traffic through AdWords or Facebook. But I suppose it could work for any traffic source!

The company Yuppiechef tested conversions across a landing page with no navigation menu vs a variation with a navigation. They saw a difference of 100% more conversions on the winning lander with no navigation.

Seems crazy right?

It ultimately depends on how people find your page and what their goal is by visiting the page. If they don’t want to browse your site, then they’ll only be interested in the content that’s right in front of them.

Anyone who designs a lot of landing pages might give this a shot.

12. Image vs. Video

image or video landing page

Earlier I mentioned a case study with stock photos vs natural photos. Well this case study tested an image against an embedded video on the homepage.

The goal was to increase “add to cart” clicks, and the video lander achieved this with a 12.6% CTR increase.

It seems like videos on landing pages increase trust and build a bond with visitors who actually watch the video. This makes the site feel more human and ultimately captures the minds of visitors on the fence about purchasing.

But none of these case studies are bulletproof for every website. The best way to improve your conversion rate is to run your own tests and see what happens.

Take a peek at our A/B testing guide to learn more and maybe even find some results that get you writing your own case study.

Original Article:

Beautiful Examples of Motion Design in Web Design

Motion design has seen a substantial rise to prominence within the web design industry over the last few years. Most landing pages and award-winning website designs incorporate some aspect of motion, whether that be through illustrations, video, animated GIFs, or even subtle custom emotes.

Some websites even use motion design with their products, for example Apple who use vertical scrolling as a trigger for applying motion to their product mockups.

There are some remarkable examples which show just what can be achieved when applying elements of motion design to a website. In this article we are going to round up a selection of the very best.


Pipefy Motion Design in Web Design

Pipefy uses motion design in the hero section of its website. It displays a user interface demo of their product with a hypothetical user interacting with and showcasing the platform.


Figma Motion Design in Web Design

Figma’s main selling point is design collaboration. As such, it demos this using effective screen capture video footage in the hero section.


ZenDesk Motion Design in Web Design

ZenDesk’s Answer Bot is demoed on their website using a minimal and simple example of motion design.

Museum of Science + Industry

Museum of Science + Industry Motion Design in Web Design

The Museum of Science + Industry uses motion graphics and video in the hero section of their website to illustrate each active exhibition. It adds a great deal of visual interest and effect.


Adidas Motion Design in Web Design

Adidas Climazone’s landing page uses motion design via user scrolling as the trigger. As the the user makes their way down the page the graphics and images morph and change.

Stripe Sigma

Stripe Sigma Motion Design in Web Design

In possibly the most impressive example of all, Stripe uses motion design in multiple instances. The hero section uses a video to illustrate the product in action, while below a scrolling ticker of FAQ cards makes its way from right to left, changing color over time.


Snappd Motion Design in Web Design

Snappd’s homepage scrolls through a selection of video stories. When one lines up with the iPhone mockup, it triggers the video to play.


ZKIPSTER Motion Design in Web Design

ZKIPSTER uses one of the more traditional implementations of motion design: a full size background video. It does so with great effect, applying a filter on top for greater contrast and subtlety.


Shopify Motion Design in Web Design

Shopify uses motion through its product imagery. In this instance, the user’s scroll location is used as a trigger to expand the product mockup and reveal its complexity within the simple design.

An Interesting Day

An Interesting Day Motion Design in Web Design

The ‘An interesting Day’ website applies motion by implementing a parallax effect which tracks the point of the user’s cursor to produce a depth effect. It’s subtle but highly effective and satisfying to experience.

Original Article: