Webdesigner Depot

syndicated content powered by FeedBurner

FeedBurner makes it easy to receive content updates in My Yahoo!, Newsgator, Bloglines, and other news readers.

Learn more about syndication and FeedBurner...

Current Feed Content

Infographic: Squarespace Vs Wix

Posted:Thu, 13 May 2021 18:45:48 +0000

Are you thinking of building a website with a site builder but find yourself confused by the dizzying array of options? Well, puzzle no more because we’ve put together this great infographic to cut to the heart of the question: Which is better for you, Squarespace or Wix?

Each of these site-building giants is ideal for a particular type of person, but which is best suited to your next project? Do you need total creative freedom? How about a large amount of bandwidth to share content? Would you like to rely on AI? Or, is ecommerce the most important thing for you?

Check out our infographic to determine which one of these options is right for you.

Source
The post Infographic: Squarespace Vs Wix first appeared on Webdesigner Depot.
10+ Cool Pre-Built Websites Designed With Creatives and Developers in Mind

Posted:Tue, 11 May 2021 14:45:09 +0000

Creatives need a digital space to call their home. A place from which they can show off their best work, and from where people can get in touch with them to buy or hire from them.

You should have a digital space of your own as well, and we’re here to help you do just that.

With one of 600+ Be Theme’s pre-built websites at your fingertips you can establish your own digital presence in no time at all. While you’re certain to find one to get started among such a large selection, we’re happy to offer a helping hand. The following 15 top BeTheme pre-built websites were specifically designed with creatives and developers in mind.

Don’t be afraid of choosing one that might not turn out to be the exact best choice. Every one of these 600+ pre-built websites is customizable, and you can always select another example or experiment if you want to.

15 Awesome BeTheme Pre-Built Websites You Can Call Your Own

No matter your choice, you’ll quickly discover that most or all of the heavy lifting involved in creating a website has already been done for you. Customize, add your own content, tweak as necessary, and you’re done!

That said, let’s get started.

1. BeAgency 4

Whether you prefer to go it alone or dream of someday building your own creative agency, the BeAgency 4 pre-built site would be a great foundation for your site. It oozes professionalism, it’s easy for your visitors to navigate, and you’ll love its clean, modern design.

As an extra feature (and most of these pre-built sites have one or two), BeAgency 4 has a Portfolio page. Swap in your own content and you’re set to go.

2. BeAgency 5

Like its predecessor, BeAgency 5 offers plenty of flexibility. You might find its completely different style more causal and relaxing, given the hand-drawn elements and small animations sprinkled throughout.

The extra feature here is a premade page for case studies you could use to add context to items in your portfolio.

3. BeArtist 3

Whether you’re a visual artist, photographer, graphic designer, writer, or whatever, the BeArtist 3 pre-built site’s cool design with its unique vibe could be just what the doctor ordered.

It even has a Shop setup you can use to sell your work, or you can convert it to a portfolio if you intend to showcase that.

4. BeBusiness 3

If you would like to create a simple website to market your artistic services BeBusiness 3 would be an excellent choice.

Whether you’re a photographer selling family portraits or wedding packages, a web developer searching for clients, or a graphic designer specializing in logo design, this pre-built site gives you a great starting point.

5. BeCompany 6

If you’re looking for a way to help your company stand out from those that would prefer to play it safe in terms of website design, this BeCompany 6 pre-built site, whose geometric shapes and illustrations give it a particularly artsy vibe, would be an option well worth considering.

Not to forget; among BeCompany 6’s features there’s a page with case studies that can help you highlight your work.

6. BeConsultant

It’s sometimes the case that after creatives have become experts at their game or craft, they branch out into consulting. If you fit into that category, you might find BeConsultant to be the perfect fit for you.

If you’re not a full-time consultant, or not into consulting at all, you could still use this pre-built site as the basis for a website to show off or sell your skills.

7. BeCopywriter 2

This one’s for writers. If that’s you, and your work is focused on words, it only makes sense to use a pre-built site like Copywriter 2 to beautifully showcase your content.

8. BeCreative 4

BeCreative 4 offers a distinctive point of view on what a typical website for creatives should look like.

While it features everything you need, e.g., a portfolio page is included along with a section for sharing testimonials, it offers a few other surprises as well; surprises like its left-aligned navigation for starters.

9. BeCV 2

BeCV 2 is not your standard digital CV or resume. Not by any means.

It’s a single page site that will serve as a perfect vehicle for sharing your skills, your experience, and your accomplishments as reflected in your body of work. It also gives prospective employers or clients the opportunity to connect with you directly through your site.

10. BeData

BeData would be a good choice for IT professionals, web developers, and programmers. Its layout, techy design, and cool features can easily be customized to suit your needs.

11. BeMedia 2

BeMedia 2 tests the limits of conventional design in a variety of ways, including its asymmetric layouts, outsized images, and its animated background video; all designed to instill a heavy dose of energy into your website and your brand.

12. BePhotography 3

The BePhotography 3 pre-built site isn’t for professional photographers only. If you are a web designer, an illustrator, or any kind of a visual creator, this image-centric pre-built site offers a great way to show off your creative efforts and dazzling works of art.

13. BePortfolio 2

BePortfolio 2 is great way for showing off in the best possible way your work, your experience, your list of clients, and whatever else is of importance to you and your business. For creative professionals it doesn’t get any better than this.

14. BeTheme

A great thing about using BeTheme is you can use it to create a website as simple or as complex as you like, as well as one that will get your message across in the best possible way. BeTheme comes with the building blocks you need, and quite naturally an impressive portfolio page.

15. Webmaster 2

Programmers and developers. This pre-built website was created just for you.

BeWebmaster 2 gives you a fun way to take your techie language and translate it into something they can relate to.

Build a website you’ll be proud to share with the world.

One of the things users like best about using Be Theme is its huge selection of pre-built websites they can make a choice from (600 and counting to date!).

[– This is a sponsored post on behalf of BeTheme –]
Source
The post 10+ Cool Pre-Built Websites Designed With Creatives and Developers in Mind first appeared on Webdesigner Depot.
26 Exciting New Tools For Designers, May 2021

Posted:Mon, 10 May 2021 14:45:29 +0000

From dev tools to productivity to a little bit of fun with sudoku, this month’s collection of new tools is packed with something for everyone.

Here’s what new for designers this month.

May’s Top Picks

Am I FLoCed?

Am I FLoCed? Is a tool to see if you are part of a Google Chrome origin trial. It tests a new tracking feature called Federated Learning of Cohorts (FLoC). According to Google, the trial currently affects 0.5% of users in selected regions, including Australia, Brazil, Canada, India, Indonesia, Japan, Mexico, New Zealand, the Philippines, and the United States. The page will try to detect whether you’ve been made a guinea pig in Google’s ad-tech experiment.

According to the designers of Am I FloCed: “FLoC runs in your browser. It uses your browsing history from the past week to assign you to a group with other ‘similar’ people around the world. Each group receives a label, called a FLoC ID, which is supposed to capture meaningful information about your habits and interests. FLoC then displays this label to everyone you interact with on the web. This makes it easier to identify you with browser fingerprinting, and it gives trackers a head start on profiling you.”

Uncut

Uncut is a Libre typeface catalog that just got started in April. It features contemporary typefaces and styles and is set to be updated regularly. Sort by sans serif, serif, monospace, or display typefaces. Plus, you can submit a typeface for inclusion.

Dashblock

Dashblock allows you to build automations without coding. Use it to create visual automations, or turn blocks into use-cases. (It is a premium tool, but comes with a 14-day free trial to test it out.)

Instant

Instant is a fast and secure one-click checkout tool that works with WooCommerce. Users fill out a short form the first time they shop and then join the network to enable instant, frictionless, 1-click checkouts without passwords. It makes shopping easier and cuts abandoned carts.

5 Image Tools

Triangula

Triangula uses a modified genetic algorithm to triangulate images. It works best with images smaller than 3000px and with fewer than 3000 points, typically producing an optimal result within a couple of minutes. The result is a nifty-looking image.

Content-Aware Image Resizing in Javascript

Content-Aware Image Resizing in Javascript solves that problem with images where you have a photo but it just doesn’t quite fit. A crop doesn’t work because you lose important information. The carver slices and cuts photos to give you the image elements you want in the size you want them. It’s probably a good idea to read through the tutorial before jumping into the open-source code on GitHub.

Globs Design

Globs Design uses toggles and drag and drop to help you create funky shapes and fills that you can save in SVG format for projects.

Root Illustrations

Root Illustrations is a stylish set of people-based illustrations that you can customize to create scenes for your projects. Construct a scene and then snag your set of vector graphics that also work with Sketch and Figma. The set includes 24 characters, more than 100 details, and the ability to change colors and styles.

Make Your Photo 16×9

Make Your Photo 16×9 is as simple as it sounds. It is a cropping tool that allows you to upload any shape of photo – even vertical – and pick options to fill the space to make it fit the standard 16×9 aspect ratio.

6 Dev Tools

Devbook

Devbook is a search engine for developers that helps them to find the resources they need and answer their questions faster. Fast, accessible right from a code editor, and fully controllable with just a keyboard.

Madosel

Madosel is a fast, advanced responsive HTML front-end framework that’s in an alpha version. The open-source tool is made to create websites and apps that look great on any device. Plus, it is semantic, readable, flexible, and customizable.

Say Hello to CSS Container Queries

Say Hello to CSS Container Queries helps solve a problem with media queries and smart stacking of elements. CSS Container Queries allow you to make a fluid component that adjusts based on the parent element and everything is independent of viewport width. This post takes you through everything you need to do to implement this yourself.

Frontend Toolkit

Frontend Toolkit is a customizable dashboard that you can use to keep up with recurring tasks. It’s one of those little tools that can speed up workflows.

Flatfile

Flatfile is a production-ready importer for SaaS applications. It allows you to auto-format customer spreadsheets without manual cleaning of data and you can do it all without a CSV parser. The tool also includes an elegant UI component to guide users through the process.

Plasmic

Plasmic is a visual website builder that works with your codebase. It’s designed to speed up development with developers focusing on code (not pixel pushing) and allows non-developers to publish pages and content. The premium tool works with any hosting, CMS, or framework and you can adapt it by the component, section, or page.

2 Productivity Tools

Calendso

Calendso is an open-source calendar scheduling tool. It’s flexible with the ability to host it yourself or with the makers of the calendar. It is API-driven and allows you to control events and information. The interface is simple and sleek and can integrate into your website.

Slidev

Slidev is a set of presentation slides for developers. What’s different about this presentation deck is that you can write slides in a single markdown file with themes, code blocks, and interactive components.

4 Icons and UI Kits

Iconic

Iconic is a set of pixel-perfect icons that gets updated each week. The collection of 24×24 px elements in SVG format contains 160 icons and counting. The simple style is easy to implement and you can search for just what you need by category.

5 Dashboard Templates for Figma

5 Dashboard Templates for Figma is a set of free ready-made screens with light and dark modes for each that you can use with components such as calendars, charts, tables, and more. The free elements are a preview of a larger premium Figma set if you like how they look and work.

Free Mobile Chat UI Kit

Free Mobile Chat UI Kit is a tool of components for Sketch, Figma, and Adobe XD that includes more than 50 messaging screens with light and dark modes.

Stratum UI Design Kit

Stratum UI Design Kit is a collection of more than 9,000 consistent elements for Figma. It’s packed with elements and tools that make this premium UI kit a tool that gets projects moving quickly.

4 Type Tools and Fresh Fonts

Fluid Typography

Fluid Typography is a nifty tool that allows you to test headings in any size at different viewports to ensure it looks great everywhere. Then you can copy the CSS and use it in your projects.

Eighty-Eight

Eighty-Eight is a funky block-style typeface for display use.

Harmonique

Harmonique is a robust typeface family with lovely serifs and alternates. It’s a type family of two styles that work in harmony together to add distinction and personality to your own typographic compositions. Harmonique’s low contrast forms have the appeal of a humanist sans serif typeface.

Sketchup

Sketchup is a charming display typeface that has a nice pen style. The free version has a limited character set.

Just for Fun

Generating and Solving Sudokus in CSS

Generating and Solving Sudokus in CSS by Lee Meyer for CSS-Tricks is a fun deep dive into using CSS for something you might not expect. It’s a complicated – but fun – look at some of the things CSS can do with plenty of code snippets. The final result is a solvable puzzle with 16 squares.

Source
The post 26 Exciting New Tools For Designers, May 2021 first appeared on Webdesigner Depot.
Popular Design News of the Week: May 3 2021 – May 9, 2021

Posted:Sun, 09 May 2021 14:45:10 +0000

Every day design fans submit incredible industry stories to our sister-site, Webdesigner News. Our colleagues sift through it, selecting the very best stories from the design, UX, tech, and development worlds and posting them live on the site.

The best way to keep up with the most important stories for web professionals is to subscribe to Webdesigner News or check out the site regularly. However, in case you missed a day this week, here’s a handy compilation of the top curated stories from the last seven days. Enjoy!

White House Launches AI Website

Become A Better Frontend Developer

Hello Weather

Sprint UI Design System Generator

How Pixar Uses Hyper-Colors to Hack Your Brain

Bootstrap 5

Microsoft’s New Font: Your Work Will Soon Take On A New Character

HTML Tips

Everything You Need to Know About UX Writing In Web Design

3 Essential Design Trends, May 2021

Source
The post Popular Design News of the Week: May 3 2021 – May 9, 2021 first appeared on Webdesigner Depot.
Infographic: YouTube By The Numbers

Posted:Fri, 07 May 2021 18:45:21 +0000

YouTube is the Web’s biggest video channel. Hundreds of hours of video are uploaded to the service every minute. The volume of data it stores and streams is beyond comprehension.

Owned by Google, YouTube has been central to our lives online in such a big way, that it’s almost unbelievable that it’s been with us for less than two decades.

If you’ve ever wondered just how big it is, which videos broke its records, or how many users it has, this is the infographic for you!

Source
The post Infographic: YouTube By The Numbers first appeared on Webdesigner Depot.
Create Beautiful WordPress Pages with Optimized Images Using Elementor and ImageEngine

Posted:Thu, 06 May 2021 14:45:12 +0000
WordPress powers nearly 40% of all websites, thanks to its commitment to making publication possible for everyone, for free. Combined with premium plugins and themes, it’s possibly the ultimate tool for building attractive, unique, and feature-rich websites without any coding or design experience.

However, you do pay the price for this experience, with WordPress and its third-party products not always being built for performance – whether it’s page loading times or SEO.

Image optimization is a particularly big concern. Images are one, if not the largest, contributors to page weight, and it’s growing significantly by the year. So, while images are crucial for beautifying your website pages, they are also one of the biggest factors slowing it down.

In terms of image optimization, WordPress+Elementor brings very little to the table. WordPress core now comes with both responsive syntax and lazy-loading. Elementor itself also only comes with responsive syntax out-of-the-box. However, these are baseline techniques for image optimization that will deliver the bare minimum of improvements.

This means that, while Elementor makes it easy to design sweet-looking WordPress pages (with tonnes of creatively utilized images), you will probably pay the price when it comes to performance. But don’t worry. We will show you how to dramatically improve web performance by over 30 points on scoring tools like Google’s PageSpeed Insight.

Why Optimize Your Elementor Images with ImageEngine?

In general, image CDNs use various techniques to get image payloads as small as possible and deliver image content faster, all while minimizing the visual impact. ImageEngine is no different in that regard.

Firstly, ImageEngine, when used in auto mode, will apply all of the following optimizations that web performance tools like Google’s PageSpeed Insight recommend. For example:
- Properly size images – ImageEngine automatically resizes images for optimal size-to-quality ratios depending on the screen size of the user device. ImageEngine supports Retina devices.
- Efficiently encode images – Applies different rates of compression depending on the PPI of the user devices. For example, ImageEngine adapts and more aggressively compresses on higher PPI devices without losing visual quality.
- Next-gen format conversion – Automatically converts images to the optimal next-gen format according to the browser, device, or OS. ImageEngine can convert images to WebP or JPEG-2000 as well as GIFs to MP4 or WebP. AVIF is also available in a manual directive mode.
- Strip unnecessary metadata
While these features are standard for most image CDNs, ImageEngine is unique for its use of WURFL device detection. This gives ImageEngine much deeper insight into the user device accessing a website page and, by extension, its images. Using the screen size, resolution, PPI, etc., ImageEngine can make more intelligent decisions regarding how to reduce image payloads while maintaining visual quality.

This is why ImageEngine brands itself as an “intelligent, device-aware” image CDN and why it can reduce image payloads by as much as 80% (if not more).

ImageEngine also provides a proprietary CDN service to accelerate image delivery. The CDN consists of 20 globally positioned PoPs with the device-aware logic built-in. This allows you to deliver image content faster in different regions while also serving images straight from the cache with a ~98% hit ratio.

ImageEngine also supports Chrome’s save data setting. If someone has a slow connection or has activated this setting, ImageEngine will automatically compress image payloads even more, to provide a better user experience on slower connections.

How to Use ImageEngine with WordPress and Elementor

If you’re using WordPress and Elementor, then chances are you want to spend as little time on development and other technicalities as possible. Luckily, ImageEngine is a highly streamlined tool that requires little to no effort to integrate or maintain with a WordPress site.

Assuming you already have a WordPress website with Elementor, here are the step-by-step instructions to use ImageEngine:
1. Go to ImageEngine.io and sign up for a 30-day free trial.
2. Provide ImageEngine with the URL of the website you want to optimize.
3. Create an account (or sign up with your existing Google, GitHub, or ScientiaMobile account).
4. Provide ImageEngine with the current origin where your images are served from. If you upload images to your WordPress website as usual, then that means providing your WordPress website address again.
5. Finally, ImageEngine will generate an ImageEngine delivery address for you from where your optimized images will be served. This typically takes the form of: {randomstring}.cdn.imgeng.in. You can change the delivery address to something more meaningful from the dashboard, such as myimages.cdn.imgeng.in.
Now, to set up ImageEngine on your WordPress website:
1. Go to the WordPress dashboard and head to Plugins -> Add New.
2. Search for the “Image CDN” plugin by ImageEngine. When you find it, install and activate the plugin.
1. Go to Settings -> Image CDN. OK, so this is the ImageEngine plugin dashboard. To configure it, all you need to do is:
a. Copy the delivery address you got from ImageEngine above and paste it in the “Delivery Address” field.

b. Tick the “Enable ImageEngine” box.

That’s literally it. All images that you use on your WordPress/Elementor pages should now be served via the ImageEngine CDN already optimized.

ImageEngine is largely a “set-it-and-forget-it” tool. It will provide the best results in auto mode with no user input. However, you can override some of ImageEngine’s settings from the dashboard or by using URL directives to manipulate images.

For example, you can resize an image to 300 px width and convert it to WebP by changing the src attribute like this:
```
<img src="https://myimages.cdn.imgeng.in/wp-content/uploads/2021/03/banner-logo.png?imgeng=/w_300/f_webp">
```
However, use this only when necessary, as doing so will limit ImageEngine’s adaptability under different conditions.

What Improvement Can You Expect?

Let’s see what results you can expect from using an image CDN to improve your page loading times.

For this, I created two identical WordPress pages using the Elementor theme. The one page purely relied on WordPress and Elementor, while I installed and set up ImageEngine for the other. The page had some galleries as well as full-size images:

The pages used many high-quality images, as you might expect to find on a professional photography gallery, photography blog, stock photo website, large e-commerce site, etc. I then ran page performance tests using Chrome’s built-in Lighthouse audit tool, choosing scores representing the average results I got for each page.

For thoroughness, I tested both the mobile and desktop performance. However, I focused on the mobile results as these showcase more of the image CDN’s responsive capabilities. Mobile traffic also accounts for the majority share of internet traffic and seems to be the focus for search engines going forward.

So, first of all, let’s see the mobile score for the page without ImageEngine:

As you can see, there was definitely a struggle to deliver the huge amount of image content. Google has shown that 53% of mobile users abandon a page that takes more than 3s to load. So, clearly, this page has major concerns when it comes to user experience and retaining traffic.

The desktop version fared much better, although it still left much to be desired:

When digging into the reasons behind the slowdown, we can identify the following problems:

Most of the issues related somehow to the size and weight of the images. As you can see, Lighthouse identified a 3.8 MB payload while the total image payload of the entire page was close to 40 MB.

Now, let’s see what kind of improvement ImageEngine can make to these issues by looking at the mobile score first:

So, as you can see, a major improvement of 30 points over the standard WordPress/Elementor page. The time to load images was cut down by roughly 80% across the key core web vital metrics, such as FCP, LCP, and the overall Speed Index.

In fact, we just reached that critical 3s milestone for the FCP (the largest element on the visible area of the page when it initially loads), which creates the impression that the page has finished loading and will help you retain a lot of mobile traffic.

The desktop score was also much higher, and there was further improvement across the key performance metrics.

If we look at the performance problems still present, we see that images are almost completely removed as a concern. We also managed to bring down the initial 3.8 MB payload to around 1.46 MB, which is a ~62% reduction:

An unfortunate side effect of using WordPress and WordPress plugins is that you will almost inevitably face a performance hit due to all the additional JavaScript and CSS. This is part of the reason why we didn’t see even larger improvements. That’s the price you pay for the convenience of using these tools.

That being said, the more images you have on your pages, and the larger their sizes, the more significant the improvement will be.

It’s also worth noting that lazy-loaded images were loaded markedly faster with ImageEngine if you quickly scroll down the page, again making for an improved user experience.

Thanks to its intelligent image compression, there was also no visible loss in image quality, as you can see from this comparison:

Conclusion

So, as you can see, we can achieve significant performance improvements on image-heavy websites by using the ImageEngine image CDN, despite inherent performance issues using a CMS. This will translate to happier users, better search engine rankings, and an overall more successful website.

The best part is that ImageEngine stays true to the key principles of WordPress. You don’t have to worry about any of the nuts and bolts on the inside. And, ImageEngine will automatically adjust automation strategies as needed, future-proofing you against having to occasionally rework images for optimization.
Source
The post Create Beautiful WordPress Pages with Optimized Images Using Elementor and ImageEngine first appeared on Webdesigner Depot.
How To Power Through Designer Apathy

Posted:Wed, 05 May 2021 14:45:42 +0000

Sometimes you just don’t give a damn anymore. Possibly the only thing worse than designer’s block is designer’s apathy: that sinking feeling you get when you realize that you just don’t care about this particular piece of work anymore is disheartening.

The dread of going back to it is paralyzing.

There are many reasons you can stop caring about your work. Maybe you’ve just done the same thing too many times in a row. Maybe your client is insisting on asking for things you know won’t work for them. Maybe something much more important just happened in your life, and you’ve got bigger things to worry about. You could be discouraged by the apparent ‘sameness’ of bandwagon-hopping designs.

I’ve been not caring about my work ever since I was first asked to pick up my toys

Whatever the reason, we all experience times when we know exactly what we have to do… we just don’t care.

I’m something of an expert on this phenomenon. I’ve been not caring about my work ever since I was first asked to pick up my toys. Worse, I have the attention span of a goldfish, even now.

Web design is different. When I discovered it, it was new, exciting, and I could do it on the computer. I loved it, and I still do. Writing code that makes design happen in a browser window will never get old for me.

But even so, sometimes, a particular project will make me want to throw up my hands in exasperation and play video games ‘til Judgement Day. I’d welcome Skynet with tacos and RPGs.

So what do we do about it? First, answer this question: who is the project for?

For A Client

If the project is for a client, it’s just gotta get done. There’s no way around that. You made a commitment. You’re going to follow through and give it your best possible effort because you’re a professional. Anything less would be wrong.

However, that doesn’t mean you have to just power through with only coffee and misery for company. There are things you can do to make the work easier on yourself. The less miserable you are while you work, the better quality you can deliver.

For Yourself

There are a couple of schools of thought here. The first is that it’s perfectly fine to give up on personal projects when you stop caring. I mean, it’s your free time. Why spend it on something you don’t care about?

On the other hand, is a commitment made to yourself any less important than a commitment made to someone else? Many people seem to be perfectly fine with breaking promises to themselves when they’d never willingly do that to a client. Is that wrong?

I usually buy myself a drink and forgive myself, but it’s worth thinking about.

The deciding factor for me is whether my personal project will have any sort of lasting benefit. If whatever I’m designing, writing, or making counts as a long-term investment in my career or quality of life, then it absolutely has to get done, even when I’m not feeling it. Otherwise, I call it a learning experience and move on.

How To Power Through

So, for whatever reason — whether because you have to, or you want to — you’re gonna power through. Here are five ways to do it in style:

1. Start

The hardest part of doing work you don’t care about is starting. This is when you’ll be tempted to procrastinate until the last minute. Try not to.

2. Switch To A Different Part Of The Project

If you can safely (without causing problems) work on a different aspect of the project for a while, try that. The mere variety, the break from the work in front of you before, can boost your morale.

Indeed, working on a different part of the project can give you ideas of getting the most troubling bits done faster or more easily.

3. Do Something Old In A New Way

This one has its pros and cons.

Pro: You can look at this project as a chance to try out a new grid framework, script, code editor, or another tool of some kind. Injecting the process of discovery into an otherwise boring project can make it a lot more fun and even make you look forward to working on it.

Con: You’ll need to plan for extra hours and use some version control; because bringing a new tool or process into play is almost guaranteed to make something interesting go wrong — when this happens, you probably shouldn’t bill the client for the extra hours spent on StackOverflow.

4) Make Like Aziz Ansari And Treat Yo’self

Celebrate the milestones of your project. Don’t celebrate with video games if you need to get any more work done that day. That can go very wrong. But do celebrate. Reward yourself because you’re doing something difficult.

Have a snack. Give yourself a round of applause. Whatever it takes, make yourself look forward.

5) Outsource It

As a last resort, you can always outsource the project to someone else. Just make sure it’s someone you can trust to deliver the same quality of work you would normally provide yourself. Make sure to check it over before handing it off to a client.

Alternatively, you could just outsource the bits of the work that you don’t like. Either way, this is a risky strategy because whoever you outsource to might experience delays or, ironically, not care about the project.

Conclusion

You can do it! I believe in you. The really, really boring projects can seem like huge sinkholes of sadness, but they don’t last forever.

Featured image via Pexels.
Source
The post How To Power Through Designer Apathy first appeared on Webdesigner Depot.
3 Essential Design Trends, May 2021

Posted:Mon, 03 May 2021 14:45:49 +0000

Spring and fresh designs are in the air. This month, it’s obvious that designers are feeling creative with new and interesting concepts that range from a new style for cards, homepage experimentation with multiple entry points or calls to action, and risky typography options.

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

1. “Flat” Cards

Card-style design elements that allow users to click through to other content aren’t new, but the design of these cards is fresh and interesting.

Rather than more heavily designed cards with shadows and layers of content, flat styles are trending. Expect this trend to explode thanks to usage by Google for a shopping experience page.

The Google example below is interesting because Google’s Material Design guidelines are what helped card-style elements grow in popularity previously. However, those cards did include more layers, color options, buttons inside the cards, and shadows.

Today’s trending cards are completely flat. And beautiful.

Each of these websites does it in a slightly different way.

Heartcore, a consumer technology VC company, uses a series of flat cards as a navigation element to help users find their way through the website. Each features a bright color background with an illustration and a simple text block.

Each card has a nice hover state where only the illustration zooms inside the card frame. This is an interesting effect because it is exactly the opposite of the previous iteration of cards, which zoomed the entire card as a hover state.

Google Shopping uses that whole card bounce hover state (plus a not-so-flat shadow) for each card. The initial design is sleek with the pairing of white and image cards with simple text in each. You are enticed to click around to see what happens.

Click on Greece is a travel website design that uses simple cards with a minimal color and text overlay. The consistency of these cards makes the design pop and the beauty of the images draw you in. Each card also has a hover state with a darker color mask to guide navigation and make text elements easier to read.

2. Multiple Homepage Entry Points

For a long time, designers have been working off the philosophy that the homepage should have one direct entry point, creating a direct funnel for the user experience.

These designs throw that idea out the window, with multiple entry points and click elements.

You can think of it as the “create your own adventure” option for these designs.

It can be a risky concept if you are diving into analytics to pay attention to user paths. You want to make sure you know what choices users are making so that you can help them on the journey to the content and information that you want them to get from the visit.

But this type of design scheme does feel somewhat personalized, putting the user in more control.

Parcouse Epicuriens uses three flat card-style elements to help users pick what they want to see from the home page. There’s no other button or direct call to action, which is somewhat uncommon in today’s website design landscape. Users have to pick from one of the cards, scroll, or enter using the hamburger menu icon.

Tasty Find uses search options to help users start their journey. What’s interesting here are the choices – search for the food you want, pick something random, or (in the small print) find even more options. Users get three choices to begin their journey with the website.

What’s interesting is how simple this complex user journey looks. The design is easy to digest, but so many options could overwhelm users. This is one of those situations where you have to watch return search data and information and weigh the risk versus the reward of so much choice. It’ll be interesting to watch this design over time and see if the options decrease in number.

Accord also has several levels of user engagement opportunity. Option 1: Every block contains a click element. Option 2: Use the search at the top to narrow choices. This is an interesting configuration as the homepage for an e-commerce website because they get right to product selection and shopping without a softer sell or introduction.

3. Risky Typography

Typographic risk has been an ongoing theme for a little while. Designers are embracing experimental and novelty typefaces to stand out in the cluttered website space. Sometimes it works beautifully, and other times, it can fall short.

Here, each of these trending website designs uses a risky typography treatment. The risks are a little different for each design, from readability to comprehension to font delivery.

How Many Plants has duel typography risks: A funky typeface paired with odd word breaks. Interestingly enough, readability isn’t as big of a concern as you might think. This is likely because there aren’t many words, and they are short. Plus, the imagery ties in nicely.

Do you notice a similarity between How Many Plants and The Great Lake? The typography has the same style with a blocky, slab, sans serif with alternating thick and thin strokes. (It’s the same font.)

The risk in the typography design for The Great Lake isn’t in the homepage display, although you might wonder what the design is about. It is carrying this font throughout the design. While it looks great large and with only a few words, it gets a little more difficult the more you see it. This type of mental reading weight can be difficult for visitors over time, creating an element of risk.

Zmaslo uses an interesting typeface with a liquid effect on top of an unusual word. That combination of text elements makes you think hard to read the homepage, despite its neat looks. The risk here is weighing visual interest against comprehension. Depending on the audience, this risk can be worth the chance.

Conclusion

Spring always seems to be that time of year where designers start thinking about new, fresh design elements. That might explain some of the “riskier” design choices and experimentation here.

Regardless of the motivation, it is always fun to see the creative stretch happen. It can be even more interesting to see what elements from these trends continue to grow in the coming months.
Source
The post 3 Essential Design Trends, May 2021 first appeared on Webdesigner Depot.
Popular Design News of the Week: April 26, 2021 – May 2, 2021

Posted:Sun, 02 May 2021 14:45:48 +0000

Every day design fans submit incredible industry stories to our sister-site, Webdesigner News. Our colleagues sift through it, selecting the very best stories from the design, UX, tech, and development worlds and posting them live on the site.

The best way to keep up with the most important stories for web professionals is to subscribe to Webdesigner News or check out the site regularly. However, in case you missed a day this week, here’s a handy compilation of the top curated stories from the last seven days. Enjoy!

Curated List Of Awesome Lists

20 Best New Websites, April 2021

I Studied The Fonts Of The Top 1000 Websites; Here’s What I Learned

Markdown To Slideshow

WordPress Checklist: 17 Steps to Launching Your Site

Understanding Easing Functions For CSS Animations And Transitions

This is Tech! Illustrations About Technical Processes

This Amazing AI Tool Lets You Create Human Faces From Scratch

When You Shouldn’t Display Radio Buttons in a List Format

Lightweight, Privacy-First, Open-Source Comment System

8 Stunning Examples of CSS Glassmorphism Effects

CSS Tips

Source
The post Popular Design News of the Week: April 26, 2021 – May 2, 2021 first appeared on Webdesigner Depot.
Quiz: Who Designed That Font?

Posted:Fri, 30 Apr 2021 18:45:11 +0000

We’re rounding up the week with a fun quiz for anyone who loves fonts. You’ve seen these typefaces used in hundreds of designs — from presidential campaigns, to corporate branding — but do you know who crafted those curves?

We’ll start off with an easy one: Do you know who designed Futura?

Source
The post Quiz: Who Designed That Font? first appeared on Webdesigner Depot.