Category Archives: internet

10 Fantastic Email Newsletter Designs With Free Source Code

Designing a newsletter can be tough. Not only do you need knowledge and understanding of how users/readers expect content to be delivered to them, you also have the headache of making the layout compatible with all of the many emails clients.

It helps if you study the layouts of existing newsletters to get an understanding of how the code and layouts work. That’s why I’ve curated 10 of the best newsletter designs that are fully responsive and up-to-date with modern coding standards.

If you’re planning to launch your own newsletter, these designs should be great inspiration for you.

SeatGeek

With a single column design and large typography, I love the way the SeatGeek email uses icons and simple graphics to grab your attention.

The large typography also takes up a high percentage of the page making it very easy to read. Shorter paragraphs, larger text, and a clear CTA at the bottom of the page all increase usability.

For a simple verification email this does the job well.

PlayStation

If you’re looking for a more complex design, Sony’s Battlefield 1 release offers some nice ideas.

Most of this newsletter relies on images to replicate the official Sony PlayStation website. This is great for building brand awareness and trust, but this also feels a bit light on information since it doesn’t tell the reader what to do or what the message means.

Still, it has a really smooth design and it shows how much quality graphics play a role in email layouts.

Social Print Studio

Email verification messages don’t need to be complex. But you should feel okay adding some details about the website/list the user just signed up to.

This email by Social Print Studio is primarily a verification message, but it also includes points about the site and what new users can expect from using it. This even includes a ‘shop’ CTA leading directly to the site where readers can order prints of their Instagram photos.

An excellent example of coaxing users back onto the site while also increasing signup verifications.

Archant

Here’s a real interesting email newsletter with an update preferences message from Archant (online publisher).

The goal is to connect with users who may have subscription settings that are either too strict (blocking all contact) or too lenient (receiving too many emails). It’s a cool way to connect with existing subscribers and ideally get them signed up to more lists.

WistiaFest 2017

Event newsletters like this one are usually pretty simple. They only have a few goals: share information about the event and encourage subscribers to buy their ticket early.

This newsletter has all of that in spades with CTAs to check out the event’s speakers and to sign up for a ticket. The layout also follows a single one-column design which usually works best for emails.

Lists for events also don’t go out regularly, so it’s crucial to include the logo near the very top of the page. This way subscribers know exactly what the message is about since their last message was probably 12 months before.

Sprout Social Webinar

The Sprout Social newsletters are fantastically well-designed and their codebase is phenomenal. Take a look at this simple design promoting an upcoming webinar.

It’s pretty short and uses graphs to draw attention. It also uses bulleted lists with icons to help sell the webinar as bullet points are much easier to read than paragraphs.

Plus, the big green CTA is well above the fold and pushes their webinar schedule. You can replace many of these elements with your own and see fantastic results.

Sprout Social IG Scheduling

Another example from Sprout Social is this promo email covering their Instagram scheduling feature.

One difference with this layout is the alternating two-column features grid. It uses square icons placed alongside square info-boxes with clear visuals. A great concept and it blends in nicely with the overall design.

If you’re looking for a basic template to study and possibly recreate you should check out the Sprout Social emails. Considering all factors like visuals, copy, and page structure, Sprout Social do email marketing right

Moo Design

From business cards to custom stickers, this promo newsletter really sells the product well. You can learn a lot by studying how other websites promote their content, and this Moo newsletter is a terrific example.

Product photos show how these items could be used and you can also learn a lot from the email’s style and flair.

It feels colorful and fun with a light sense of humor. This tells readers how these products feel and why you might want to visit Moo.

The newsletter uses a two-column product feature with blocks of images and text. An excellent way to grab attention and increase conversions.

Under Armor

The Under Armor brand is very popular in the fitness community. They have tons of great products and their newsletter design sells their items well.

Notice how many unique photographs are used in this design. With some products, it just makes sense to add photos more than text. Block elements with photos and CTAs work well for Under Armor’s newsletter and this is usually a good strategy for all physical goods.

Runtastic

Product feature lists are also great for promoting mobile apps and digital software. This Runtastic email relies on app screenshots and small flat-styled icons to grab your attention.

The goal of this newsletter is to encourage clickthroughs and get new users digging deeper into features. It’s an entire suite of programs and tracking tools so it can take time to learn everything.

But with a great follow-up email you can provide just enough info to get people curious and wanting to learn more.

These are just some of the best newsletter designs I’ve found but there are dozens more out there. And regardless of what you’re promoting or why you need a newsletter, these designs will help you plan usable layouts with clean source code to boot.

Source File:

The Return of Shadows to Web Design

After the shift away from skeuomorphism to flat design a few years ago, elements such as drop shadows were all-of-a-sudden deemed obsolete.

As flat design slowly evolved back into something less severe, it has begun to implement aspects from formerly popular design trends. Shadows have been the obvious development here as they contrast beautifully with minimal design styles and flat design elements.

In this article, we are going to review a selection of the very finest current implementations of shadows in web designs.

Julian Buehler

Bordering on brutalism, Julian Buehler’s website uses clever 3D shapes with shadows, providing a unique depth effect.

Combined with old school reflections, the shadows give the object a realistic feel and certainly succeed in creating something unique and out of the ordinary.

drop shadow design trend web Julian Buehler

Ustwo

A more subtle implementation, Ustwo uses overlapping text in tandem with shadows to create a layered effect. This results in adding some separation as well as perspective and visual interest.

drop shadow design trend web Ustwo

ATOLYE15

ATOLYE15 cleverly uses shadows against a white backdrop to create the illusion of transparency in the hero section. This minimal implementation is subtle yet effective, and a great example of how shadows can enhance a website’s design.

drop shadow design trend web ATOLYE15

Better

Better is unique in its design as the shadows are connected to the objects, creating the illusion of there being a table on which the items are being placed.

drop shadow design trend web Better

Plasso

Plasso is an all around excellent website design. The shadows are implemented sparingly but in perfect fashion. They grace only the primary CTA buttons and content cards, creating a very minimal but stand-out design which highlights and brings attention to all the essential areas.

drop shadow design trend web Plasso

Stripe Sigma

Stripe is renowned for its excellent design direction. As it continues to roll out more products and features, the continuation of this direction includes an abundance of impressive shadows.

drop shadow design trend web Stripe Sigma

Smallchat

Smallchat includes shadows in their very minimal yet colorful design. They add to the contrast behind product imagery and help differentiate it from the written content. All-the-while, it adds an attractive layer to the design and rounds off an excellent landing page.

drop shadow design trend web Smallchat

Scaphold

Scaphold, like Better above, uses shadows to produce a table-like effect underneath the product illustrations. In this example, it uses a variety of shadow styles including very harsh edges as well as softer, heightened shadows which produce the illusion of elements floating in mid-air.

drop shadow design trend web Scaphold

Have you noticed any examples of shadows in web design recently? Share them with us below!

Source File:

Dark Patterns: The Good, the Bad, and the Ugly

Dark patterns describe web design features that trick users into taking actions. They are the gimmicks that trick users into opting into services, annoy them with pop-ups, and shame users into taking action.

Dark patterns are completely unethical, but some companies continue to use them to manipulate user bases. Any business interested in long term sustainability and successful reputation management will run hard and fast away from any company or designer that encourages tricky design elements.

The Most Commonly Used Dark Patterns

The definition of a dark pattern boils the concept down into a neat package. In practice, the imagination is the only thing limiting the number of dark pattern tactics used. Most safe and well-known websites do not use dark patterns. They may display in-your-face marketing messages and advertisements, but they will not try to unethically deceive you into taking action.

Dark patterns are only those checkboxes, phrases, and iframes that will make average users take an unintended action without realizing it. Some of the most common dark patterns used include:

1. Add-ons automatically placed into an eCommerce shopping cart

Amazon may recommend a complementary product to add to your shopping cart upon checkout, but the company will never automatically fill your cart without your permission. Other, less reputable, organizations may try to add an unobtrusive item to your cart hoping that you won’t notice.

Some customers who don’t scrutinize a shopping cart before placing an order may never realize the item was not part of the original purchase. Others may not pursue action because the cost of returning the item may outweigh the convenience of taking the loss.

Automatically adding an item to your cart.

2. Convoluted opt-in/opt-out processes

Some forms, purchases, and other actions will automatically sign users up for continued messaging. The opt-out process, however, is where companies take shady steps to keep subscribers. Some companies will force users to check individual boxes for specific types of content while others will add in filler language to keep the process even more confusing.

While all businesses are subject to the CAN-SPAM act and must legally unsubscribe users who request an opt-out, many let these unsubscribe and opt-out requests sit unaddressed in an email folder that nobody checks. In other words, a user could do everything right to opt-out of messaging and still receive unwanted content.

3. Confusing Wording

App and website users are so comfortable with certain drop down menus and generic forms they often skim through instead of thoroughly reading them. Some companies try to take advantage of the average user’s reading patterns. They will use common cues and patterns used online and interject something that could trick you into opting into an added service or making a purchase.

Wily wordsmiths may even use careful phrasing to make the customer feel glad he or she took an unwanted action. Unclear, confusing, and deliberately deceptive wording can trick users into many different types of online interactions.

4. Forced continuity

Free trials aren’t usually as free as they first appear. While some sites only want your name and email, others need a card on file to start your trial. If you do not take an action to cancel the service in a predetermined period, the company will automatically bill you.

Dark pattern enthusiasts can force users into continuity in a couple of unethical ways. They may make the cancellation process difficult and confusing or fail to remind the user of the free trial expiration date.

5. Hidden gated quizzes and questionnaires

While one of the least-offensive types of dark patterns, hidden gated materials can waste minutes or hours of a user’s time. A website may offer a “free” questionnaire or quiz and lead users right into the questions on the landing page.

When the user hits “submit” at the end of the series, the site asks the user to input information to see results. Some may only require a name and email, but others will charge users a fee to see the results of a career, personality, or health quiz.

6. Misdirection

Commonly used on mobile apps, misdirection takes advantage of a user’s tendency to associate certain visual cues with safe actions. For instance, a green or blue button typically initiates gameplay on gaming apps.

Advertisers may place popups within the game that look similar to the gameplay start page to encourage users to hit the green button, which redirects the user to an advertiser’s content. Other advertisers will make the “X” so small or translucent that many users find themselves sitting through the commercial/cartoon/ad every time it appears.

Even Microsoft, a generally reputable company, was guilty of a dark pattern during the Windows 10 update. In creating a red update initiation button, the company tricked many people into downloading the unwanted update instead of closing the window.

These examples only represent a few of the overarching concepts behind dark patterns. New examples frequently arise, making the digital space a little more perilous for a trusting user.

The Case for Using Dark Patterns

While most digital designers see a clear line between ethical and unethical design patterns, others see the internet as a “users beware” space. Proponents of dark patterns do not feel obligated to hand-hold end users and will do what they think best to meet digital benchmarks.

For a time, dark patterns can and will work. People are accustomed to interacting with digital content in a specific way. Most users will fall for subtle changes in forms, and many will write off bad purchasing experiences without thinking twice. The problem with using dark patterns is that they do take advantage of a user’s trust and they are unsustainable.

The internet can bolster and tear down business reputations. As soon as enough customers experience something that doesn’t seem right, the comments and complaints on consumer advocacy sites, social media, and review sites start will begin to eat away at a brand’s reputation. Nobody wants to do business with a brand known for a poor user experience – intentional or not.

Today, the phrase “dark patterns” is no longer some abstract and unheard of term. Thanks to the advocacy of Harry Brignull – a UX designer, consultant, and the founder of darkpatterns.org – more people know about the subtle tricks and sly deceptions businesses use to meet their own ends.

Avoiding Dark Patterns for Customer Acquisition and Retention

Businesses interested in fast growth and sustainable business strategies can reach all of their goals without resorting to dark patterns. If businesses can balance metrics with authenticity and a sense of duty to the user, they can focus on value-added designs and creating a pleasurable user experience. Consider these tips to honestly acquire and keep customers:

  1. Keep language clear and concise. Digital users want answers to their most pressing questions. They want to know what you offer, why they need it, and why they should choose you. If you’re not making a clear proposition or offering value-based content, you could walk the line between shady design techniques and dark patterns. Intention largely separates poor design from unethical practices, but businesses should strive to avoid both at all costs.
  2. Use psychology, but don’t abuse it. People do follow patterns when they interact with content online. Designers can ethically use color, content organization, and navigational cues to organically encourage users to take certain action. When they use standardized practices and change up the routine, however, they can force users to take actions the user never wanted and cause frustration, anger, and resentment – none of which encourage repeat business.
  3. Follow the golden rule. Every designer and company that wants honest business and satisfied customers should follow the golden rule: to do for others what you would have them do for you. If you would feel slighted or misdirected, find an alternative approach. Every business can ethically compete for the market share and doing so will pay off.

From the landing page CTA to the details outlined in the terms and conditions, every word and prompt is an opportunity to serve your customers rather than take advantage of them.

In a time when search engines development places an increased duty of care on businesses, site owners may want to think twice about the content and interface design used. Dark pattern tactics may offer a short-term metrics boost, but they may not serve a brand well in the long run.

Source File:

10 WordPress Themes for Your Web Design Business

One of the sad ironies of being a busy web designer is that you make time for everyone’s website – except your own. So it stands to reason that many of us could use a little head start when developing our own business sites. Certainly, a WordPress theme can do just that.

While you may be thinking, “I’m a designer, I don’t need to use a theme…” try to think of this in a different light. A theme can be a great launching point for your site building process. Find one that has features that will make your life easier – and then customize it to suit your specific needs.

So, while all the themes in this collection will look great with a default setup, they also offer you the power to add your own mark. You’ll be able to change various settings through the WordPress Customizer or through a bundled page builder. If you want to take things even further, create a child theme and make changes to both templates and CSS.

Let’s take a look at 10 WordPress themes that may just be the right fit for your web design business:

Smoothly

Smoothly is a portfolio-style theme that includes six unique concepts. The looks are all quite stylish with features like video backgrounds and on-scroll animations. There is lots of functionality via a vast collection of bundled plugins – including several exclusives.

The bundle covers things like Google Maps, social sharing, filterable post grids, along with ways to display your portfolio and team members. Visual Composer is added for easy page layout creation. You’ll also find an included child theme to allow for advanced customizations.

Smoothly WordPress Theme

Hoper

Hoper provides a simple and attractive theme that can serve as a vehicle for your online portfolio. Use it as either a single-page or multi-page site.

Based on Bootstrap, the theme can be customized through the Redux framework and the Unyson page builder. A filterable portfolio is included to display your work in style. The overall look and functionality are exquisite.

Hoper WordPress Theme

Minify

As the name may suggest, Minify is a minimally-styled WordPress theme. The result is a look that makes content quite easy to digest. It utilizes Bootstrap, which provides both a solid foundation and an opportunity for customization.

There are a variety of home page, header, portfolio and blog layouts to choose from. Under the hood, you’ll find well-commented code to help guide you in making tweaks. Visual Composer is also included.

Minify WordPress Theme

Ana

Ana is a cool and modern theme aimed at creative professionals and agencies. It sports multiple demo site variants, six home page layouts, two types of navigation and six single portfolio styles. The included AJAX page transitions provide a unique way to keep visitors engaged.

There are lots of settings available to tweak in the WordPress Customizer. The package includes a copy of Visual Composer.

Ana WordPress Theme

Mochito

Mochito is a slick, one-page theme that utilizes AJAX for smooth scrolling and some excellent animation. You’ll find a hero image area that can display as a standard rectangle or take on a variety of attention-getting shapes.

Or, take it full-height to really wow your visitors. You’ll also find a copy of Visual Composer, custom Shortcodes, multiple page templates and Google Maps integration.

Mochito WordPress Theme

Eurybia

Your business is different, and so is Eurybia. It’s clean, but with a side of dark and disturbed mixed in for good measure.

There are some nice touches added in, like multi-column mega menus, smooth scrolling, lots of grid styles and some really attractive WooCommerce product layouts. It uses the Redux framework and a copy of the ubiquitous Visual Composer is bundled in.

Eurybia WordPress Theme

Minimus

If you really want your work to be front and center, check out Minimus. While the theme includes four demo home pages, the full-width “Portfolio Showcase” is a great choice for designers who want their portfolio to do all the talking.

Bundled plugins include Essential Grid, Slider Revolution and Visual Composer. Also check out the variety of menu styles, custom Shortcodes and parallax scrolling.

Minimus WordPress Theme

Gravity

Gravity aims to focus on typography, usability and UX. From the looks of things, they hit the mark. The layouts are pixel perfect and text is very easy to read.

The smooth scrolling animations make for an elegant experience. Included are copies of the Slider Revolution and Visual Composer plugins, along with an advanced portfolio system.

Gravity WordPress Theme

Dieter

Show off your artistic side with Dieter. It includes several customizable layout options, various headers and a mega menu. The theme can be used for landing pages or full-blown multi-page websites. There are a large collection of custom Shortcodes for adding design and functionality features.

Overall, the design’s use of whitespace and color bring a very modern and appealing look. Copies of Slider Revolution and Visual Composer plugins are included.

Dieter WordPress Theme

Horizon

Horizon features a horizontal slider/portfolio that will certainly get a users’ attention. With large, muted photos and bold typography, you’re sure to get your message across.

Also included are some lovely page transitions, multiple blog layouts (including a really nice masonry grid) and optimization for touch-enabled devices. Quite a unique theme compared to the usual portfolio fare.

Horizon WordPress Theme

Show Your Design Business Some Love

While finding the time to take care of your own website may be difficult, it’s vitally important. The types of design work clients look for changes with the times. You certainly don’t want them looking at an outdated site.

The themes showcased above will give you the opportunity to start fresh while saving you some time. Your business will be better for it.

Source File:

10 Beautifully Designed Examples of Split Screen Layouts in Web Design

Split screen layouts break the oldest and most critical UI design rule of all by giving equal importance to two primary areas of a site. It’s common practice to give each element of a site a priority level in relation to the structure of the design, yet split screen layouts completely ignore those rules.

And strangely, it works.

With a split-screen, you can give prominence to both elements and enable the user to choose between them. You can quickly convey dual importance. For example, if you want to communicate to your visitors that your core strengths are both your digital products as well as your talented staff, you can place one on the left side, and the other on the right side.

On your portfolio website you can position the identity of your brand on the left, and a list of the sites you have built on the right. If you are designing a restaurant or coffee shop website, you can use one side to feature some company or contact information while showcasing photos of customers enjoying the locales on the other side.

Split screens provide lots of ease to users, especially if they are potential customers. Thanks to the reduced clutter and the more streamlined appearance of split screen layouts, users will spend less time trying to find the information they are looking for.

Below you will find a selection of beautifully designed websites that have successfully implemented split screen layouts.

Hello Monday

Hello Monday split screen web design layout

Thalida

Thalida split screen web design layout

Studio Meta

Studio Meta split screen web design layout

F L P L N Y

F L P L N Y split screen web design layout

Primal

Primal split screen web design layout

Matthew Hall

Matthew Hall split screen web design layout

Studio Meta

Studio Meta split screen web design layout

Ocean Resort Residences

Ocean Resort Residences split screen web design layout

EngineThemes

EngineThemes split screen web design layout

Roman Kirichik

Roman Kirichik split screen web design layout

Huncwot

Huncwot split screen web design layout

Angel Martínez

Finished!

In contrast to many other layout types, a split-screen layout design gives a website an edgy look – big and bold, yet oozing with simplicity and power.

However, you have to exercise lots of caution when working on a split screen website. If you are not careful, your overall design may look like a cheesy before and after photo, and nobody wants that.

Source File:

Better, Faster, Stronger WordPress Hosting with Kinsta

Web developers and designers unfortunately don’t have the kind of job where they can remain effective or efficient in the face of continual disruptions. These jobs are also so highly specialized that, while it’s great to have a basic understanding of how other things work, it doesn’t make that much sense to be a Jack-of-all-trades.

As a WordPress developer or designer, you know there are certain things you absolutely need in order to properly manage the backend of your site. Regular backups, security, a reliable and fast network – these you can’t compromise on. But managing them takes time away from everything else you do, including trying to run and scale your business.

While you could hire another developer or implementer to help with this aspect of your work, why not outsource to a reliable third party? Better yet, why not consolidate your need for managed WordPress services with your web hosting plan? This will ensure that everything server-side remains in the hands of one provider.

Kinsta’s managed WordPress hosting services would be the perfect solution for the designer/developer who wants to spend less time worrying about what’s affecting their site’s performance on the backend and more time on the work that’s going to make them money.

Kinsta managed WordPress hosting services featured

Managed WordPress Hosting from Kinsta

Hunting around for the right hosting plan can be tedious. You know what you need, but you also don’t want to get stuck in a plan that limits what your site can do. When you need a high-performing platform to power your high-performing website, working with a provider like Kinsta is sure to give you the results you seek.

So, what exactly do you get from Kinsta’s web hosting plans?

For starters, you don’t have to sift through a variety of plan types. All of Kinsta’s managed hosting plans run on the Google Cloud Platform and come jam-packed with the essentials (and much more).

There are four business plans, ranging from $100 to $400 a month, and four enterprise plans, ranging from $600 to $1,500 a month. The price is based on how many websites you host and the amount of bandwidth utilized on their servers.

Here are some of the core features you should be aware of:

Unlimited Visitors

Because your site is hosted on a cloud platform, you don’t need to worry about caps on site traffic. Kinsta’s plans are differentiated by three factors:

  1. Number of websites hosted on the plan
  2. SSD storage
  3. Server bandwidth

Next-Gen Technology

Even for sites that are brand new, there’s always that fear that a traffic spike or security breach could take down your site and you’d be left having to start all over again.

However, Kinsta relies on top-of-the-line technology to power their hardware, software, and infrastructure, in turn ensuring that your site’s performance remains unaffected regardless of what happens outside it.

  • Server hardware comes from Google Cloud Platform.
  • Software is powered by LXD which keeps every website securely isolated in its own container.
  • PHP 7, Nginx, Ubuntu, and MariaDB to keep everything running fast.

Kinsta next generation infrastructure

Low Latency Infrastructure

Kinsta’s data centers are located around the globe to ensure low latency for their customers’ websites. In addition, they’ve given customers even more control over latency by providing premium DNS services via Amazon Route 53 with every plan. DNS records can easily be managed from the Kinsta admin dashboard.

Top-of-the-line Security

Considering Kinsta works with the Google Cloud Platform, it should come as no surprise that security is of the utmost importance. Each plan includes:

  • Uptime checks every minute of every day
  • Automated daily backups
  • Free SSL certificate
  • DDoS monitoring
  • Hardware firewall

In addition to offering such hardened security features, Kinsta offers to fix customers’ websites for free in the unlikely event that they are hacked.

Kinsta Security

24/7 Dedicated Support

As a managed hosting company, Kinsta’s plans come with 24/7 monitoring of customers’ websites.

They also offer support from their team of WordPress experts who can assist with issues, provide advice, and who also handle website migrations for free.

Kinsta Dedicated Support and Free Migrations

Managed WordPress Hosting Made for Developers

By far one of the biggest selling points in choosing Kinsta to host your website, or network of websites, is their commitment to providing a developer-friendly platform.

Seeing as how the majority of people behind their company come from a web development background, it makes sense they’d want to create a managed hosting solution that would work for an audience they understand.

Here are some of the developer-specific features of their web hosting plans:

Admin Dashboard

You can do everything from this dashboard, including:

  • Add a new site to your network of sites
  • Launch a staging site for testing purposes
  • Clone a site
  • Do a deep-dive into your site’s analytics
  • Contact Kinsta support for questions and help

Kinsta dashboard

One-Click Site Management

You want to be thorough in your work, but you also don’t want to spend time recreating the wheel. Kinsta has a number of developer features that enable you to clone websites, set up staging environments, and more with just a single click.

Instant SSL Certificates

Kinsta provides free Let’s Encrypt certificates which can easily be deployed from the dashboard. This allows you to migrate your WordPress site to HTTPS and take advantage of performance improvements such as HTTP/2, which is enabled on all Kinsta servers. Developers can also upload custom SSL certificates.

Web Development Tools

Finally, we come to the part that every web developer wants to see: the tools integrated into Kinsta meant specifically for them.

  • PHP: You have a choice of which version of PHP you want to use, including 5.6, 7, 7.1, and HHVM. Kinsta also comes with Composer.
  • WP-CLI: Command line tools you can use so you don’t have to work directly within WordPress.
  • Git: Integration with this version control system to automate and improve your workflow.

Wrapping Up

If your goal is to keep a laser-like focus on your workload and your business, then you can’t afford to let sub-par web hosting and the day-to-day hassle of managing the backend of your site get in the way of that.

With WordPress as your content management system of choice, then you know that there’s a multitude of support and complementary solutions available specifically for this platform – and Kinsta appears to be the clear choice when it comes to managed WordPress hosting.

For those of you interested in Kinsta’s managed WordPress hosting, just mention 1stWebDesigner within the next 30 days, and you will get the added bonus of 50% off your first month!

Source File:

10 Free Wireframe Kits To Speed Up Your Design Workflow

The wireframing process is crucial to every new UI project. Before you get into the colors and typography you have to consider the user experience first. And this all starts with great wireframing.

Many designers prefer working on paper, but wireframing kits let you work digitally too. I’ve curated the best wireframing UI kits on the web that you can download for free and reuse for all mobile and web interface projects.

Jolly UI

jolly ui

The Jolly UI kit offers both a free and premium resource for designers. It’s the best hand-drawn wireframing kit you’ll find with an extensive collection of navigation menus, sliders, buttons, and common page elements.

If you just need something basic to get you started then grab the free version. It comes in both PSD and AI formats and all the elements are full vectors.

Basic Wireframe Kit

dark wireframe kit

Wireframing should be a very simple process. Black and white works best and that’s why this Basic Wireframe Kit is a great choice for Sketch users.

All the elements are rigidly designed, and they blend nicely into any type and style of website. It’s also one of the simpler UI kits for Sketch, so it’s a must-have resource for anyone moving away from Adobe software.

Teracy

teracy uikit

For a more complete collection of Sketch elements take a look at the Teracy Wireframe Kit.

This completely free Sketch asset offers dozens of common UI elements including dropdowns, input fields, breadcrumbs, and slideshow widgets. Teracy focuses more on website elements, but it also has plenty of mobile app elements too.

Blue Wireframes

blue ui wireframes

Some designers look at wireframes as blueprints for the entire project. That’s why this blue wireframing kit is a great choice both for aesthetics and practicality.

It’s another Sketch UI kit, and it’s free to use for all projects. The unique design of each element brings some pizzazz into your wireframing. And since all of the elements are vectors you can resize them with no quality loss.

Savvy Sketch iOS Wireframe Kit

savvy wireframing kit

Mobile apps need to be wireframed just like websites and the Savvy Sketch iOS Kit is perfect for iPhone app designers.

This UI kit is frequently updated with new features, with the latest release focusing on iOS 10. It’s completely free to use, and this UI kit is accurate which makes it easy to convert wireframes into full applications.

Basiliq

basiliq wireframe kit

Wireframing is popularly done on paper but it can be easier when done digitally. That’s why UI kits like Basiliq bring the best of both worlds.

You get a fully digital UI kit for Photoshop where all the elements look like sketched-out items on paper.

This kit works best with website mockups so if you’re building a website in Photoshop consider grabbing a copy of this kit before getting into the details.

Responsive Wireframes

wireframing design lofi

What I like most about these wireframe elements is their simplicity. True low-fidelity wireframes show you how the UI should look & behave without giving any specifics.

The PSD file is available for free on Dropbox. It’s a fun wireframing kit for any project and it relies on very simple shapes for common page elements.

BeTheme Free UI Kit

betheme ui kit

BeTheme is a full-scale premium WordPress theme created by a team called MuffinGroup. But they released a free wireframing kit called BeTheme UI which is just as valuable to designers.

This is a high-fidelity kit that uses blue throughout. Still an excellent choice because of the sheer volume of items you get in the pack.

The Ultimate Wireframe UI Kit

ultimate wireframing kit

MediaLoot offers a bunch of premium items but they do have one freebie called The Ultimate Wireframe UI Kit.

Technically there is a premium license which has a no attribution clause for commercial use. However, most designers can get by using the free pack since it contains the same elements.

And based on the massive file size of this PSD, I think it deserves to be called the “ultimate” wireframing kit.

App Mockup UI

app mockup ui kit

Another freebie resource from a premium site is this app wireframing kit from Pixeden. Each screen comes in the size of a typical iPhone where you can rearrange the page elements at will.

Each item is a vector shape, super easy to resize and restyle.

If you’re designing for the iPhone or any iOS device, there’s no better resource to start with—especially if you like starting with low-fidelity wireframes.

Bootflat UI Kit

bootflat ui it

Named after the famous Bootstrap framework is this free Bootflat UI kit. It comes in one large PSD file and offers dozens of common website elements you can reuse over and over again.

Bootflat is colorful, well-designed, and intricate with many dynamic elements like dropdowns and pricing tables. This works well in both wireframing and final mockup designs. You might even pair this with another PSD wireframing kit to use this as the final high-fidelity mockup later in the design process.

But whether you’re a Photoshop lover, Illustrator user, or Sketch enthusiast, there’s a wireframing kit here for everyone.

Source File:

10 Tips for Creating & Promoting Your Brand with Video Content

Whether you’re just getting started with website videos or you think you’re a veteran, there is always something you can learn. Web design and content marketing trends shift on a dime – and your business must be aware of the changes on the horizon.

It’s vital to connect with your audience in meaningful ways, and video content offers a fantastic medium for doing just that.

Videos on your website have proven results in terms of leads and conversion rates. YouTube reports mobile video consumption increasing by 100% every year, and analysts predict video will comprise 80% of all web traffic by 2019. Companies are already seizing this immense opportunity, and video ads now account for roughly 35% of all online ad spending.

Perhaps the most compelling statistic to encourage you to explore video content for your own brand is that an entire third of the time people spend online is spent consuming video content. If you haven’t considered what video content can do for your brand, you’re missing this third of internet traffic.

If you want to implement video content or improve your website’s existing video content, consider the following tips for marketing video content more effectively.

1. Assess Your Current Content Marketing Strategy

Modern marketing professionals understand the need to constantly benchmark their campaigns’ progress, assess the returns on their various marketing investments, and measure engagement among their audiences. If you want to improve your site’s video content or wonder what kind of video content would work well for your brand, start by assessing your current content marketing strategy. Figure out what works, what doesn’t work, and what may work better with some adjustment.

Once you assess your current situation, expect opportunities for improvement to crop up throughout your marketing campaign. Take the time to explore video content related to your industry or niche and see what your target consumers seem to enjoy, and then start brainstorming ways to generate compelling, engaging video content of your own.

2. Make Your Content More Interesting

Video provides the perfect opportunity to recycle popular pieces of content and augment existing content in various ways. For example, did you have a blog post last year that was particularly popular? Did a social media post go viral? Think of the marketing success you’ve seen recently and see whether any specific pieces of content jump out at you. Consider repurposing older content into new, engaging video content that will delight your audience.

video production

Consider live events as well. The Periscope app for Twitter and Facebook Live has proven very successful to various marketing campaigns. Live events encourage your target audience to quickly find you and engage with you, and they are far more likely to share these events on social media. Even after the event concludes, you can use the recording on your site or your company’s YouTube channel.

3. Encourage Sharing

Live events lead to the next tip, which is to make your video content shareable. Social media may be the most powerful marketing tool since the invention of the World Wide Web, and it is foolish to discount or undervalue the impact social media has on modern life. Maintaining a social media presence for a business can be difficult.

You need to determine which platforms and networks your customers prefer and focus your attention there. While it may be tempting and even seem logical to create profiles for your company on every social media outlet, casting a wide net like this is far more trouble than it’s worth.

Additionally, your audience will more than likely prefer one or two outlets. Younger crowds will typically appreciate Twitter and Instagram, whereas older audiences tend to prefer Facebook and LinkedIn for the professional end of things.

social sharing

Once you’ve committed to a social media platform, fill your page with compelling content. Video is incredibly shareable, and your target consumers can enjoy video content while working or performing other daily tasks, making it a great opportunity for you to engage with your audience on a consistent basis.

Videos typically go viral faster than any other type of content, so don’t forget this when generating video content for your audience. A fantastic video could quickly spread across social media and provide an incredible boost to your brand recognition and conversion rates. However, a gaffe or poorly timed video could be fruitless or, worse, endanger your brand’s reputation.

4. Stay in Touch with News

Some of the best video content campaigns are in touch with the times and popular culture. For example, the Arby’s marketing team regularly releases short stop-motion videos of its food and branded paper products. In these shorts, an artist uses Arby’s bags and boxes (and sometimes condiments) to create portrayals of scenes and characters from new movie and video game releases.

These clips delight younger audiences, and if you browse Arby’s social media profiles, you’ll more than likely see quite a few comments from consumers saying things like, “I’m buying Arby’s today just because of this ad.”

5. Know Your Audience

Arby’s video marketing tactics are successful, because it knows it younger audience members and their interests. The company found a way to capitalize on this using a few bits of paper and cardboard and a video camera. That is an incredible return on investment for a large company, and its content reaches droves of fans.

6. Be Authentic

Modern audiences and consumers are very discerning and wary. The average person on the internet has learned to ignore things like banner and sidebar ads automatically unless they’re immediately recognizable and valuable.

Strive for authenticity in your video content. You might consider doing a tour of your company grounds or a behind-the-scenes look at some of your processes. You may also want to livestream company events or find other ways to incorporate video content into the other ways you engage with your audience.

video editing

Your consumers will appreciate seeing the more human side of a brand and can sniff out dishonest marketing easily. Authenticity and honesty are the keys to generating interest and enthusiasm around your brand.

7. Generate Brand Awareness

Two of the biggest benefits of video content are its shareable nature and the higher-than-average propensity for going viral and reaching hundreds of thousands – if not millions – of people. To have a compelling effect, create video content that generates excitement and enthusiasm around your brand.

Instead of encouraging your consumers to share your content simply by asking them to do so, make them want to share your content by creating fun and valuable videos.

8. Reap the SEO Benefits

Search engine optimization (SEO) is a mainstay of modern marketing. Marketers are always tweaking their sites’ keywords, keyword density, content refreshes, link history, and various other elements to achieve the most positive SEO results possible. On the flipside, search engines Bing and Google are constantly adjusting their algorithms to keep the playing field as level as possible for everyone.

youtube mobile app

Video content is valuable, and there is so much video traffic that search engines now incentivize companies to feature videos on their websites for better SEO. You may want to invest in a video hosting provider or simply embed videos form your company’s YouTube channel.

9. Multi-Device Engagement

One of the best aspects of video content is that consumers can enjoy it on various devices. Mobile devices have finally overtaken desktop computers and comprise the lion’s share of internet traffic, so make sure your video content responds beautifully across devices.

10. Stick to Short and Sweet

Creating effective video content doesn’t have to be a large-scale production. Some of the most successful video marketing campaigns didn’t cost any more than the time it took to record them. When creating video content for your brand, keep things short and simple. A curious consumer is far more likely to watch a two-minute video than a 10-minute one, so get your point across quickly and effectively, and don’t rely too heavily on pageantry.

Ultimately, every brand will have different opportunities and face different challenges in the effort to create effective video content. These tips are just to get you started thinking about ways to create or improve video content.

Your biggest opportunities lie in your existing content strategy, how well you know your audience, and your business goals. Approach video content with a clear goal in mind and filming will be much easier than you may expect.

Source File:

Seriously Bright & Colorful Website Designs

With tens of thousands of websites launching online every day, the need to stand out has never been more important.

From a visual standpoint, web designers have most recently been enhancing their website designs through the use of bright colors and graphics.

It is important that this is done carefully and with precision, since the use of bright colors can pose some potential issues, namely with contrast and garish colors which can be unpleasurable to look at.

Below, I have rounded up some of the very best bright and colorful website designs on the web today.

Mailcube

Mailcube integrates a vibrant header background with beautiful, minimal typography and product screenshots.

Seriously Bright Colorful Website Designs

TedXPortland

TedXPortland truly pushes the boundaries of bright color usage in web design. The visually impressive gradients contain only a small chunk of text to compensate for any potential readability issues.

Seriously Bright Colorful Website Designs

Work&Co

Work&Co uses a bold red with a highly effective combination of black and white serif text. The large type adds emphasis and contributes heavily to the fantastic web design.

Seriously Bright Colorful Website Designs

Baianat

Baianat combines a bold header background with some unique and colorful perspective icon designs. The result is bold, but not overly in-your-face. The white provides some relief from the bright hero section.

Seriously Bright Colorful Website Designs

aparto

Aparto uses some incredibly bold graphics and harsh colors in contrast against similarly bold typography. The graphics are eye-catching and stand out. The result is on-brand, exciting, and calls for the user’s attention.

Seriously Bright Colorful Website Designs

Stripe Connect

A more muted and considered example, Stripe uses less vibrant color schemes but nonetheless effectively incorporates an abundance of bright color via angled backgrounds and graphics, to iconography and typography.

Seriously Bright Colorful Website Designs

MADEO

MADEO is extremely minimal in its use of bright color, opting for a primary red with hints of vibrant green. The abundance of spacing and minimal typographic elements in the design, make it ever more effective and visually appealing.

Seriously Bright Colorful Website Designs

Burrow

Lastly, Burrow is a prime example of how to effectively incorporate product imagery alongside a bright color. It draws a great deal of attention to the brand and product, and sparks positive emotions and sunny imagery through their choice of yellow as the primary color.

Seriously Bright Colorful Website Designs

What do you think about bright colors in web design? Share your opinions below!

Source File:

Are You Having Trouble Finding the Perfect Font?

It’s always nice to have ready access to a multiplicity of different fonts. But, if you’re limited to manual searches, finding the one(s) you want can take up quite a bit of your time. As a busy web designer, you most likely have many other things you need to get done.

Fortunately, there are tools that can help you in your search to identify a font you would like to use, but you don’t know its name. There is a tool that’s easy to use, and it’s free and yours to use for the asking.

Suppose, for instance, you’ve come across the following font. You’d like to use it in your present project, but you don’t even know its name, or where to look for it, so you can download it.

“Mike Smith” does have a few recognizable characteristics, but what good does that do you? This is where a good software tool comes into play, and WhatFontis.com has a software search tool that you can use free of charge.

What Steps Are Involved in Using the WhatFontis.Com Search Tool?

Follow these 3 simple steps, and let the WhatFontis.com search tool take care of the heavy lifting.

Step 1 – Register and Sign In

Bring the WhatFontis.com website up on your browser. To register for the free service, you’ll need to fill in your email address, confirm that you’re not a robot, and click the REGISTER button. You should then receive an email to confirm.

Now, it’s simply a matter of creating your username and password. You’ll also be asked to enter your website’s URL. You can leave it blank if you don’t have a website. It’s not a required field.

When you sign in, the Homepage will pop up on your screen, and you’re good to go!

Now it’s time to make your first search request.

Step 2 – Upload the File with the Font Image You’re Looking For

If you’ve captured the font you’re interested in an image file, upload it. Alternatively, you can upload a screenshot, or submit the URL of the site where you observed the font.

There are a few rules that need to be followed; but they aren’t complicated.

You need submit at least one line of horizontal text. JPG, GIF, and PNG are the accepted file formats. You can only submit Latin letters, and they must not be touching.

WhatFontis.com provides both good and bad examples of submittals; plus, their FAQ page could also be of some help.

Don’t expect to get an exact font identification 100% of the time. Some custom fonts can be difficult to identify, as can most unique fonts.

If you don’t get a perfect match, you’ll still get a number of examples that are quite similar.

Step 3 – Look at the Results of the Search, Pick out the Best Match, and You’re Done!

Another approach is to post a message that includes an image of the font you’re looking for on the WhatFontis.com’s forum. Many of the forum members, especially the heavy users, are good at identifying fonts; and they are more than willing to lend you a helping hand.

Use the WhatFontis Browser Extension

You can also download and use the WhatFontis.com browser extension for Chrome. When you go to the browser extension site, you’ll also find an add-on for Firefox browser users. Make sure you click on the Chrome Extension “F” button, since there are downloads for other, unrelated, services on the page. Typically, the number of extensions you use should be kept low to enjoy their full benefits. Fortunately, Chrome is more tolerant of multiple extensions that most browsers.

What WhatFontis.com’s Premium Version Offers.

For occasional users, the free search version is generally sufficient. The premium version is for heavy users, which is defined as those who wish to conduct more than 5 searches per day, or post on the forum more than once per day.

The premium service is quite affordable at $2.99 per month, or $29.90 for an annual subscription. The number of searches you can conduct daily is unlimited, as is the number of daily forum posts you can make. An added benefit is that you can input up to 15 characters, instead of a maximum of 10 with the free account.

A Nice Solution to a Sometimes-Bothersome Problem

It’s hard to locate something when you don’t know its name. You can always use an analytics tool to help in in your search, if you want to take the time to figure out how to use it, and if you’ve nothing else to do. It makes more sense to let a highly-effective software search tool do the work for you.

The WhatFontis.com search capability will save you ton of time, whether you use it to conduct a search a few times a month, or several hundred times a day.

It belongs in your web design toolkit.

Source File: