"> Web Design Archives - Engr Kabir Saleh

Category

Web Design

Is the F-pattern Still Relevant?

It’s always good to have a set of guidelines to follow when designing a website — especially if you have little to no user data to go on.

Over the years, we’ve been introduced to tons of these guidelines and design trends; some of which have fallen out of favor while others have persisted over the years. One of those web design guidelines that’s persisted is the F-pattern.

But is it still relevant today, what with mobile-first design practices?

 

What Is The F-Pattern?

When we refer to patterns like the F-pattern, Gutenberg layout, or layer-cake pattern in web design, what we’re talking about is how readers scan the content on a page. And thanks to heat mapping technology and research from organizations like Nielsen Norman Group (going back to 2006), we have proof of its existence.

NNG Eye-tracking Study F-pattern

As you can see from these eye-tracking studies from NNG, the F-pattern isn’t always an explicit “F” shape.

Instead, it refers to a general reading pattern whereby certain parts of the page are read in full — usually at the top and somewhere in the middle. In some cases, readers may stop to peruse additional sections of the page, making the pattern look more like the letter “E”. The rest of the page, for the most part, gets lightly scanned along the left-hand margin.

This principle actually applies to both desktop and mobile screens.

Although mobile devices have a smaller horizontal space, readers still have a tendency to focus on the top section, scan down the page a bit, read a bit more, and then scan down to the end. Again, it won’t look like a traditional “F” shape, but the concept is the same.

 

Is the F-pattern Still Relevant?

Essentially, this is the message the F-pattern has taught web designers and copywriters: “No one’s going to look at everything you’ve done, so just put the good stuff at the top.”

It seems like a pessimistic way to approach web design, doesn’t it?

The fact of the matter is, it is a pessimistic approach. At the time it was devised, however, we didn’t know any better. We were looking at the data and thinking, “Okay, this is how our users behave. We must create websites to suit that behavior.”

But the best web designers don’t just kick back and let visitors take the reins. They take control of the experience from start to finish, so that visitors don’t have to figure out where to go or what to do next. Designers carefully craft a design and lay out content in a way that draws visitors into a website and takes them on a journey.

When NNG revisited its report on the F-shaped pattern in 2017, this is the conclusion it came to:

“When writers and designers have not taken any steps to direct the user to the most relevant, interesting, or helpful information, users will then find their own path. In the absence of any signals to guide the eye, they will choose the path of minimum effort and will spend most of their fixations close to where they start reading (which is usually the top left most word on a page of text).”

Basically, our visitors are only resort to reading a page using the F-pattern when we’ve provided a subpar experience.

So, to answer the question above: No, the F-pattern isn’t still relevant.

 

What Should Web Designers Do Instead?

It’s important to recognize that visitors are bound to scan your website. Everyone’s so short on time and patience these days that it’s become a natural way of engaging with the web.

That said, there’s a difference between scanning a web page to see if it’s worth reading and scanning a web page simply to get it over and done with (which is essentially what the F-pattern encourages).

Knowing this, web designers should create pages that encourage scanning — to start, anyway. Pages that contain:

  • Short sentences and paragraphs;
  • Headers and subheaders to give a quick and informative tease of what’s to come;
  • Elements that create natural pauses, like bulletpoints, images, bolded text, hyperlinks, bountiful spacing, etc.

If you can keep visitors from encountering intimidating walls of text, they’ll be more likely to go from scanning the page to reading it… instead of scanning it and closing out the browser.

I’d also recommend not focusing so much on reading patterns. Unless you’re spending a lot of time designing text-heavy pages, they’re not going to apply as much.

Instead, focus on designing an experience that’s welcoming and encouraging, and makes it easy for your visitors to go from Point A to Point B. If you direct them to the most valuable bits of your website, they’ll follow you.

 

Featured image via Unsplash.



Source link

Exciting New Tools for Designers, December 2019

As you are shopping this month for others, why not find a few goodies for yourself? Our roundup of new tools and resources is packed with usable items. And most are free, so there’s no shame in trying out something for yourself. Here’s what’s new for designers this month.

 

CSS Background Generator

CSS Background Generator gives you the tools – and code – to create an interesting animated background for digital projects. Demo 1 uses a fun web design trend with circular blobs with adjustments for color, size, and speed. Once you get the background set up in a way that works for you, show the code and copy it to your projects. Thanks go to Vincent Will for making a tool that functional and easy to use.

 

CameraBag Pro

CameraBag Pro just reinvented itself with a new release and features, making it a robust choice for photo editing. The Mac app is packed with editing tools and intuitive adjustments and custom presets (this might be one of the best features since you can instantly preview each before applying it). The tool works for photos and videos with styles that work for both types of images and batch processing tools (watermarks, resizing, and cropping). This is a robust image editing tool that makes quick work of adjusting images. This is a premium app, but one of the least expensive photo/video editing tools out there.

 

CodersRank

CodersRank creates a 360-degree coder profile based on the public and private data you hold on various coding sites. It creates visual charts that you can use to show off your credentials to potential clients or employers (or figure out what you know in relation to others in the industry). The site also includes learning tools and a job board.

 

Advent of Code 2019

Advent of Code is a seasonally-appropriate Advent calendar of programming puzzles for a variety of skill sets and skill levels that can be solved in any programming language. Use them as a speed contest, interview prep, company training, university coursework, practice problems, or to challenge each other. There’s even a leaderboard to help you keep up with others.

 

Pantone Color of the Year: Classic Blue

Pantone’s Color of the Year for 2020 is 19-4052 Classic Blue. It’s a hue that’s probably a staple in many of your projects. Here’s how Pantone describes it: “Instilling calm, confidence, and connection, this enduring blue hue highlights our desire for a dependable and stable foundation on which to build as we cross the threshold into a new era.” This is one of the times that the color of the year has featured a color that is such a common one. The just released color guide includes swatches and tools in this classic color for 2020.

 

Wooof

Wooof is just for fun. Instead of spending time looking for cat videos in your downtime, you can spend it looking at the “internet’s biggest collection of open source dog pictures.” You can browse, save favorites and even look at the source code and API. Be prepared to get lost in this rabbit hole.

 

Realistic 3D Photo Cards

Realistic 3D Photo Cards is a pen by Jouan Marcel that uses hover effects and Vue.js to create cool cards that animate and move in a space with depth on hover. The motion is simple and realistic; you’ll want to fork it.

 

JetOctopus

JetOctopus is a tool to help you navigate technical SEO. It’s a SaaS crawler and log analyzer that helps you find website problems and prioritize solutions to improve your online presence.

 

The Svelte Handbook

The Svelte Handbook is a starting point for anyone who wants to learn about this newer web framework for building apps. Author Flavio Copes says: “The ideal reader of the book has zero knowledge of Svelte, has maybe used Vue or React, but is looking for something more, or a new approach to things.” And the guide is 100 percent free. So, get reading.

 

Universal Color Convertor

Universal Color Convertor is a Mac app that converts colors from HEX/RGB/HSL to other formats and code snippets (CSS, Swift, Java, C#, and Dart).

 

Slack Cleaner

Slack Cleaner can clean all the unused and space-eating files in your Slack account. It makes it easy to find and delete unwanted files with bulk delete functionality.

 

Terms and Conditions Generator

Terms and Conditions Generator helps create a professional and customized document that’s been designed by an international legal team. It works in eight languages and includes more than 100 clauses to work with.

 

CSS Scan

CSS Scan is a browser extension that lets you copy the CSS of an element on any website. It’s taking website inspection to the next level and works on pretty much any website, regardless of what it’s built on. The best part is that it even works with animation code by visualizing keyframe CSS without having to search through source code.

 

Botfront

Botfront is an open-source tool to build chatbots on top of the Rasa library. Design and implement conversations with a single step. You can run it on your laptop or servers. Plus, there’s plenty of documentation to guide you along.

botfront

 

StackShare API

StackShare API, a tool to get insight into the backend technologies a company uses, is still in beta and has a lot of potential application. (API scraping tools seem to be growing in popularity by the day.) Use it to build better custom profiles, generate leads, and learn about industry trends.

 

Webiny

Webiny is a serverless app form builder that works for creating simple and complex forms. Use it to create custom forms and validators, track revisions to forms, use the integrated ReCAPTCHA, integrate other apps, and manage submissions. Plus, everything works in an easy drag and drop interface.

 

Kampsite

Kampsite helps you get feedback from customers and website owners so you can make adjustments that they want with your product or design. Once a log starts, it’s easy to share ideas, upvote popular requests, and engage with users. The tool installs with just a couple of clicks and can help you create beter web experiences.

 

GooFonts

GooFonts is a tool that tags Google fonts for easy search using keywords, variants, and subsets. What’s cool about this project is that it can take some of the hassle out of finding the right Google Fonts in a quick and easy way. It just takes a couple clicks to return results that have the look you want with examples.

 

Reborn Display

Reborn Display is a vibrant handwriting style display typeface. The style is readable and just a little bit funky. It includes upper- and lowercase letters and ligatures.

 

Snowballs

Snowballs is perfect for a December roundup with a holiday theme. Each character includes snowflakes around the design and fun swashes and tails for end letters. It includes upper-and lowercase letters and numbers.

 

Snow Kei

Snow Kei is another winter-themed typeface with snowflakes in the letter shapes. It is a fun option for holiday-themed projects. The display font includes 156 characters.



Source link

Popular design news of the week: December 2, 2019 – December 8, 2019

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers. 

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.

 

11 Web Accessibility Myths Debunked

 

Pay Attention to these Web Design Trends for 2020

 

Google Fonts by Tags

 

Understanding the Golden Ratio in Design

 

10 Rules of Dashboard Design

 

2019 Design Tools Survey

 

Welcome to XD Ideas – Where Designers Go to Grow

 

The State of UX in 2020

 

I Ditched Google for DuckDuckGo. Here’s Why You Should Too

 

Designing for Development

 

End of the Year Desktop Wallpapers (December Edition)

 

10 Things that Helped Me Improve as a UI Designer

 

How Sketching will Make You a Smarter Designer

 

Better Web List

 

Google Confirms Nov. 2019 Local Search Update

 

Runway Palette

 

Vladmir Putin is Extricating Russia from the World-wide-web

 

The Plain Text Project

 

Designers: 4 Must-Have Clauses in a Contract

 

The Power of Social Proofing

 

Pantone’s 2020 Color of the Year is the New Black

 

Spotify 2019 Wrapped

 

ApostropheCMS – An Open-Source Node.js CMS for the Enterprise

 

5 Bad Habits that Can Hurt your WordPress Website

 

Fluiditype for Simple Typography

 

Want more? No problem! Keep track of top design news from around the web with Webdesigner News.



Source link

Pantone Announces its Color of 2020

Each year, at this time, Pantone nominates a color — or colors, in the case of 2016 — to represent humanity’s hopes and aspirations for the coming year.

At least, that is what its PR department sends out. In reality, it’s a rather obvious — if highly effective — marketing gimmick to keep the print-design company relevant to design news year-on-year. It’s an arbitrary bit of self-promotion, that does an excellent job of reinforcing Pantone’s position as an authority on color.

This year, Pantone has selected Pantone 19-4052, or “Classic Blue” to give it its colloquial name. It’s described by Pantone as: “Instilling calm, confidence, and connection, this enduring blue hue highlights our desire for a dependable and stable foundation on which to build as we cross the threshold into a new era.”

pantone_classic_blue

Critically speaking, it’s one of the most mis-judged decisions in the short history of this promotion, and significantly mis-reads the zeitgeist.

At a time when the climate is approaching — or may have passed — irreversible breakdown; when global political debate is moving out of our institutions and onto the streets; when the baby-boomer generation is slowly losing its grip on the reins, and millennials are realizing they’ve reached middle-age; Classic Blue is a color that harks back to a time when we hid our head in the sand and pretended everything was fine. It’s the color of the pre-2008 crash, the color of Facebook pre-privacy scandal, the brand color of your parents’ bank. Classic Blue is about as 2020 as Helvetica.

(There’s only one color that effectively represents 2020, and that’s Cyberpunk Pink, a neon hue that is both retro and forward-looking, cross-cultural, irreverent, and even better in dark mode.)



Source link

9 Best Type Foundries That Aren’t Google Fonts

Google Fonts might be the de facto first choice of many web designers, but there are many more web font options out there if you know where to look.

To be clear, there’s nothing wrong with Google Fonts. In fact, there are tons of reasons to use Google Fonts in your projects: they’re free to use, licensing is simplified, and they generally load pretty quickly on the web.

But what if you want to shake things up and give other options a try?

You can! The only problem is that there’s a bunch of them, which can make finding the right typeface for your project a tedious chore if you don’t know which ones to focus on.

If you’d rather not get lost down this rabbit hold while researching typography for your next project, I’ve collected 9 of the best type foundries for web designers here.

The list of type foundries below could’ve been much longer. There are some font designers coming up with really cool-looking typefaces these days. That said, I want to make this worth your while as you have little time to waste as it is.

So, you can expect each of these foundries to have the following:

  • Filtering and sorting so you can quickly find the typefaces that matches what you need;
  • A bountiful set of type resources;
  • A modern selection of typefaces — this means they’re mostly minimally designed serifs and sans serifs. Outlined type as well as hand-lettered nostalgic type are also accounted for;
  • Multilingual-friendly typefaces;
  • Reasonable prices.

Let’s hop right in…

 

1. Colophon Foundry

Colophon -- one of the best type foundries

Colophon Foundry has been in operation since 2009, right around the launch of the WOFF file format and general acceptance of web fonts. Unlike older foundries that often draw on their history in typesetting, Colophon’s designs reflect its modern beginnings.

Highlights:

  • There’s an impressive and expansive portfolio of multilingual typography to leverage;
  • Fonts can be previewed as white-on-black, black-on-white (Dark Mode!) and sometimes in other color combinations;
  • You can use the Google Chrome extension to test Colophon fonts on your website before buying.

 

2. Dalton Maag

Dalton Maag

Dalton Maag is an international typography studio that makes it easy to test out its already cost-effective library of fonts before you buy.

Highlights:

  • It has a great selection of modern and clean typography designs;
  • Many fonts have case studies you can peruse to see real world uses for them (and get inspiration for your project);
  • Most typefaces work with more than one alphabet (e.g. Latin, Cyrillic, Greek) and you can quickly see a preview of those glyphs by scrolling through the font sliders.

 

3. Emigre Fonts

Emigre Fonts

Emigre, Inc. is an award-winning company that’s been around since 1984 and was originally a visual communication and design magazine. Emigre Fonts was later founded and has received numerous accolades along the way.

Highlights:

  • It has a reasonably-sized collection of stylish fonts (there are less than a hundred as of writing this);
  • Fonts can be filtered by family, style, and language making it much easier to narrow your search;
  • Examples of their fonts can be seen everywhere, from the Type Specimens page to Emigre Magazine back issues.

 

4. Fontfabric

Fontfabric

Founded in 2008, Fontfabric has developed custom fonts for big-name brands like Nike while making its extensive library of fonts readily available for designers who want a premade font.

Highlights:

  • While users have to pay for most fonts, there’s a great selection of free fonts (or font intros) to work with, too;
  • Many of the premium fonts allow you to review the full glyph map, test the font with custom text, and see a relevant case study;
  • Good option for web designers building sites and apps for readers of Cyrillic alphabets (e.g. Russian, Bulgarian, Kazakh).

 

5. The League of Moveable Type

The League of Moveable Type

The League of Moveable Type isn’t like other foundries on this list. While you can design with their fonts, the open source nature of the project also makes this website a great place to hone your own typography design skills.

Highlights:

  • All fonts are 100% free to use;
  • For typography designers in training, the open source fonts provide a great base for learning and practice;
  • It’s a small collection, but you’ll find a good mix of font styles to play with.

 

6. Lucas Fonts

LucasFonts

Even with a small collection of fonts, LucasFonts has made a huge impression on the design community. That’s because type designer Luc de Groot is responsible for well-known Microsoft font families Calibri and Consolas, along with his own Thesis collection of fonts.

Highlights:

  • Although there are a few decorative, hand-drawn fonts here and there, most of the collection is classic in design;
  • You’ll find a great selection of fonts for news sites, magazines, and blogs;
  • The “In Use” page is a great source of inspiration if you need help placing fonts in the context of design.

 

7. Monotype

Monotype Fonts

Monotype is arguably one of the biggest rivals to Google Fonts, with over 10,000 fonts in its library and a sizable amount of resources that ensures it’s always on the cutting edge in terms of style and functionality.

Highlights:

  • Massive library of fonts — not just from Monotype, but from its subfoundries: Linotype, Bitstream, FontShop, and International Typeface Corporation;
  • New releases are often inspired by well-known and popular fonts from the Monotype collection;
  • Licensing fonts is a simple and easy process through MyFonts.

 

8. Paratype

Paratype

Paratype was founded in 1989 as a company called ParaGraph. The Paratype foundry was later broken off and launched in 1998 and has made a name for itself as a quality provider of multilingual type.

Highlights:

  • Among popular typefaces like PT Sans, Proxima, and Futura, you’ll find a huge selection of equally beautiful typography designs to work with;
  • Many of the fonts will give you a closer look at multilingual use cases;
  • There’s always a great selection of “Specials”, so look to those if you’re intimidated by the cost of full-priced fonts.

 

9. Sudtipos

Sudtipos

Sudtipos has been around since 2002, providing the world of design with high-quality type for advertising, packaging, and branding projects.

Highlights:

  • You’ll find serifs and sans serifs, though Sudtipos is overflowing with beautiful cursive and handwritten scripts;
  • There are no surprises when it comes to pricing — costs are published right away;
  • This collection is especially useful for designers that specialize in branding and advertising design.

 

Wrap-Up

Sure, Google might make it easy (and cheap) to try out different fonts for your web design projects. But what if there’s something specific you’re looking for that you just can’t seem to find in Google’s font repository?

If you look at the type foundries above, you’ll see why these companies are the best. They’re not producing the same old designs over and over again. They continue to innovate in the space and have produced libraries of fonts that web designers can use to build impressive websites, apps, branding, and more.



Source link

3 Essential Design Trends, December 2019

This month’s collection of design trends is a gift to behold. Each of the trends are highly usable options that are versatile, giving you plenty of room to play and make them your own. That’s the best kind of trend, right?

Here’s what’s trending in design this month.

 

Whimsical Illustrations

It seems like whimsical illustrations are practically everywhere. Fun drawings that can be anything from line-style illustrations to full-color pieces of art are popping up in all kinds of projects – even for brands, companies, of business types that you might not expect. Whimsical illustrations are trending for a number of reasons:

  • They create just the right feel for a project that doesn’t need to be heavy;
  • You can design the main imagery to be whatever you want;
  • They provide a source of delight for users;
  • Every project using illustrations looks a little different, creating a custom design;
  • The proliferation of illustration kits has made creating this style easier than ever.

The thing that might be best about using whimsical illustrations is the personality they bring to a project. The right illustrated element – or series of elements – can emotionally tie users to the project while setting a scene. The possibilities are almost endless. Illustrations don’t have to apply only to lighthearted projects, even though “whimsical” might imply it. The illustrations for Violence Conjugale feature a sense of whimsy for a serious topic, and it works. (Maybe we all need a little more whimsy in our life?)

not-violent
dark
soundboard

 

Black and Blue

It’s a classic color combination that’s making a big return to projects – black and blue palettes.

The contrast of a dark background and blue accents is eye-appealing and creates a harmonious and pleasing visual aesthetic. The projects below use this color trend in different ways, all with the same cool result.

Arm Yourself uses a black background with a black and white illustration to make bright blue lettering and accents pop off the screen. Color draws users into the interactive part of the homepage design with a drag to the bullseye instruction.

arm

Carey uses a lighter, more teal blue on a charcoal black background for a lighter feel. The blue color pulls from the logo and brand mark with buttons that have a lot of contrast from the background and brighter elements in the design. The blue continues on the scroll with bold text on a fully black background, showing the versatility of this color choice.

carey

Adera uses a simple blue button on a black and white image to create contrast and draw the eye to the active part of the design. The color palette flips on the scroll to a blue background with darker elements on top. Contrast is a vital factor here, helping dictate user flow and how to digest and interact with information on the screen.

adera

 

Anything-But-Flat Scroll Transitions

Disclaimer: I am totally in love with this trend and can’t get enough of it.

Anything-but-flat scroll transitions is a versatile design trend that’s visually interesting and contributes to usability. (It’s a win-win!) This trend is exemplified by a transition element between “screens” or “scrolls” with a visual that isn’t just a box or flat line. Think of how most parallax designs or screen-based vertical viewpoints advance from one box to another. With this trend the transition is more fluid. The examples below do this in different ways:

Oroscopo takes advantage of the blobs trend that’s been popular all year with blob elements that create waves between content elements. Contrast between light and dark backgrounds magnify this effect, while other blog shapes create visual consistency.

oro

MAHA Agriculture Microfinance uses a simple line between scroll elements but it’s got a texture to it that makes it just a little more visually interesting that having a flat line between the hero image area at the top and the secondary content block.

maha

Akaru uses a pretty amazing animated fluid design to offset the branding in the center of the screen. The animation carries into the background of the content below the scroll. (You’ll want to scroll all the way to the bottom of this one to see the transition from the dark animation back to white.) The effect is stunning.

agence

Here’s why this trend works so beautifully: The fluid transition is somewhat disruptive because the user doesn’t expect this visual and seeing the edge of a transitional element encourages scrolling. Whether the user scrolls to see how the transition changes or to preview more content is irrelevant as long as the interaction happens. It’s brilliant and beautiful, especially on desktop screens.

 

Conclusion

The best design trends are versatile enough that you can use them in new projects or incorporate them into websites that are already live for a little refresh.

A custom illustration can add extra interest to a hero area or page within your website, a tweak to the color palette can create a brilliant black and blue combination, or a neat transition can help users engage with the scroll.

If you want to spice up a project, these trends fit the bill for sure.



Source link

10 Awesome Cyber Monday Deals That You Should Check Out (up to 94% off)

It’s that time of the year again. If you skipped Black Friday there’s still Cyber Monday.

And there are tools and resources out there that you’ll find only once a year at this great price. We’ve gathered the best of them in this article.

Bookmarking this page isn’t a solution. Don’t let a slow decision ruin your chance of getting these products or resources at a discounted rate. Act fast and don’t let them slip by.

 

1. Brizy Cloud Website Builder

In addition to the Cyber Monday savings you could realize, Brizy has lots of free stuff to offer as well, including the website builder itself. This premium product enables designers to create multipage websites fast, easily, and efficiently. Thanks to the 150+ customizable layouts and more than 700 design blocks that come with the package, coding is not necessary.

There is a small catch. You should sign up for a free account to be able to save what you build. You have full control over what you build and how your websites and those of your clients will appear on responsive devices.

Where does the Cyber Monday deal come in? Aside from the Free Forever plan, there are two annual paid plans (Personal and Studio). These are very affordable plans that have much more to offer than the free plan and can be yours at a 40% discount if you order 2 December or 3 December. You might check out Brizy before that date to see if a paid plan is the preferred choice for you. Use discount code CM40OFF.

1

 

2. Smart Slider 3 Pro

Smart Slider Pro 3 features a free plan and three paid plans (Single Domain, Business, and Unlimited). Give it a test drive for free. Yes, you can demo it for free. And if you like it, you can buy one of the paid plans at a discount until December 3.

Smart Slider 3 Free allows you to build beautiful responsive sliders. The paid plans provide additional special effects such as parallax animation and the popular Ken Burns effect.

You won’t get bogged down with extraneous features you have no use for. There are two different editing modes (content and canvas) to work with. In the content mode the slide acts as a page builder, in the canvas mode you can work with layers unobstructed.

Features include 180+ sample sliders (one click installation), a layer animation builder, and an astonishing array of animations and special effects. Any of the pro plans can be yours at a Cyber Monday discount of 40%. Use code SAVE4019.

2

 

3. Paymo

Paymo is a work management software application teams can use to plan their workflow, track time, and invoice clients. Having all these functions managed by a single app ensures that everything is kept in sync. Project managers will know exactly how much time (including billable hours) is spent on each task, making it easy to send accurate reports and charge clients correctly and fairly.

Paymo integrates with Adobe to allow you to track work time directly on Photoshop, InDesign, Illustrator, and Premier.

Live, up-to-date reports can be generated for sharing with team members and project stakeholders. Paymo also helps team management with task planning, tracking expenses, performing leave management tasks, and more. Other important features include Gantt charting, Kanban Boards, and a resource scheduler.

Upon subscribing, use code GVX233 for a 30% Paymo discount.

3

 

4. TheGem – Creative Multi-Purpose High-Performance WordPress Theme

TheGem is a bold and beautiful WordPress theme that is regarded by many, including its 40K satisfied customers, as featuring the most complete designer’s toolkit of any theme on the market. WPBakery ensures easy and intuitive front-end page editing, plus more than 90 pre-built complete websites, installable with one click, allows you to get off to a quick start.

Premade templates and design elements are easily combinable. This premier theme is yours at a 50% discount Cyber Monday.

4

 

5. Beaver Builder

Beaver Builder is drag and drop website building plugin that enables you to separate page building from your theme, giving you total control over your content. Beaver Builder works with any theme, and you can even switch themes without any loss of content. 30+ landing pages come with the package, no coding is necessary, and Beaver Builder is SEO friendly and mobile responsive. No discount code is required. The 25% discount is automatically applied during checkout from Black Friday through Cyber Monday.

5

 

6. Kalium

Kalium is a superior choice for beginners and advanced WordPress users alike. It is easy to use and easy to maintain, it includes several of the most popular WordPress plugins, and it supports all the better known ones. This creative multipurpose theme is an award winning top seller. It’s trusted by 30,000+ clients and provides top customer support.

Normally selling for $60, Kalium can be yours Cyber Monday for $30; a 50% discount and a great deal.

6

 

7. Mobirise Website Builder

Mobirise is an offline website building app for Windows and Mac that features an extremely easy to use interface. It’s mobile friendly, it’s free for both commercial and non-profit use, and you can build fast, responsive, Google-friendly websites in minutes. Mobirise’s Website Builder Kit, normally priced at $2,654, features all premium themes, 200+ blocks, and 66 Mobirise themes and extensions.

On Monday you can purchase this all-in-one Kit for $149, a whopping 94% discount!

7

 

8. Simple Author Box

The Simple Author Box plugin’s features give you the ability to add guest authors and multiple authors to your posts, add links to author’s social networks, and select specific post types where you want your author box to show up. Simple Author Box is Gutenberg block compatible.

Although a free version is available, signing up for a subscription plan is recommended. The Cyber Monday offer of a 30% discount on all lifetime licenses is valid until 4 December.

8

 

9. MyThemeShop

This is for the designer who wants to be able to choose among a huge variety of premium themes, domain licenses, plugins, and memberships in conversion tracking, user behavior, and social media platform tool usage and more.

For Cyber Monday, MyThemeShop’s annual fee is discounted to $99.47. This Cyber Monday special is valid from 1 December to 7 December.

9

 

10. WordLift

As you write content, WordLift is busy adding semantic markups to feed to search engine crawlers with the intent of helping you reach a broader audience. This semantic SEO tool uses natural language processing, analyzes content, and transforms any text into machine-friendly content.

A quality SEO tool like WordLift makes a great investment as it produces greatly superior results as compared to attempting to create SEO friendly content on your own. Cyber Monday features a 50% discount on your first subscription.

10

 

Conclusion

Cyber Monday will fall on the 2nd of December you can witness some of the biggest online deals of the year on tech-related items. Many of these deals are available in physical stores as well. However, online shopping is generally much more convenient, especially if all you have to do is confirm your order and perhaps press “Download”. As far as comparisons with Black Friday are concerned, Cyber Monday discounts are at least as large, and often larger.

 

[– This is a sponsored post on behalf of BeTheme –]



Source link

Popular design news of the week: November 25, 2019 – December 1, 2019

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers. 

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.

 

Fascinating CSS Grid Layout Examples and Tutorials

 

The Defining Movie Poster Trend of the Decade

 

A Brutally Honest Landing Page

 

Hierarchy of Needs in UX

 

Developing a Website Redesign Strategy for 2020

 

Flowkit 3.0

 

Site Design: The Geek Designer

 

CSS Grid Layout Vs CSS Frameworks

 

The Third Generation of Interfaces

 

Buttons: Attention to Detail

 

Building Trust as a Designer

 

10 Essential UI (user-interface) Design Tips

 

WhoCanUse: Find Out Who Can Use your Color Combination

 

Shopify Vs WooCommerce Product Comparison

 

11 Christmas Icon Fonts Free for Commercial Use in 2019

 

7 Ways to Find a Niche for your Ecommerce Store

 

Tips for Choosing a Typeface (with Infographic)

 

Google Also A/B Tests the List Vs the Grid

 

Apple Pulls all Customer Reviews from Online Apple Store

 

How to Expand Globally as a Freelance Designer

 

Mouseless – Unleash your Keyboard’s Superpower

 

Designer Gift Guide 2019: The Best Holiday Gift Ideas for Designers

 

Good Design was Always Accessible

 

Can You Really Convey Luxury Through Digital Product Design?

 

Gratitude Goes a Long Way to Increase Creativity and Innovation

 

Want more? No problem! Keep track of top design news from around the web with Webdesigner News.



Source link

10 Outdated Web Design Trends to Let Go Of

If you’ve ever moved from one home to another, you know how difficult it can be to get rid of things you’ve owned for years. While digging through your closet, you find an old pair of pants you used to wear all the time despite the growing holes in the knees. But you tell yourself, “Maybe I’ll wear them around the house when it gets warmer” or “I bet the grunge look will come back in style”.

It’s easy to make these kinds of justifications in web design and development, too. You think:

“I’ve used the keyword meta tag for as long as I can remember. What can it hurt to keep doing so?”

Similar to how your clothes may become outdated or your appliances obsolete over time, the same thing happens with design and development trends. Rather than hold onto techniques that no longer serve you and only add more to your workload, it’s a much better idea to clear them out and make way for modern trends that’ll have a greater impact.

 

10 Popular Design Trends It’s Time to Let Die

When we talk about outdated web design trends, we’re not just talking about ones that have been obsolete for years. We’re also referring to trends and techniques that we know for a fact compromise the user experience and need to go away ASAP.

1. Cheesy Stock Photos

There’s nothing inherently bad about using stock photos. Many clients don’t have the budgets or wherewithal to create their own company photos and stock photos are a viable alternative.

That said, there was a time when “bad” (i.e. super cheesy and unrealistic) stock photos were all the rage. Even today, you’ll find websites that use these kinds of photos because there’s still an assumption that two people shaking hands in a well-lit conference room signals trust. (It doesn’t.)

Good deal. Close-up of two business people shaking hands while sitting at the working place

Image via DepositPhotos.

2. Hero Sliders

Image slider technology was pretty great in its heyday. It allowed web designers to conserve space while displaying a number of promotional offers at once. In addition to sliders often slowing down page speeds, they also have a tendency to slow users down as they distract them from moving onto other parts of a website.

Verizon Wireless, for instance, has a great example of a strong but simple hero image design in 2019:

Verizon Wireless 2019

This is vastly different from the image slider it used back in 2013:

Verizon Wireless 2013 - Slider - Outdated Web Design Trend

For the most part, we’ve learned to be more efficient with this space, though there are still some websites that can’t make up their minds about which offer to show above the fold… which only makes it more difficult for visitors to decide next steps. Take the initiative and do it for them with a single hero banner.

3. Autoplay

It’s not common to find websites with background audio, let alone autoplay audio, these days. That said, what you do occasionally find are websites that automatically play videos or ads with audio. Needless to say, this needs to stop. If your video (or audio) players don’t allow your visitors to take control of when they start, change that up now.

4. The 3-Click Rule

Over the years, web designers have looked for ways to decrease friction in the user experience. The three-click rule was meant to be one of the ways to do this. However, according to a recent report from the Nielsen Norman Group, there’s never been any data to back up this claim:

“In fact, a study by Joshua Porter has debunked it; the study showed that user dropoff does not increase when the task involves more than 3 clicks, nor does satisfaction decrease. Limiting interaction cost is indeed important, but the picture is more complicated than simply counting clicks and having a rule of thumb for the maximum number allowed.”

Rather than minimize for minimization’s sake, consider the complexity of the task or funnel you’re designing when determining quantity of steps.

5. (External) Links That Open in the Same Tab

There are a number of reasons to add links to your content: for navigational purposes, promotional purposes, and referential purposes. But when you add a hyperlink to your text, consider the following: Is it okay if the link directs visitors to a page in this same browser tab?

External links, for instance, should always open in a new browser tab. Your goal in designing a website is to get more visitors to convert. Letting an external link replace your website in the open tab will only decrease the chances of that happening. In some cases, internal links shouldn’t be opened in the same tab either. So, be sure to think about this the next time you add a link to your site.

6. Non-Traditional Scrolling

Although we’ve become accustomed to swipe gestures in mobile apps, horizontal and other non-traditional scrolling isn’t something that’s caught on with websites. While it’s definitely a design trend that helped many businesses set themselves apart from the pack a few years back, it’s just too gimmicky to use these days.

Robby Leonardi’s interactive resume website was one of the first I remember seeing and it was a brilliant way to capture attention — especially from those of us who grew up with Mario.

Robby Leonardi Side Scroll

But today? Any sort of non-traditional scrolling is just impractical and unnecessary. Even Robby’s current website has broken up this side-scrolling design and turned it into a vertical-scrolling page:

Robby Leonardi Vertical Scrolling

If you want to keep visitors engaged with your website in this day and age, don’t make them figure out how to scroll through your website. 

7. Keyword Meta Tag

For years (we’re talking nearly a decade), the keyword meta tag has not been supported by popular search engines. Despite knowing that the meta tag is useless, some designers still take the time to add it in. But why bother if it’s an extra step that gets you nothing in return?

8. Bad Pop-ups

Although pop-ups have undergone an evolution over the years — from the super-annoying pop-up ads that appeared outside the browser to the ever-present privacy notices we now see thanks to GDPR. While there is certainly some value in using pop-ups on a website, there are just too many kinds of bad pop-ups that need to disappear.

“Bad” pop-ups are ones that:

  • Show up too early on a website (like the second someone enters it);
  • Appear too many times during a single or return visit;
  • Send users to Facebook Messenger to collect their lead magnet and then bombard them with messages there;
  • Contain two buttons. Users that accept the offer, get a friendly message. Those that don’t are served up aggressive or shame-inducing language;
  • Repeat an offer that’s already designed into the website as a promotional banner.

9. Slow-Loading Websites

Mobile websites are notoriously difficult to optimize for speed when compared to their desktop counterparts. Unlike in years past where you could’ve rationalized away speed optimizations for mobile, today, it needs to be a priority with Google’s mobile-first indexing. PWAs are one way to give your mobile site an instant speed boost.

On a related note, by designing a PWA instead of a mobile-responsive website, you’d be able to cater to users with poor or no wi-fi connectivity — a segment that’s often been overlooked in web design.

10. Flash

I cannot believe I’m having to include this last one in 2019, but it seems there are still websites using the Flash Player.

Adobe has already told us that it would be cutting support for Flash next year. Web browsers are starting to remove their support for Flash players as well. And good riddance. Flash has long had issues with security flaws and usability issues.

If you’re trying to hold out on this (or your clients are dragging their feet), keep in mind that this is what visitors will see on many browsers in 2020 and beyond:

Kirkland Ellis Flash Player

Bottom line: If the creator of Flash is pulling support, you need to do the same for any of your websites that still use it.

 

Wrap-Up

It’s easy to get wrapped up in what the next big thing is in web design — AR tech, typography trends, color gradients, etc. But what about all of those trends and techniques that have become a habit over the years?

Rather than hold onto outdated design strategies that will only hinder your progress as a web designer and hold your clients’ websites back, start shedding these obsolete (or soon-to-be obsolete) practices now.



Source link

Keyword Research 101: Everything You Need To Know

Keyword research is a critical part of any SEO strategy. If you get it right, then you’ll bring high volumes of relevant traffic to your site. In this article, we are going to look at what keywords are, and why you need to research them.

Keywords are essentially the bridge between a website and a search engine. They are what helps a search engine identify what your site is about, and how relevant it is when a certain term or phrase is searched for by the user. A search engine keeps a database of websites which they have filed away under the appropriate tags/topics to be able to produce fast results. 

You can make sure you have a much stronger chance of appearing in the SERPs by optimising your website for the right keywords.

However…

There can be hundreds of options when it comes to keywords. So how do you know which ones you should optimise for?

Keyword research.

The general rule of thumb is to look for keywords which have a high search volume (meaning your website will have more opportunities in the SERPs) but on the lower scale of competition (meaning you won’t be fighting multiple large companies for a piece of the pie). We will look at how you can do this a little later in the article. First, let’s take a look at what we mean by keyword optimization…

 

Keyword Optimisation Tips

Now when you think of keyword optimisation, you may be tempted to stuff your chosen keyword into your content as many times as possible. This may have worked a few years back, but now, keyword stuffing is a huge no-no!

When adding your keyword, it needs to be as natural as possible. But there are a few places that you want to ensure this happens. The three most important places to optimize are:

  • At the beginning of your title tag;
  • Your meta description;
  • The first 50 to 100 words in your content.

And there are still some other ways to optimize your keywords that will help when it comes to ranking your website:

  • Your image alt tags (preferably the first image on the page);
  • In the page’s URL;
  • In at least one of your subheadings;
  • 2-3 times (or more depending on your word count) throughout the content.

As you can see there is plenty you can do to fully optimize for a keyword whilst keeping your content natural.

 

Types of Keyword

The types of keyword that you decide to use on your website determine whether you bring in visitors who can offer you the most value. There are seven keyword types you should learn about:

1. Generic Keywords (aka Short-Tail)

Generic keywords will isolate a topic, but you won’t get any further detail. Usually known as ‘short-tail’ keywords. For example: “Shoes,” “Vacuum Cleaner,” or “Book.”

You should stay away from these types of keywords as the competition is usually very high and you have no idea around the search intent so conversions are generally pretty low.

2. Brand Keywords

Brand Keywords are pretty self-explanatory. They include a keyword relating to the brand of the product, for example: “Adidas shoes,” “Dyson vacuum cleaner,” “Harry Potter book.”

They are a step up from a generic keyword but it is still unclear what the intent behind the search is.

3. Broad Keywords

Broad keywords are more promising. They provide good levels of traffic and have much less competition.

Usually, the searcher has decided what they are looking for but may only have an approximate idea. For example: “Running shoes,” “Upright vacuum cleaner,” “Children’s books.”

These are still open to a little interpretation but the search is more specific.

4. Exact Keywords

Exact keywords show that the searcher knows exactly what they are trying to find.

This type of keyword is good to optimize for because they usually convert very well and have high search volumes. For example: “Best running shoes,” “Vacuum cleaner reviews,” “Recommended children’s books.”

There is a problem with exact keywords though: they have a lot of competition.

5. Long-Tail Keywords

In my opinion, long-tail keywords are the best type of keyword to focus on.

They generally have lower search volume, meaning they have less competition but they have a really high conversion level. For example: “Which running shoes are the best for marathons,” “Upright vacuum cleaner with retractable cord,” “Which children’s books are best for ages 8-10.”

Long-tail keywords have the right balance between competition, conversion, and traffic.

6. Buyer Keywords

Buyer keywords will have a word attached that signals the searcher is ready to part with their cash. For example: “Buy Adidas running shoes,” “Dyson vacuum cleaner discount,” “Children’s books coupons.”

If this fits with your business model, then optimising for buyer keywords can be a really smart move.

7. Tyre Kicker Keywords

Tyre kicker keywords usually indicate that the user isn’t one that’s going to benefit you in anyway (unless this aligns with your business strategy.) For example: “Free running shoes,” “Dyson vacuum cleaner exchange,” “Download children’s books.”

There is usually a word attached to the keyword which shows the are not looking to spend money.

 

Wrapping Up

In this article, we have reviewed what keywords are, why they are important and how keyword research is crucial for the success of your website.

We looked at the best places to optimise your keywords on your website without resorting to keyword stuffing. And you now know the seven types of keywords used, meaning you can make a decision which type is best for your business.



Source link