Articles

Nothing breathes life into your designs like the typefaces you choose, so every month, we put together this roundup of the best new fonts we’ve found online.

This month, a distinctly medieval aesthetic permeates some of the designs. You’ll find plenty of rebellion in fonts that break the rules for fun. And as always, we’ve included some excellent practical options. Enjoy!

Arnika

Arnika is a relaxed typeface with much more character than typical sans-serifs. Its strokes flare to the point that it’s almost a serif, and the oversized x-height gives it an almost medieval sensibility. There are four weights crying out to be used in a branding project.

Nosi

Nosi is an irreverent typeface that does an excellent job of evoking the spirit of music fanzines, French cinema, and teenage dramas. It’s a great choice for editorial display work if used sparingly.

Parabole

Parabole Display is what happens when you join the wrong points on your outlines: outer curves become inner curves creating an engaging and very usable display font. Parabole Text is the simplified sans-serif. It’s an exciting pairing for editorial work.

Rizoma

There aren’t enough new serif fonts, perhaps because they are harder to draw than the more popular sans-serif. Rizoma is a welcome exception. Based on Roman inscription letters, it is confident, modern, and highly usable.

Guacheva

If you’re shopping for a festive typeface and want to avoid the usual brush scripts, look at Guacheva. The all-caps serif is elegant and feminine, with a clear sense of calligraphy.

Axios Pro

Axios Pro is a good solid workhorse of a sans-serif. Based on early 20th-century grotesques, it will feel familiar to anyone interested in western architectural type design. It’s available in 10 weights and two variable fonts, with extensive OpenType support.

GT Pressura

GT Pressura brings the warmth of print to the web by simulating the effect of ink spreading over paper. The subtle rounding of the sans typeface adds a unique visual interest to the mono, standard, and extended fonts.

Galdy

Script fonts are almost always based on a brush or a pen, traced into vectors. So it’s refreshing to see Galdy, a refined retro script. With a distinctly americana feel, it’s perfect for branding projects.

Nitido

Nitido is a humanist sans-serif typeface designed as a companion for Nitida. It is an expertly realized font family with seven weights and seven accompanying italics. As a result, it‘s ideally suited to corporate design work.

Kinckq

Kinckq is an intriguing experiment with variable font techniques. Inspired by a 19th-century woodcut font, Kinckq is a didone that bends through its middle, creating a 3D effect that’s made for large sizes.

Broger

Broger is another distorted typeface, this time twisting shapes and tying them together with elegant ligatures. It’s an excellent choice for branding in the health & beauty market.

Charte Mono

Charte Mono is another attempt to solve the unsolvable — the Latin alphabet is not monosized. However, when resolved as well as Charte Mono, monospaced fonts are excellent for user interface design, charts, and signage systems.

Lini

Lini is designed to be as compressed as possible while remaining highly legible. It supports Latin and Devanagari languages and works equally well in both forms. Lini is still in beta but is already award-winning.

Rotulo Variable

Rotulo is a variable font with huge contrast between its thick and thin strokes. Inspired by hand-lettering on signs, it’s a chunky option for branding or display type on websites.

Bouuuuuh

OK, so we’re a month late for Halloween, but Bouuuuuh is still worth a mention. Its cartoonish shapes are perfect for poster design, T-shirts, brand design, and, yes, next year’s Halloween marketing.

Source

The post 15 Best New Fonts, November 2022 first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

Need help with your NoSQL migration? Look no further than our « NoSQL Migration Essentials » Refcard. We walk through the primary steps for moving out of a relational database, plus important design principles to understand and consider in your migration process.

Readers will review key concepts that range from denormalizing and modeling data to defining access patterns, designing primary keys and indexes, and creating an entity relationship diagram — all demonstrated with a simple site application example. As a bonus, readers can use the included JSON structure at the end to interact with a NoSQL playground.
Source de l’article sur DZONE

Every month we put together this collection of the best new websites we’ve seen appear on the web in the previous four weeks.

In this month’s collection, you’ll find lots of daring interactions, some inventive portfolio sites, florescent yellow colors, and even some old-school mouse trails. Enjoy!

Joshua’s World

Joshua’s World is a fantastic animated site. Grab and drag to tilt and rotate the island and watch the little cyclist power past important links to milestones in his creative career.

Vana

Vana is a new service aiming to help you take control of your data. Its site is modern and lively and uses some great retro-illustrations to bring its features to life.

Velocity Nitro 2

This slick site has some incredible 3D renders for the Puma Velocity Nitro 2 running shoe. The scrollable animation guides you through each feature in a thrillingly engaging fashion.

Norwegian Soda Co.

The Norwegian Soda Co. uses beautifully shot photographs to capture the zest of its products. It’s an excellent example of how a one-page site can be rich and engaging.

Anytype

Anytype is a collaborative platform pitching itself to creative thinkers. It uses a lovely gradient animation to create a sense of power and technological evolution.

Dash

Dash claims to be almost the best tech company, and its modest site does a great job of expelling the tedium from HR. Plus, it has an old-school mouse trail!

Sileon

Sileon is a site packed with clever details. For example, the hover effect on text links is pleasingly minimal, and the photography shot through distortion is a simple but effective technique.

Karina Sirqueira

Karina Sirqueira’s portfolio is a joy to browse through. The morphing shapes add interest to a collection of case studies that are engaging and beautifully presented.

Hotel Santa Caterina

This beautiful website for the Hotel Santa Caterina on the Amalfi Coast captures the light and wonder of the region with a muted color palette and stunning photography.

La Lulu

La Lulu is a Columbian-American singer, dancer, and musician. Her site uses color to disrupt a fairly standard layout and infuse it with amazonian, psychotropic, South American vibes.

International Magic

International Magic is a design agency that boasts some impressive clients, from Maison Margiela to Nike. Its scroll-to-browse portfolio is a masterful example of selling design.

OAD

OAD uses color expertly to convey contrasting temperatures. At this time of year, who doesn’t want a pullover crafted to withstand the Norwegian weather?

También

También is a creative agency specializing in organizations that positively impact the world. Its scrolling collage of client projects is one of the best examples of this type of portfolio.

Dragonfly

If you were designing a website to be used in a 90s film about the internet, you’d create Dragonfly’s site. It’s packed with glitches, code references, and awesome pixelated imagery.

Elva

There’s a lot of distortion entering the design lexicon at the moment, and one of the best examples is Elva’s portfolio site, which uses it to enliven its black-and-white site.

Sussex Taps

Sussex Taps uses multiple full-screen video clips to sell its carbon-neutral tapware range, but it’s the horizontal scrolling product videos that really make this site stand out.

Angello Torres

Angello Torres’ portfolio is packed with daring typography that breaks pretty much all the rules and yet still manages to work somehow to convey energy and creativity.

Repeat

Repeat is an excellent service for upselling customers with repeat orders. It uses simple illustrations to represent generic products with an attention-grabbing yellow for interactions.

High Five Strategies

High Five Strategies eschew the formality of most business pitches to deliver a positive message with bold colors and typography that makes you feel ready to move forward.

Delight

Delight Snowparks employs a questionable lilac color, but its fantastic imagery and video framing more than makes up for that. Plus, there’s another super-old-school mouse trail!

Source

The post 20 Best New Websites, November 2022 first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

Hello devs, if you are preparing for a system design interview and looking for the best resources to master software design and system design, then you have come to the right place. 

Earlier, I shared the best System Courses, Books, and System Interview Questions, and in this article, I will share the best places to learn system design.

Source de l’article sur DZONE

Color and depth are key themes this month as we look at what design trends are happening across websites. Red is the primary color of choice, and you can see it almost everywhere; the new thing is that it’s being used in backgrounds and as more than an accent color. Additionally, 3D elements and depth of field are making significant impressions.

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

1. Red Backgrounds

Red is the color of power, passion, and attention, but until recently, it wasn’t the go-to choice for website backgrounds. Now trending is red as a background color.

These designs are bold and in-your-face with bright color, an almost brash feel in some cases, and a lot of impact.

But it works.

In the projects below, red is a powerful tool to help convey the message of the website design. The color demands that you engage with the design to see what’s happening and the content therein, and in the case of Pentel, it’s part of the brand color.

Arze uses a bold red background with a smaller inset of contrasting color to show items on the site. It’s an interesting and quite bold choice. The red background carries through the scroll as well. This is a use of color that verges on off-putting but still gets the point across and helps show products thanks to a lot of contrast.

Russia Invaded Ukraine is a perfect use of red as a color that invokes feelings of passion with content to explain the conflict. Red can be a charged color; here, that’s precisely the intent.

Pentel uses a red background that’s a little softer than the previous examples. Here, red is a brand color, and they use the background to help draw attention to items and elements on the site. The red carries below the scroll as well to keep the theme moving.

 

 

2. 3D Icons and Graphics

Three-dimensional elements seem to keep ebbing and flowing with designers. We see a lot of 3D in projects, and then it seems to vanish again. It’s like we haven’t really figured out how to use it well or in a way that works with the content of various designs.

Admittedly, 3D icons, graphics, and illustrations can be difficult to create and use. Often they look a bit light and don’t go with all kinds of content. Therefore, they don’t get used that often.

Each of these projects takes a different approach:
Admilk goes all in with a series of 3D animations featuring the brand name. They are fun, light, and a bit unexpected. The graphics include objects that look like balloons, milk and cereal, and grass with flowers. (Click through to see each one.)

Refokus uses three-dimensional objects that move on a scroll to create directional flow and visual interest in a space where there’s not much else in terms of art. The objects stick with the aesthetic on the scroll and create an interesting element that carries you through the design without overwhelming you with tricks.

Junni is one of those website designs that goes all in with 3D. This illustrated bubble style of graphics is beginning to be a 3D trend in itself as a style that’s being used more and more with icons and even emojis. It has a light feel, and the animation almost makes it seem silly and somewhat childish.

 

 

3. Long Focal Depth

It’s been a while since a true photography or videography trend made this roundup, but there are so many instance of this image/video style in projects it can’t be ignored. Long focal depth is almost everywhere, from travel sites to architecture to e-commerce.

Long focal depth or depth of field allows the image to show a lot of space in an image in a way that’s sharp and viewable. Depth of field, in photography terms, is the distance between the closest and farthest objects in an image that are acceptably sharp.

In this trend, each website features a strong image with plenty of depth of field. The image can be still or moving, and the image is the thing that really draws you into the design.

What’s great about this trend is that you can see a lot of a scene and even feel like you are part of it. It’s an engaging visual concept that can work for a variety of purposes.

Interest Media uses a video reel that slowly zooms even further out. The image is lovely, and with the text overlay is easy to read and understand. It almost feels like you are walking backward on the bridge in the video.

Bloomingdales uses an immersive video with plenty of depth and virtual reality elements to create an immersive shopping experience. It makes you feel like you are in the store via the website and encourages shopping. It’s a fun way for the retailer to showcase its 150th anniversary.

 

Arredamento Design uses a photo with a wide focal area to provide interior design inspiration. Note the crisp lines and ease of which you find yourself engaging with the image, or even imagining a room like the one pictured. The effect used in the design, with a zoom on scroll, pulls the user into the image even more. Depth here keeps the motion and zoom from being too much and almost allows you to see more and feel even closer to objects that are further away in the image.

 

 

Conclusion

There are two trends here that tend to cross over into one another: The color red is everywhere and having a major emergence this fall as a dominant hue and depth, and three-dimensional focus is everywhere.

Both are highly usable design elements that can be incorporated easily, making them even more likely to continue to gain prominence in projects.

Source

The post 3 Essential Design Trends, November 2022 first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

Whether you’ve worked with a few WordPress themes to design websites or worked with many of them, you’ll no doubt agree that plenty of WordPress themes that are visually gorgeous on the front end can be terribly unattractive and extremely awkward to use on the backend. 

Working with a WordPress theme can sometimes be difficult, but it can be different.

Want proof? Look no further than with BeTheme. 

BeTheme, with 260,000+ sales and counting and a 4.83-star user rating, is one of the top 5 best-selling WordPress themes of all time.

In this article, we’ll show you one of the many reasons why this is the case by focusing on how BeTheme’s backend is designed to make web design tasks more manageable.

Enhance your workflow experience with a WordPress theme backend that won’t stress you out 

Once you install BeTheme, you’ll almost immediately notice it’s different. Instead of a drab and often unintuitive WordPress backend, you’ll suddenly be confronted with a clean, well-organized dashboard and toolset.

You haven’t actually lost anything. WordPress, with its impressive assortment of content management tools, is still there. Be’s backend is a visually appealing space in which you will take pleasure to work.

If only the rest of WordPress could follow suit.

If you haven’t worked with BeTheme recently (or at all), why not let us walk you through several of its most helpful backend features.

Starting with:

1. Dashboard Design

BeTheme’s dashboard is conveniently located directly beneath the main WordPress Dashboard link. So you won’t waste time sifting through the sidebar trying to find your theme’s settings, and everything displayed in the dashboard is designed to help you get the most out of your WordPress theme. 

Clicking on the BeTheme or the Dashboard link gives you immediate access to the following: 

  • Theme registration information
  • BeTheme’s step-by-step website creator
  • A Navigation bar that directs you to BeTheme’s frequently used tools
  • Plugin status and updates and new features announcements
  • The latest additions to BeTheme’s ever-growing library of pre-built websites
  • Beloved BeTheme integrations

It takes a minute to fully appreciate how helpful this dashboard will be. 

BeTheme

2. Dark/Light Mode

Research on dark mode benefits is inconclusive. But since so many people seem to like it, it is offered as an option in many popular apps and devices.

Dark mode users will tell you that they experience less eye strain, they sleep better, and their device’s batteries last longer than is the case with light mode.

BeTheme’s backend offers a dark mode option, and you are encouraged to try it.

If you feel it beneficial, so much the better, and you needn’t concern yourself with what the research indicated, or didn’t indicate.

BeTheme

3. Step-by-Step Website Creator

When you first install a WordPress theme, it’s not uncommon to spend some time trying to figure out what to do next. The theme’s advertisements may highlight a selection of impressive demos, but where are they more exactly?

Of course, you’ll eventually find them, but is whatever difficulty you may have encountered necessary?

BeTheme removes that impediment. 

You will notice the Setup Wizard under BeTheme (and in the dashboard as well.) Click on the wizard, and with its step-by-step website, you can: 

  • Give your website a name.
  • Select the page builder you want to work with and choose your preferred editing mode.
  • Pick an ideal pre-built website based on your new website’s industry or niche.
  • Easily replace existing content with your own.

The entire process of loading your brand-new site and page builder into WordPress takes a minute (or more like 30 seconds once you are used to it).

BeTheme

4. Pre-Built Site Previews

With BeTheme, you can choose from more than 650 pre-built websites. New ones are being added as we speak, and they’re delightfully easy to find. Just look under the dashboard’s Websites link or Pre-built Websites in BeTheme’s sidebar menu, and there they are!

You’ll be familiarized with the available design aids and options in no time, and you’ll find it easy to incorporate the latest design trends into your websites. BeTheme has even placed previews of its newest pre-built websites in your dashboard to help you along.

You may choose one of the latest pre-built websites to work with, or you might find one or more others you particularly like. Pre-built sites you do not plan to work with can still be sources of inspiration.

Whatever your choices, you’ll find it easy to incorporate the latest trends into website designs.

BeTheme

5. Plugin Manager

BeTheme’s Plugins area differs from what you see in the WordPress plugins area. You’ll find several of these differences to be particularly helpful in that BeTheme’s plugins manager enables you to: 

  • View the active plugins you’ve installed.
  • Update plugins when necessary.
  • Install and activate plugins only when it’s required.

The last item is essential in that plugins do not appear in the WordPress plugin manager until you have installed them. Not having to install plugins you will not need will help keep your website operating at a high level of performance.

BeTheme

6. BeTheme Support

WordPress is a powerful content management system and an extremely popular one. It may, in fact, be the most powerful and popular system of its type.

WordPress is also community-driven to a considerable extent, which can sometimes create user inconvenience. As a user, you might sometimes have to dig to find answers to your questions or get help when needed.

You don’t have to experience that inconvenience to get support from BeTheme.

To gain access to BeTheme’s support center, you need go no further than BeTheme’s sidebar or dashboard to access self-support options or open a ticket for direct assistance.

BeTheme

7. Theme Options

Plenty of well-known WordPress themes have theme settings customization capabilities. With BeTheme, it’s easy to set brand colors, choose custom fonts, and establish global layouts. The same holds for configuring responsiveness, performance, and accessibility, all of which are essential for optimizing UX and search engine functionalities.

The problem with most theme options is that they can only be modified from the main WordPress dashboard. So if, while designing on a page, you suddenly realize a portion of its design hasn’t been configured correctly, or you’re dissatisfied with any design segment, you’ll have to save your changes and go to your theme’s backend to make the necessary fixes.

From the BeTheme dashboard inside the BeBuilder BeTheme, you can modify your Theme Options without having to interrupt your workflow.

BeTheme

8. White-Label Mode

A final feature of the BeTheme WordPress theme’s backend you should become familiar with is BeCustom. This critical feature is located under BeTheme in the sidebar.

BeCustom enables you to access some white-label regions in BeTheme. 

  You can use BeCustom to:

  • Substitute Be’s branding with your business’s branding to reinforce your name with your clients.
  • Disable any features your clients have no use for and deny access to any features you do not want them to modify while at the same time making the WordPress theme’s backend easier to work with.
  • Create an extra user-friendly and secure WordPress login.
  • Customize the dashboard’s “Welcome” message.

BeTheme

Make Your WordPress Design Projects Simple to Handle With BeTheme

Is there anything BeTheme doesn’t do?

Most likely, but nothing that would adversely impact your design effort.

This multipurpose WordPress theme’s hundreds of pre-built websites will help you get virtually any website project off to a rapid start and headed in the right direction.

BeTheme features the fastest and most powerful page builder for WordPress.

You will have total control over every feature and facet of your website’s UI.

In short, BeTheme offers the finest way to manage any web design project within WordPress.

 

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

Source

The post Why Do WordPress Theme Backends Have to Suck? (Hint: They Don’t!) first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

We write this guide to the best new tools for designers and developers each month. For October, we’ve sought out tools to make you a better website builder, some handy utilities to make you more productive, and a spooky font for the end of the month. Enjoy!

Microsoft Designer

Microsoft Designer is a brand-new app for creating images from text prompts. You can create social media posts, blog images, and any other assets you need with its step-by-step guided process.

Remix

Remix is a full-stack web framework for React that lets you focus on designing your UI. Remix is geared towards web standards and delivers a resilient user experience so you can build better sites.

Ultra

Ultra is a super-fast package manager that uses hardlinks to install packages. It’s up to ten times faster than NPM and Yarn, and the project is open-source.

AskEdith

AskEdith is an AI-powered app that translates English into SQL so you can query your database without writing custom SQL. Just type a description of what you want to know, and the app creates the query for you.

Wide Angle Analytics

Wide Angle Analytics is a GDPR-compliant Google Analytics alternative that puts privacy first. Track actions across multiple sites and discover insights about your site without exposing yourself to privacy violations.

story.to.design

Imagine being able to import a whole webpage straight into Figma. You can, with story.to.design, a fantastic app that imports code into Figma for updating UI elements or speeding up redesigns.

Metlo

Metlo is a testing platform for securing APIs. By running comprehensive tests against your API, you can uncover issues like unidentified endpoints, before they become a security threat.

StockAI

Nothing is more frustrating than searching for the right stock image when one doesn’t exist. StockAI is a day-saver that searches for stock images, and if the sought-after image doesn’t exist, it will generate one for you.

Growthfyi

If ad-blockers are playing havoc with your Google Analytics, check out this script from Growthfyi. It’s an invaluable service that doubles the speed of GA while ensuring ad-blockers don’t catch it.

Sourcery

Sourcery is an excellent tool for developers that continually reviews your code and suggests improvements automatically. Write better code, and catch errors before it goes to review.

Cyber Security Icons

This set of Cyber Security Icons contains 20 illustration-style icons. In addition, there are some great interpretations of complex ideas like retina scans, crypto vaults, and end-to-end encryption.

Blinqo

Blinqo is a handy little Chrome extension for anyone that needs to share their screen. It allows you to blur parts of your screen when sharing or recording, so your private details remain private.

Instaprice

Instaprice is a helpful new service that shows you what other freelancers charge for the job you’re quoting on. Earn the actual market rates and never get caught out undercharging again!

Leta

Leta is a great app that allows you to design your own keyboard layout. You can redesign the key positions for macOS, Linux, or Windows and download them for free.

Blogic

Build blogs powered by the Notion API with Blogic, a no-code blog builder that can create fast, SEO-friendly blogs in under a minute. Custom domains and third-party scripts are supported.

Digital Maker Toolkit

The Digital Maker Toolkit is a collection of resources for anyone releasing digital products. It includes guides on process, a handy step-by-step checklist, a list of further resources, and a guide to the available tools.

Slides

Slides is a static website generator you can use to create beautiful, animated websites in minutes. Select layouts from a collection of templates and publish with clean code that downloads fast.

AXplorer

AXplorer is a privacy-focused browser with a built-in VPN. Created by the Axia blockchain network, it generates free crypto in the form of AXIA coins when using it to browse the web.

Font Engine

Can’t decide on a font for your latest side project? Font Engine is a handy little app that will suggest fonts for you. Just tell it your brand values and hit the ‘Suggest’ button.

Deliciozo

Deliciozo is an excellent display font with irregular strokes and styling, making it feel like a paper cut-out. It’s perfect for magazines, cookbooks, and even logos.

Kayino

If you’re looking for a font to convey the hippy era, look no further than the psychedelic stylings of Kayino, a groovy display font with crazy details.

Noganas

Noganas is a spooktacular font for the upcoming Halloween festivities. Use it to add some gruesome frivolity to your seasonal designs.

Source

The post Exciting New Tools for Designers, October 2022 first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot