Astronef Super

Are you tired of using the same old Google fonts from website to website? You’re in luck!

In this month’s roundup of the best new fonts, we’re showcasing the latest and greatest fonts from independent type foundries and designers worldwide.

Astronef Super

Astronef Super is a retro-futuristic font collection with seven styles that are meant to be mixed and matched. While the font is modular in design, there are wild variations in weight that you can have a lot of fun with.

Auguste

Auguste Serif and Auguste Sans Serif were originally drawn as a single stencil font that combined serif and sans serif styles. They ultimately became two separate fonts, with four weights apiece, that can be scaled up and down in size based on your needs.

Bartok

Bartok is an exciting font as it breaks with the concept of creating a family of unified styles. Instead, each of the four styles uses different structures and weights, meaning this font can be repurposed for a wide variety of brands and styles.

Cardone

Cardone is a type of serif known as Scotch Roman, designed for functionality and legibility. With its sturdy and brutal design, this serif is perfect for editorial content.

Champ

Champ is a fun and friendly font with nine weights. Because of its bold footprint, this serif performs best in branding and headlines.

Columba

Columba is modeled after old-style printing press typefaces. With its narrow, legible serif forms, Columba is most useful in text-heavy environments — both on the web as well as for printed brand materials.

Deia

Deia is a bracketed serif font with seven fonts. Thanks to the curved stroke transitions in Deia’s character set, this font is full of personality and would work great in product packaging and website branding.

Garton

Garton is a 19th century-inspired typewriter typeface that would look great on literary and editorial websites. This uniquely elegant font has three weights with italic companion sets for each.

Halisa

Halisa is an extensive font family with 60 styles, five widths, and six weights (plus italics). The designer drew inspiration from 19th-century factory signs to come up with this legible semi-constructed grotesque typeface.

Helvetica Now Variable

Helvetica Now Variable is an upgrade on Helvetica Now and the original 1957 Helvetica design. This one, however, adds over a million new Helvetica styles to the fold (all in one font file), which designers can use to create all kinds of digital and print content, including typographic animations.

Palast

Palast is a type system that consists of three sub-families: Palast Text, Palast Display, and Palast Poster. Designers can use this carefully crafted serif font family pretty much anywhere they want — from clients’ websites to promotional print graphics.

Parco

Parco is part of the new wave of humanistic typographic design. With Parco’s compact spacing and tall characters, this font will help designers craft eye-catching and highly legible headlines and branding.

Right Gothic

Right Gothic is a huge font family, containing 98 styles — seven weights, seven widths, 20-degree italics, and an adjustable contrast axis. While this contemporary font is a sans serif, it draws upon typical serif anatomy with its high contrast between thick and thin strokes.

Rund Text

Rund Text is a geometric sans serif that looks both stylish yet comfortable. It also has a companion Display family available to designers who want to bring the same type of functional design to larger headlines or branding.

Sculpin

Sculpin is another variable font to make this list of the best new fonts. This sans serif font was designed as if a chisel and brush had been used, giving it a structured, hand-crafted feel.

The post 15 Best New Fonts, December 2021 first appeared on Webdesigner Depot.

Actualités, Méthodes et organisation des process IT

6 décembre 2021/par Service comm.

Improving the Reader Experience With Adobe Embed API

The Adobe PDF Embed API provides a simple way for web developers to display PDFs on their web pages. While browsers provide good support for rendering PDFs, they do so in an « out of context » manner that takes over the entire screen. The PDF Embed API however lets you place a PDF within your site’s layout, providing much better control over the position and size of the rendered document. This improved experience also provides deeper integration into the PDF viewer, letting developers listen for events and perform operations on the document. In this article, I’m going to demonstrate a simple, but hopefully really useful example of this.

Imagine a large document covering many pages, for example, a textbook. Your website users, potentially students, could work with the document over many weeks while school is in session. If the document is a few hundred pages long, it would be incredibly useful to remember where they were in the document when they start reading again. While a large PDF may have bookmarks, even then they could only be for chapters or other sections, not the exact page the user last read. Luckily, the Embed API provides a method to help with this. Let’s take a look!

Source de l’article sur DZONE

4 décembre 2021/par Service comm.

Square Rebrands As Block

A few days ago, the big tech news was that Jack Dorsey was stepping down from his role as Twitter CEO to focus on Square, the payment processor he founded in 2009.

Two days later, it was announced that Square will now rebrand under the umbrella of Block. Like Meta and Alphabet, Block is a parent company — Square will remain Square, just as Facebook is still Facebook. The only actual product name change is that of Square Crypto will now be known as Spiral.

The move has reportedly been in the works for over a year. However, despite the marketing team’s best efforts to spread around the reference, it’s reasonably clear that Block is a reference to blockchain, the technology that powers cryptocurrency.

Dorsey has been a longtime advocate of cryptocurrency, particularly Bitcoin. With PayPal and Mastercard entering the crypto space, it was only a matter of time before Square’s focus was redirected away from legacy money.

The recent Meta rebrand was much scorned, but the new Block brand has been received with considerably more positivity. So what’s the difference?

Typically corporate rebrands, especially those in fintech, are detestable exercises in cowardice, where all trace of personality is driven out in favor of a nice safe sans-serif and a logomark as some form of tick or wave. Not so the Block branding, which feels like a cross between an Apple store and a hardcore night out in Berlin.

Yes, the logotype is sans-serif — it’s Pilat, to be precise. But the characters are pleasingly wide, and the overall shape of each is a rounded square. So much so that the ‘K’ feels a little out of place due to the rounded characteristics of the other letters. Most obviously of all, it’s uppercase, which in itself is nothing new, except that it breaks from the recent trend for lowercase. It’s incredibly refreshing to look at a brand that doesn’t mimic everything else in the space.

The logotype is crowned with a pleasantly brave mark; a morphing, twisting cube across the surface of which rainbows of gradients dance and play as it flips and spins. Interestingly, the logomark’s animated form is considered the primary version, with static versions only to be used when required.

The logo isn’t perfect — clearly, a design so dependent on color lends itself far better to dark mode than anything else — a good logo should be robust enough to work well in any context. However, I really like the design’s ambition to define itself, and the playfulness with which it does it.

The post Square Rebrands As Block first appeared on Webdesigner Depot.

3 décembre 2021/par Service comm.

How to Kickstart Your UX Career in 2022

Actualités

As a UX designer, you get to work on creative, rewarding, even life-changing projects. It’s an industry with flexible working and countless opportunities. All this, and you get paid well too.

It doesn’t matter if you’re not a creative prodigy, or a tech grandmaster; you can learn to become a UX designer with the right mindset, a few tools you pick up along the way, and some committed learning.

By the time you’ve finished reading this post, you’ll be well on your way to designing your new career.

You can do this, let’s get started…

What is a Career in UX like?

Every career is different, but generally speaking, a UX designer works on making a user’s interaction with a product or service (normally websites) as intuitive as possible.

Just as a golf architect designs the layout of a golf course to flow through greens, tees, and holes, with buggy paths for access, and the odd bunker to add a challenge; so a UX designer creates the optimum experience for a site. A golf architect doesn’t need to reinvent the game of golf, and neither does a UX designer need to reinvent websites.

A golf architect will not design a course with a 360-degree sand bunker surrounding a tee (well, they might, but they really really shouldn’t), or a hole too small for a golf ball. In the same way as a UX designer, you’re not going to design an ecommerce site with a cart in the bottom left, a non-existent search feature, or hidden pricing.

The best thing about being a UX designer is that you don’t need to spend years in formal education to get qualified. The flipside is that if you want to be a great UX designer, it’s not a walk in the park.

Every designer is different, but some of the main traits of successful UX designers are: an enjoyment of problem-solving; good listening skills; curiosity; open-mindedness; attention to detail; creativity; communication skills; process-driven; and adaptability.

Before committing to this career path, check out a few podcasts, and read a few blog posts, to dip your toe in the water.

Still interested? Excellent, the next step is…

Getting Certified as a UX Designer

UX design is a practical skill. It’s all well and good knowing the theory, but without practice putting the theory into action no one will give you a chance to prove what you can do. So how do you get practical experience? You get certified, and there are three popular options: online, in-person training, or self-taught.

A good UX syllabus will include portfolio-building projects, tool mastery, networking opportunities, and even 1-2-1 mentorship. As well as learning the fundamentals of UX, you’ll cover user research and strategy, analysis, UI design, and more.

Option A: Online Course

Online courses tend to be much easier on the bank balance, as well as being flexible, which means you can fit them around your current job. You can work at your own pace, and in many cases choose modules that interest you, once you’ve completed the basic introduction.

There are many online course providers, including Coursera, Udemy, Skillshare, and Career Foundry.

Whatever option you choose, it is a good idea to get as broad a perspective as possible, so consider following more than one course — perhaps mix and match a paid course with a free one.

Option B: In-Person Training

This could be a university course, or a local boot camp where you physically sit in with an instructor and classmates.

This is more expensive, but it provides benefits that nothing else does. Firstly, you’ll have classmates you can bounce ideas off, collaborate with, keep motivated, inspired, and accountable. You can also get real-time, intensive coaching and advice from someone who’s been there, done that, bought the T-shirt (and redesigned it so it fits better).

Seach local boot camps and workshops, check out workshops at local conferences, and ask your local college what courses they offer.

Option C: Self-Taught

Being self-taught is the cheapest of all options. Work at your own pace, where, and when you want to. Watch YouTube videos, read blogs, garner information anywhere you can find it.

This option involves a lot of stumbling around in the dark. The biggest challenge is that you don’t know what it is that you don’t know. For this reason, it can pay to follow the syllabus of a local college course, even if you’re not enrolled and don’t attend lectures.

In reality, all education is self-taught to an extent, even the most prescribed courses need self-motivation.

Some of the most in-demand UX designers in the world are self-taught, so why not? Start exploring UX blogs like Nielsen Norman Group articles, Google Design, UX Planet, and UX Matters.

Mastering UX Tools

Recruiters and hiring managers will seek your technical ability and your experience using popular tools from user research, to wireframing, to prototyping. When you get your first job in UX, the tools you use will be determined by your project manager, so it’s a good idea to have a passing familiarity with the most popular. These will include Maze, Userzoom, Sketch, XD, Figma, Marvel, and Hotjar.

If you’re following a guided course you should get an introduction to at least a couple of important tools. Once you understand one, you can probably pick the others up quite quickly… because, after all… they should be intuitive.

You do not need to know how to code, but understanding the roles, and restrictions of HTML, CSS, and JavaScript is very beneficial. When you get your first UX job, you’ll need to be able to talk about how technologies fit into the plan.

Building a UX Portfolio

Your portfolio is your résumé. The golden ticket. The silver bullet. Amassing a content-rich portfolio is paramount. You don’t need a real-world job to build your portfolio, and you should already have content to add from your course.

You need to demonstrate knowledge of UX tools and processes (what future employers will look for). Case studies that incorporate research, problem-solving, strategy, imagination, and (if possible) results are the best way to do this.

There are a variety of ways of building a portfolio, but the best is taking a real website, and redesigning it. Don’t worry if your first few projects aren’t the best; as long as you demonstrate improvement and growth, that counts for something.

You can showcase your portfolio on sites such as Behance, Dribbble, or preferably create your website.

Landing Your First Job in UX

Start combing the job boards to see which companies are looking for UX designers. There’s a global shortage of qualified UX designers, so if you can’t find anything you’re looking in the wrong place! Make sure your whole network, from your Mom’s hairdresser to the barista at your favorite coffee place know that you’re looking; you never know where a good lead will come from.

Some companies are looking for UX skills as part of other roles. Others are looking for full-time UXers.

Don’t be disheartened if “Junior UX Designer” positions require 2 years of experience; HR just throws this in as a pre-filter. If you think you can do the job, apply anyway, if your portfolio’s good you might get an interview regardless, and if you get an interview they think you’re worth taking the time to meet.

If you don’t get the job, don’t be downhearted. Remember: every time someone else gets a job, that’s one less person you’re competing with for the next job.

Quick Prep on Some Common UX Interview Questions:

What’s your interpretation of a UX Designer?
What has inspired you to become a UX Designer?
How do you take constructive feedback and non-constructive feedback?
Who, or what companies, do you look up to in this industry, and why?
What’s your process with a new project?

Good Luck!

So, now you know what it takes to get into the field, it’s time to start applying yourself to this newfound and richly rewarding career. As the great writer Anton Chekov said, “Knowledge is of no value unless you put it into practice.” So get out there and practice, practice, practice. Add and add and add to your portfolio.

To become a UX Designer, enroll in a great course, build your portfolio, network, apply for roles, and always be learning. Always be open to new ideas and suggestions. There’s a lot of leg work, but the juice will be worth the squeeze.

Featured image via Unsplash.

The post How to Kickstart Your UX Career in 2022 first appeared on Webdesigner Depot.

_____________________________________________

Another excellent guide to help people to prepare for job interviews to give them the best possible chances of success and not make some common mistakes can be find here : https://www.ireviews.com/interview-resources/

1 décembre 2021/par Service comm.

3 Essential Design Trends, December 2021

The year might be coming to an end, but plenty of design trends are still beginning to emerge. It’ll be interesting to see how many of these website design elements remain popular into the new year. From vintage elements to circles to happier feelings, there’s a lot to play with here.

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

Old-School Print Inspired

Vintage design elements seem to circle back in new iterations at a pretty frequent pace. This time website designers are finding inspiration from old-school print design.

These projects mimic the look of old newspapers and magazines with styles that look like news or advertising content. One of the most exciting takeaways might be color, with beige backgrounds that almost seem like aged paper.

Note the font choices, scale, and imagery as well. All of these things have an old-school feel that’s modern enough to help encourage interaction.

Each of these designs keeps visitors engaged with trendy effects that pair with the vintage aesthetic so that while there’s an old-school look, the overall design is modern and fresh.

The portfolio of Niccolo Miranda feels like a “WAR” day on the front page of a major newspaper, but with modern touches – computer illustrations, animated images, and button-style icons.

Enfant Sauvage Music takes on the feel of an old-style newspaper or magazine ad with a single color design and grainy imagery. An oversized funky pointer on hover and side navigation keeps the design interesting.

Kalso uses a giant timeline with typography and effects that mimic the era on the screen. Animation and motion keep the design with the times and on-trend.

Center-Screen Circles

Circles seem to be a website design trend that just never goes out of style – it only evolves.

The newest iteration includes center-screen circles. And you can use them in all kinds of different ways. The nice thing about a circle is the shape is innately harmonious and can pull a design together and make everything feel together and unified.

They can be an excellent container for text or other elements or serve as a button.

Circles work with almost any overall design pattern, in any color, and with virtually any type of image or video. The shape is practically perfect! (That’s why it’s a trend that never really gets old.)

Each of these examples uses a center-screen circle in a slightly different way.

Aflote uses a center circle as part of its overall branding effort and to help draw the eye from the split-screen images to the center arrow, encouraging users to scroll to the next bit of content. Color helps here, and the circle is a container for brand and some other content with a nice layer on top of the images.

One Ocean Science uses one of the oldest circles we know – the globe – as a dominant art element that rotates in the center of the screen. The layer on top – the exact text in multiple languages – gets extra attention thanks to the center placement. The design also uses a top left corner circle for branding and a bottom right corner circle as a CTA, helping create a visual flow through the design from top to center to bottom to click.

To Be Love uses a fantastic animated set of concentric circles to pull together the name of the event and draw interest to the CTAs. The circle is just the right size in a sea of black sky to draw the eye to the content in the middle of the screen.

Lighter, Happier Designs

After a couple of years of pandemic life and a world that’s just been a little less than cheery, website designers include lighter, happier elements to projects. This might just be the design trend we all need right now.

This effect can be designed in several ways, including color, imagery, animation, scale, and even typography. It’s hard to pinpoint what makes a design lighter and happier until you see it, but when you do, you’ll know it. (It might just be that little grin at the corner of your mouth when you see it.)

Meanpug uses fun, animated illustrations as a load screen with a full-text homepage (you’ll have to click through to see it). Between color and animation, you can’t help but feel good looking at the design. What might be most interesting is that the website is for a marketing agency that works with law firms. (Probably not what you expected at all.)

Happy smiling faces are hard not to feel good about. Even the devil emoji seems somewhat joyful. Add in big, bold typography and the yellow smiley, and the world just feels a little less dark.

Oatly uses lots of small elements in a cartoon-style aesthetic that is light and interesting. In addition to fun fonts and animation, all of the words on the website also contribute to a feeling of ease and happiness. It’s a solid strategy for sales; make people feel good about what they are thinking of buying to help propel them toward a purchase.

Conclusion

One of the most exciting things that we’ve seen with design trends in the past year is how world events – from the pandemic to isolation to working remotely – have impacted design projects as a whole.

We’ve seen fewer faces, more illustrations and typography, and an overall shift in feeling to some of the lighter, happier design elements featured here. Cheers to 2022!

The post 3 Essential Design Trends, December 2021 first appeared on Webdesigner Depot.

29 novembre 2021/par Service comm.

Is it Time to Transition to JAMStack?

Jamstack (JAMstack), is one of the most popular (and rapidly growing) tools for app and website creation. A unique ecosystem of functionality, Jamstack promises developers the support they need to create powerful websites and progressive applications.

For a while, Jamstack was mostly written off as just another buzzword in the developer space. However, today, it’s growing to become a powerful investment for many business leaders. Even big companies are getting involved, like Cloudflare, with Cloudflare pages, and Microsoft with Azure Static Web Apps. Elsewhere, we’ve seen brands like Shopify, PayPal, and Nike getting involved too.

So, what exactly is Jamstack, and is it time you transitioned over? Let’s find out…

What is Jamstack?

Jamstack, otherwise known as “JAMstack,” is the name of a developer ecosystem made up of JavaScript, APIs, and Markup (hence: JAM). The solution is a web development architecture allowing developers to access static website benefits, such as higher security and better performance, while still unlocking dynamic database-oriented CMS.

The Jamstack solution allows companies and developers to build a dynamic website where real assets are pre-rendered static files in a CDN. The dynamic environment runs on JavaScript client-side, through serverless functions.

For a better insight, let’s compare Jamstack to the LAMP stack development strategy, which originated from the four open-source components many developers used to build sites: Linux, Apache HTTP, MySQL, and PHP.

With LAMP, each user request for a page forces the server to query a database — unless the page is cached — and combine the result with page markup data and plugins. Jamstack websites serve pre-built optimized assets and markup solutions quickly because the files are already compiled on a CDN. There’s no need to query the database.

Jamstack workflows dramatically reduce cumbersome issues with development and excess maintenance, making them highly appealing to developers.

What Are the Benefits of Jamstack?

Jamstack won’t be the ideal development tool for everyone, but it has a lot of benefits to offer. By fetching HTML from a CDN, the system doesn’t have to wait for HTML to be combined and returned to clients. The solution also provides an improved developer experience with static methods.

Using Jamstack, developers can build fantastic static files ready to serve by request, hosted on a global CDN. Some of the biggest benefits of Jamstack include:

Performance: Because you’re serving pre-built static files from a CDN directly, you’ll achieve much faster loading times, unmatched by typical server-side rendering options. Because you’re serving static files, you’re also better equipped to handle any traffic spikes you might encounter, with minimal slowdown.
User experience: Better website performance significantly improves user experience and website traffic, as well as SEO efforts. User experience has always been a critical factor in ensuring the success of a website, and it’s essential to keeping your customers around for as long as possible. Websites optimized for performance will always delight users.
Security: With Jamstack, there are no servers or databases to worry about. You use third-party solutions to handle these issues for you. The architecture of Jamstack means the back and front end of your development processes are decoupled, and you can rely on APIs to run server-side processes easily. Jamstack also comes with security benefits other approaches can lack. Clear separation of services is essential here.
Hosting and scaling: Scaling and hosting can often be problematic in the development world, but because you’re serving files from a CDN, you’re less likely to encounter issues. CDNs are almost infinitely scalable, so you get excellent extensibility built into your development environment. CDN hosting for static files is also cheaper than traditional hosting, so you can keep costs low.
Maintenance: Jamstack makes it easy to push your front end to the edge rather than managing infrastructure directly. Ditching plugins, databases, and other hosting services can help you to save more time and money on a significant scale.
Developer experience: From a developer perspective, there are tons of benefits from Jamstack. You get the ease of a Github, CI/CD, CDN flow, and auto previews with simple rollback to reduce the need for backups. Local developer environments and the ability to run and debug cloud functions locally are all fantastic.

Does Jamstack Have any Limitations?

In a lot of ways, Jamstack is an innovative and revolutionary solution for development. It can help you to create a far more engaging website and present your company in an incredible way. Of course, that doesn’t mean there are no limitations to be aware of.

Jamstack is developer-friendly, for instance, but it’s not beginner-friendly. You will need at least some knowledge of web development to start unlocking the benefits. You’ll need to understand things like Vue or React, but you should develop a tool anyone can use with a bit of work.

There’s also a handful of things you can’t pre-generate, like user-specific and real-time data. So, this means you may not be able to use Jamstack effectively on projects requiring these kinds of data. Building an analytics dashboard, for instance, probably isn’t a good idea with Jamstack. Other issues for some developers may include:

API complexity: It can be overwhelming to try and find the right solution for your needs among so many different options. Of course, this could also be something you’d say about the WordPress ecosystem and its huge variety of plugins. An API usually won’t break your production website, at least.
Long building processes: If you have a large number of pages, there’s more likely to be an extensive building process to think about. Whenever you make a change to a single page, even a little one, you’ll need to rebuild your entire website. This is a problem if you run into a website with thousands of pages. There are solutions to this problem available, however.
Handling dynamics: Going with Jamstack doesn’t mean abandoning your backend. An important part of the approach is accessing serverless functions, which are becoming more effective over time. These serverless functions can also be executed on the edge. The backend parts of your website will require regular maintenance as they scale.

Best Jamstack Tools to Check Out

Now you know the basics of Jamstack, let’s look at some of the tools you can use to design an incredible website or application within the Jamstack environment.

The Git Tool Landscape

There are tons of tools within the Git ecosystem common among Jamstack developers. Starting with Git itself. Git represents a powerful free, and open-sourced distributed version control system. With this solution, companies can handle everything from small to enterprise-level projects with efficiency and speed. The solution is extremely easy to use and learn, and outclasses a range of tools like Perforce, ClearCase and Subversion.

GitHub Pages and GitLab pages are two hosting services for Git repositories with built-in services to host static pages from out of your codebase. This makes the two solutions fantastic for when you’re building a Jamstack website. You can access the functionality for free too.

GitLab gives you a comprehensive DevOps platform to work with, where you can enjoy a comprehensive CI/CD toolchain out of the box. The comprehensive solution, delivered as a single application, changes the way security, development, and Ops teams integrate and collaborate. Gitlab helps to accelerate software delivery on a massive scale.

AWS Amplify

AWS Amplify, created by Amazon Web Services, is a development platform packed full of useful features for people in the Jamstack environment. The Amplify offering aims to reduce the complexities associated with Amazon Web Services for mobile and web deployment. You get 12 months of hosting for free with new accounts, and you get Storage with Amplify too.

The Amazon Amplify solution dramatically improves the regular AWS workflow, especially if you’re just a novice user. There’s a huge documentation hub to help you too, which is way more convenient than Amazon’s usual documentation solutions. Amplify is still accessed from a somewhat bloated console, however.

With AWS Amplify, companies can access features like a comprehensive data store to sync data between the cloud and websites. There’s also easy-to-use interface access across all different categories of cloud operations. The service works well with a range of JavaScript central tools.

Netlify

Netlify is a pioneering solution in the Jamstack environment, allowing users to go dynamic with their websites and applications on their own terms. You can access a range of add-ons and integration, access your favorite tools, and make your own. The flexible environment enables developers to run websites on a multi-cloud infrastructure designed for speed and scale automation.

Built to be entirely secure from the ground up, Netlify makes it easy to build a site that’s custom-made for performance and deployed directly. You don’t need to worry about managing, scaling and patching web services, which means you can more quickly implement your Jamstack architecture.

Unlike other large legacy apps, Jamstack projects are neatly separate from your front-end pages and UI from the backend databases and apps with Netlify. Using this service, the entire front-end can be pre-built with highly optimized static assets and pages, and developers can deliver new web projects faster than ever before.

Next.JS

Inspired by the functionality of PHP, Next.JS is a solution for pre-rendered JavaScript modules. The solution allows developers to easily export the components of their apps and perform individual tests to determine how each element works. You can also access a wide range of components and modules from NPM. The Next offering allows developers to save time, removing the need to use webpack bundles and transform with compilers.

The full solution is extremely intuitive, ensuring developers can create solutions quickly. What’s more, the technology you build will allow you to load only the bundle needed from your JavaScript workflow, rather than all the JavaScript at once. Pre-fetching, one of the features of Next.JS, also picks up where standard code-splitting leaves off, allowing for optimized bundles of code to load seamlessly.

Next.JS also supports hot-module replacement. This means instead of reloading an entire application when you change the code, you only recreate the modules you’ve altered.

Angular

Probably the most widely-recognized of all the JavaScript frameworks, Angular, designed by Google engineers, appeared first in 2012, offering developers a new way to create dynamic pages. Before this technology, there were other opportunities for creating dynamic pages, but they were nowhere near as convenient or speedy.

Angular is probably one of the most essential tools companies can use when building a Jamstack website or environment. The front-end web development tool attracts developers from all over the world. Every version is packed with features and constantly upgraded to ensure you can generate the best results.

Angular extends HTML file functionality with powerful directives, and it requires very little effort to enable these directives too. All you do is add the ng- prefix to your HTML attributes and you’re ready to go. Angular also allows developers to create widgets leveraging editable data with two-way binding. This means developers don’t have to write code that syncs constantly between the model and view.

With Angular, developers also get access to things like virtual scrolling, which can help with displaying large lists of elements performantly, rendering on the items that fit on the screen to reduce loading times.

React

Another must-have tool in the JavaScript world for Jamstack, the React solution was launched first in 2013, and has won thousands of customers across the globe thanks to fantastic functionality. Today, the full landscape is maintained by Facebook, along with all the members of the standard developer community. The solution is used by some of the biggest giants in the tech industry, like Netflix, PayPal, and Apple.

React is a true pioneer in the Jamstack ecosystem, with its sensational approach to simple and straightforward solutions for JavaScript management. You’ll be able to access batched and virtual DOM updates, which makes it easier to unlock components quickly, and write your components the way you see them. There’s also the added benefit that React is compatible with a lot of tools.

You can build a comprehensive app or website with the help of React, and you’ll have no trouble accessing some of the top features, particularly with plenty of support available from the React community.

Gatsby

Created from the ground up to improve user experience on a comprehensive level, Gatsby is a static site generator with heavy focus on things like SEO, performance, and accessibility. The solution offers plenty of out-of-the-box features to help developers deliver the most immersive solution for their users, without unnecessary complexity.

Gatsby users pre-configuration to develop static websites giving developers faster loading pages, stronger code splitting, and server-side rendering. You can also access features like data prefetching, asset optimization, and quick image loading. Gatsby boasts excellent documentation and starter packs to help you get your site up and running more quickly.

The GraphQL data layer of Gatsby also means the system can collect your data from anywhere, including your CMS, JSON, Markdown, and APIs. More than just your standard site generator, this is a tool built specifically with performance in mind.

Agility CMS

Developing an effective Jamstack website means having access to the right CMS technology. Agility CMS wasn’t the first CMS solution to support Jamstack, but it is one of the better-known options. As one of the first headless CMS solutions to hit the market, the company has quickly captured the attention of a huge range of developers worldwide.

Agility CMS is a Jamstack pioneer, capable of helping developers to build a foundation for any online ecosystem. The technology is an API-first CMS with support for REST APIs, so developers can connect all the third-party apps and front-end frameworks they like.

The technology also gives developers the freedom to code their solutions their way. You don’t have to follow a specific set of guidelines for how content is created, but templates are available to fast-track development. Agility CMS also hosts and abstracts your database, so you don’t have to worry about connection strings, backups, and maintenance.

With a strong content architecture to help companies manage digital content and a partnership with Gatsby, Agility is ideal for Jamstack development strategies.

Building Your Jamstack Website

The Jamstack solution is more than just a buzzword in today’s development world. This unique approach to building incredible development experiences delivers an excellent advantage to both developers and their end-users. Fast, scalable, and full of solutions for customization, Jamstack is a powerful way to bring websites to life with simplicity and speed.

Every day, more companies take advantage of the Jamstack environment, and we’re constantly seeing a wide selection of new tools, APIs and offerings emerging to help enhance the Jamstack landscape too. This environment is definitely worth consideration for any developer looking to significantly speed up their development strategy.

Featured image via Pexels.

The post Is it Time to Transition to JAMStack? first appeared on Webdesigner Depot.

25 novembre 2021/par Service comm.

Live Now: Top 10 Black Friday 2021 Deals for Designers and Agencies

It’s that time again. Black Friday. November 26, to be exact. And the many enticing deals you’ve been looking forward to at this time of the year are here as well.

There are three types of Black Friday shoppers. Those who are successful because they have prepared. Those who are successful because they got lucky. And, those who let some good deals simply slip away.

Your best bet, of course, is to be prepared, which is the purpose of this guide.

As you go down this list, you’ll find discounts, some pretty amazing offers, a few surprises perhaps – and plenty of inspiration.

We’ve been keeping close tabs on the various Black Friday discounts and promotions, and we’ve corralled the best of the bunch for you.

Starting with:

1. Brizy – The No-Code Website Builder For Non-Techies

Brizy is a fast and easy-to-use website builder for designers and agencies. Take advantage of Brizy’s Black Friday special and tap into the skills of a team that has been creating website-building tools for over 11 years.

This premier website builder gets better with each update.

Web designers can choose between Brizy for WordPress and the Brizy Cloud website builder, which includes hosting;
Agencies can choose among several white-label options;
Brizy brings power to the novice; use the pre-made designs or start with a blank page and let the imagination be the guide.

Black Friday is a time to take advantage of great deals, and this year is no different.

Big discounts are available on Brizy’s white label agency plans;
Participate at no cost to win a MacBook PRO;
Partner perks and discounts;
And exclusive new designs.

Design or coding experience is not a requirement to use Brizy’s drag and drop visual builder.

Click on the banner to take advantage of these great Black Friday specials.

2. Portfoliobox

A 50% discount on any portfolio website builder would seem like a good deal. On the other hand, getting one at 50% off that enables you to quickly create a portfolio website that reflects your creative personality and will truly set you apart from the crowd is definitely worth taking advantage of.

Portfoliobox offers:

Mix and match templates to help achieve a unique look;
Powerful eCommerce functionality built right into the platform;
Safe and secure private client galleries;
An included Domain (custom domain with Pro plans);
Fantastic 24/7 support to keep problems to a minimum;
Affordable, transparent pricing plans that let you know what you are getting before you buy.

Click on the banner to find out more about this fast, affordable, and easy to work with a portfolio website builder for creatives.

3. wpDataTables

wpDataTables is a popular, power-packed plugin that can manage vast amounts of data in seconds and organize it to build a table or chart the way you want.

wpDataTables and charts are responsive, customizable, and easy to edit and maintain;
wpDataTables readily accepts data from a variety of data sources, from multiple database connections, and in the most used formats;
Tables and charts can be configured to nicely blend in with other website content and a website’s overall design, plus it is easy to add spice to a table or chart by using colors, adjusting font sizes, and highlighting key data using conditional formatting.

wpDataTables features Elementor and Gutenberg integration, provides the ability to connect WordPress tables with Google API, allows cascade data filtering, and much more.

Click on the banner to take advantage of the 30% off Black Friday special.

4. Amelia WordPress Booking Plugin

Amelia can be a genuine time and money saver for a variety of business types. Amelia automates and streamlines a business’s booking process.

Amelia relieves business owners and managers from the task of managing multiple appointments and events;
Clients and customers love the ability to make and manage their appointments 24/7;
Bookings and events are managed from a single platform, even when multiple locations are involved.

Annual and lifetime subscriptions are available.

5. Mobirise Free Website Builder

As it is an offline builder, Mobirise does not tie you to any platform, you can host it anywhere, and you have total control over creating the website you have in mind.

Mobirise:

is drag and drop and easy and simple use;
is based on the latest Google AMP or Bootstrap 5, so your site will be mobile-friendly and crazy fast;
comes with eCommerce, huge selections of themes, blocks and templates, and a shopping cart.

Mobirise is free for both personal and commercial use.

6. Slider Revolution

There is a difference between an “interesting” website and one whose WOW effects cause it to stand far above the competition.

Slider Revolution specializes in WOW effects that can take any website to the next level, and it can be yours on Black Friday at a 33% discount on all licenses.

The Slider Revolution package includes:

Innovative templates and add-ons;
Advanced automation and special effects tools.

Grab the Black Friday offer now.

7. Getillustrations Bundle – Commercial illustrations for the web

Digital illustrations help attract attention to and pique interest in your website.

Getillustrations.com features a package of more than 9000 commercial web and app illustrations in a wide range of topics.

This package features all the design formats you’re likely to need, e.g., Ai, SVG, PNG, Figma, Sketch, and more;
Great illustrations to spice up landing pages are included.

The package is available at a 25% discount. Use coupon code EliteDesingers25.

8. Litho – Multipurpose Elementor WordPress Theme

Litho is a creative, modern, and highly customizable theme that can be used for any type of business niche as well as for creating eCommerce, blog, and portfolio websites.

This multipurpose Elementor WordPress theme’s features include –

36+ ready home pages, 200+ creative elements, and a 300+ template library;
One-click demo import;
Top loading speed and SEO result capabilities.

Litho also features detailed online documentation and top-of-the-line customer support.

9. 8bio – Linktree Alternative

Instagram and TikTok enthusiasts, take note!

With the 8bio tool at your fingertips, you can add a clickable URL to your social media platform profiles so visitors can visit your website, product page, or any other important page.

8bio offers:

Beautiful skins and catchy animated backgrounds;
The ability to link to your own domain or to *.8b.io;
Powerful SEO and tracking options.

The 8bio tool can also be used for your Twitter, Facebook, and YouTube posts.

10. XStore – Highly Customizable WordPress WooCommerce Theme

XStore is designed to work with the best page builders on the market and is fully compatible with the Elementor and WPBakery builders.

The XStore package includes

$510 worth of carefully handpicked Premium Plugins for WooCommerce;
More than 110+ awesome Prebuilt Shops;
A built-in AMP for WooCommerce, a Full Ajax Shop, multi-vendor support, and much more.

Become one of XStore’s more than 60,000+ happy customers by taking advantage of the Black Friday special.

Knowing that it’s the early bird that gets the worm, we’ve worked hard to place before you and your fellow website designers and agencies this enticing selection of the best Black Friday offers.

You will no doubt find some of the products familiar. A few might not be. In either case, the opportunities are here for you to get some great deals on some premier products.

Happy shopping!

The post Live Now: Top 10 Black Friday 2021 Deals for Designers and Agencies first appeared on Webdesigner Depot.

23 novembre 2021/par Service comm.

Creative Problem Solving for UX Designers

It’s normal to pull up sharp in front of a problem; after all, if there was a known solution, it wouldn’t be a problem. But knowing that it’s normal, doesn’t make encountering problems any less frustrating. So how do we avoid sitting in front of a UX problem for hours, achieving nothing?

That’s what creative problem solving is all about.

In this post, we’ll explore creative problem solving, and how it can help you as a UX designer. Then we’ll analyze how you can solve UX problems in a few, easy-to-remember steps. By the end of this article, you’ll have all the tips you need for UX problem-solving.

What is Creative Problem Solving?

Creative problem solving is a term developed by Alex Osborn, the founder of the Creative Education Foundation. In a nutshell, this term is about overcoming challenges in our work lives through innovative solutions. But, of course, such solutions vary by profession.

For UX designers, creative problem solving is about solving UX problems with efficient tactics, that work. And that’s precisely why UX problem solving is so essential because following a specific method can help us avoid getting stuck.

Whether you are a newbie or an experienced designer, you are probably focused on projects that require you to solve problems. If you have never had a problem before, you must be a superhero; for us mere mortals, here are the steps we need to follow to solve a UX problem:

UX Problem Solving in 5 Easy Steps

Delivering a great UX solution is influenced by two key parameters: user research and creative problem-solving. Suppose you have done your user research and are currently looking for an original solution to a problem. In this case, the methodology below will be handy:

1. Identify the UX Problem

I know this may sound obvious, but think about it. How many times have we lost days because we didn’t identify the real problem? If you are solving the wrong problem, it does not matter if your solution is original and innovative.

That’s why the first thing you need to do is think about the problem. Ask yourself what the real problem is, and then get to work solving it. Identifying the problem may take some time, but it will prove beneficial to your project in the long run.

2. Clarify the UX Problem

Now that you have identified the UX problem, it’s time to demystify it. In this step, you could create a user journey plan. It does not have to be perfect; some low-fidelity sketches are more than enough.

Set a timer and start visualizing your solution on paper. Remember, sketching is not about perfection or fine details. Once you have created a customer journey you are happy with, it’s time to move on to the next step.

3. Use Analytics

UX design isn’t about design per se. It’s also about numbers and data. This is why analytics are critical to UX problem-solving. Once you have gathered some data from users and competitors, it’s time to create patterns. This will help you better understand the problem and change your drafts accordingly.

Numbers and data alone can help you a lot if you combine them with an original idea. However, facts alone are not enough, and your original story will not be compelling without them. So what’s better than combining them?

4. Use Your Feedback

So you have come up with an innovative solution to the UX problem. You have successfully combined this idea with essential data. Unfortunately, your work is not yet done.

The next step is equally important. Once you have polished your ideas, you should share them with colleagues and/or customers.

It’s not easy to get feedback for your UX mapping, but it’s very constructive and will ultimately make you a better designer.

5. Solve the Problem

The last step is also the most fun. Once you have listened to people’s feedback, you can redesign your original solution. Then you are just one step away from solving the UX problem. Now it’s time to digitally redesign your idea.

This is the step where fine details matter. Creating a high-fidelity wireframe is not easy, but most UX designers have the knowledge and tools to get it done.

UX Problem Solving: Useful Tips and Tricks

Be Methodical

In my opinion, this is the most useful tip when it comes to UX problem-solving. You do not always have to be in a hurry. In the early stages of a project, try not to get distracted by other problems. Focus on finding the real problem.

Once you are sure you have found it, you can move on to finding the best solution. Then move on to the next step and so on. It becomes clear that being methodical is a brilliant tactic.

UX Problem Solving is All about the Ecosystem

UX problem solving is not about fine details. So try to care less about the design and more about the ecosystem you want to create. That will help you gather all the data you need, from user opinions to analytics.

Low-Fidelity vs. High-Fidelity Wireframes

Starting with sketches and low-fidelity wireframes is a brilliant thing to do. Whenever I have tried to start a project directly with high-fidelity wireframes, I have gotten bogged down in details.

For this reason, pen and paper should be your best friends in UX problem-solving. Sketches help you explore different approaches and get the feedback you need.

Explore Different Tools/Approaches

When it comes to solving a UX problem, there is usually one efficient solution. But that is not always the case. In most cases, we have to consider different alternatives and identify more than one critical interaction.

For this reason, feedback is also crucial for UX problem-solving. Your colleagues and customers will help you find the best method. Try to accept criticism and be open when listening to feedback. This way, you will ensure that you will find the best possible solution.

Wrap Up

Solving a UX problem is not easy. However, if you identify the real problem and illustrate different approaches, you will be on the right track. Also, do not neglect to use the data and feedback you collect. The more tools you have in hand, the better UX designer you will be.

Featured image via Unsplash.

The post Creative Problem Solving for UX Designers first appeared on Webdesigner Depot.