Thanks to services provided by AWS, GCP, and Azure it’s become relatively easy to develop applications that span multiple regions. This is great because slow apps kill businesses. There is one common problem with these applications: they are not supported by multi-region database architecture.
In this blog, I will provide a solution for the problem of getting Kubernetes pods to talk to each other in multi-region deployments.
The underlying theme of this month’s collection of new tools and resources is development. Almost every tool here makes dev a little easier, quicker, or plain fun. There are a few great tutorials in the mix to help you get into the spirit of trying new things and techniques.
Here’s what is new for designers this month…
Cryptofonts is a huge open-source library of icons that represent cryptocurrencies. There are more than 1,500 CSS and SVG elements in the collection. Cryptofonts includes all scalable vector icons that you can customize by size, color, shadow, or practically anything else. They work with Sketch, Photoshop, Illustrator, Adobe XD, Figma, and Invision Studio, and there’s no JavaScript.
Reasonable Colors is an open-source color system for building accessible and beautiful color palettes. Colors are built using a coded chart. Each color comes in six numbered shades. The difference between their shade numbers can infer the contrast between any two shades. The differences correspond to WCAG contrast ratios to help you create an accessible palette. This is a smart project and a valuable tool if you work on projects where color contrast and accessibility are essential (which is all of them).
Chalk.ist is a fun tool to make your code snippets look amazing. Add your code (there’s a vast language selector), pick some colors and backgrounds, and then download it as a shareable image. Your code has never looked so beautiful!
WeekToDo is a free minimalist weekly planner. Improve productivity by defining and managing your week and life easily and intuitively. Plus, this tool is focused on privacy with data that is stored on your computer (in your web browser or the application). The only person who has access to it is you.
Bio.Link is a tool that collects all your links – from social media to blog posts to any other kind of link you want to share. It’s free to use, includes 15 design themes, visitor stats, and is super fast.
Spacers are a set of three-dimensional space characters that you can use in projects. Characters are in multiple poses and ultra high-def formats to play with.
11ty is a super simple, static website generator. Try it for small projects and read the documentation to see everything you can do with this tool.
Scrollex is a react library that lets you build beautiful scroll experiences using minimal code. You can create scroll animations in all kinds of combinations – vertical, horizontal, almost anything you want to try. The documentation is fun and easy to understand if you’re going to see how it works.
GetCam is an app that lets you turn your smartphone into a webcam for your computer. It works with any iPhone and a Mac or Windows computer. It works with most video conference and streaming tools as well as browser-based apps.
Flatfile is a data onboarding platform that intuitively makes sense of the jumbled data customers import and transforms it into the format you rely on. You won’t have any more messy spreadsheets or have to build a custom tool.
Loaders is a collection of free loaders and spinners for web projects. They are built with HTML, CSS, and SVG and are available for React and copypasta.
Lexical is an extensible JavaScript web text-editor framework emphasizing reliability, accessibility, and performance. It’s made for developers, so you can easily prototype and build features with confidence. Combined with a highly extensible architecture, Lexical allows developers to create unique text editing experiences that scale in size and functionality.
This tutorial is a primer on why the img element is such a powerful tool in your development box. Images are so prominent that they are part of the most important content in over 70% of pages on both mobile and desktop, according to the largest contentful paint metric. This post takes you through how to better optimize and improve core web vitals simultaneously.
Building a Combined CSS-Aspect-Ratio-Grid provides two solutions for creating the title effect. You can define an aspect ratio for the row or use Flexbox with a little flex grow magic. Learn how to try it both ways.
QIndR is a QR code generator made for events and appointments. The form is designed to capture your event information so you can quickly build and use a QR code for listings and even allow users to add it to their calendars! It’s super quick and easy to use.
On-Scroll Text Repetition Animation shows you how to create an on-scroll animation that shows repeated fragments of a big text element. This is a fun and easy lesson that you can use right away.
Eight Colors won’t do anything for your productivity, but it is a fun game that you may not be able to stop playing. It is a block-shifting game with the goal to shift circular blocks to reach the target given.
Creative Vintage is a pair of typefaces including a thin script and vintage slab serif (with rough and smooth styles). The pair is designed to work together for various uses or can be used independently.
Hardbop is a vintage-style typeface with a lot of personality. It would work great for display, and the family includes seven full-style character sets.
Kocha is a funky ligature-style typeface perfect for lighter design elements, including logos or packaging. It includes clean and rough versions.
Magnify is a large font family with 16 styles and plenty of fun alternates. You can use it straight or with the more funky styles that create less traditional character forms.
Stacker is a fun and futuristic style font with a triple outline style. Use it for display when you really want to make an impression.
The post Exciting New Tools for Designers, May 2022 first appeared on Webdesigner Depot.
Are you a creative person looking for the perfect career path to take? If so, there are not many more creative professions than that of a web designer.
However, becoming a web designer can be challenging, especially if you do not know where to start. For example, do you need to attend college to become a web designer? And what kind of computer and software do you need to own to be successful as a web designer?
This guide aims to answer all these questions and show you the steps you need to follow to build a career in web design.
Generally speaking, a web designer is a professional who creates, manages, and maintains content for the web. Nothing is left out from designing pages and visual elements via programming languages and creating user-friendly websites.
Web Designer (Hard and Soft) Skills:
Web Designer Responsibilities:
If you feel overwhelmed reading this table, don’t be! You do not have to master all of the above skills. No one expects you to either. Becoming a top-notch web designer takes some dedication, but ultimately it’s nothing more than a series of steps. Let’s dive deeper into them.
Let’s start with the most common question, “Do I need to go to college to become a web designer?” Research shows that more than 65% of web designers are self-taught (fully or partially). Of course, that does not mean you can jump into design from the start.
Instead, we recommend that you learn some essential web design elements and how to use them in your future projects. This includes UX (user experience), UI (user interface), protocols, and patterns. The same goes for technical knowledge like programming languages, frameworks, and design software.
So, there are numerous aspects you can explore regarding technical skills. To be specific, your first steps in web design include developing the following skills:
What software do you need as a beginner to start creating web designs? There are numerous apps that will help you gradually enter the fascinating world of web design.
When it comes to CMS platforms, WordPress is by far the most popular in the market. The good thing about WordPress is that it is very beginner-friendly and comes with thousands of pre-built themes and plugins that you can use when creating a website.
But the same is true for InVision Studio. Unlike WordPress, InVision Studio is specifically designed to help web designers prototype and design a website. Finally, when it comes to graphic design software, we recommend you start with Photoshop (for creating visual samples and prints) and Sketch (for UI designs).
Although online CMS platforms like WordPress do not require special hardware, that’s not true for web design and graphic design software. To be precise, both InVision Studio and Photoshop have quite demanding system requirements.
Still, a mid-range desktop or an entry-level gaming laptop can easily handle such applications. You need a reliable CPU, 8 GB RAM, and a dedicated graphics card.
I find working with two screens perfect when it comes to prototyping. You do not need to spend thousands of dollars to buy a laptop or desktop for web design.
As with any other profession, practice makes perfect in web design. Therefore, the good idea is to get involved with personal web design projects before you start seeking clients or applying for job offers. This way, you can gradually acquire the technical skills you need.
Also, by working on some personal projects first, you can build a professional portfolio.
If you want to draw attention to your talent, you should have a comprehensive portfolio as a web designer. This way, potential customers to trust you by having a look at your work and previous experience.
When creating a portfolio, make sure to showcase all aspects of your work and make it user-friendly. In other words, think of your online portfolio representing your talent and treat it accordingly.
Last but not least, before working as a web designer, you should know that there are three main types of web designers: Freelance web designers, Agency web designers, and In-house web designers.
If you prefer to be self-employed and believe that you have the required soft skills, freelancing is probably the best path.
On the other hand, working for an agency or a company is usually easier (especially for beginners) and will provide you with a stable income. But, in the end, it all depends on your needs and preferences.
Being a web designer can be an exciting career. As long as you have the necessary dedication and willingness, nothing will stand in your way.
Learning different aspects of the profession and mastering specific software will only make you better. All you need to do is respond positively to (and ask for) incoming feedback and practice!
Featured image via Pexels.
The post How To Take Your First Steps in Web Design first appeared on Webdesigner Depot.
This article illustrates three scenarios that demonstrate how you can use IBM App Connect to build flows that integrate with apps. The three connectors that we will use for these scenarios are;
You can use App Connect to perform actions on the following objects:
Todoist is a to-do list app that 25 million people rely on every day to keep their lives organized. As part of the Doist design team’s goals for 2021, we aimed to redesign the Todoist Android app to take advantage of the latest Google Material Design guidelines.
In this post, we cover the design decisions and processes behind redesigning the Todoist Android app for Material Design. We explore the Design and Android team’s collaboration practices that brought the app update to life, which resulted in winning the Material Design Award 2021 in the large screen category. Let’s get started!
When we started the project, our design implementation on Android was ready for a major overhaul. The last milestone redesign on Android was initiated after the release of the first Material Design guidelines in 2016. Since then the team successfully worked on continuous improvements to the Android app, but we saw the opportunity to improve Todoist on Android on a more holistic level.
We set out to clean up instances of older UI components, colors, and text styles and update them with the latest Material Design components. We observed that some interactions and navigational patterns had become inconsistent with what users were expecting on newer Android devices and were eager to modernize this experience. With new hardware and software changes in mind, we set out to make the experience on larger phones and tablets even better, so Todoist could take full advantage of the latest generation of devices. Material 2 and 3 provided an incredible new framework to rethink the current app experience. With this in mind, we set out to challenge what a modern Android app should look like and innovate on top of the default user experience.
The team set itself the goal of redesigning our Todoist Android app and aspiring to make it the best-designed productivity app on Android. The project was ambitious and scheduled to take several months to complete. We set ourselves the following targets while working on the project:
The project was kicked off by reviewing the current Todoist Android app implementation, noting down what areas needed to be fixed and what was up to date. While reviewing, we took screenshots of the app implementation for reference. This way we could easily see the current state of the app and compare it to the new design proposals that would be created. Once the review process was finalized, we had a comprehensive overview of the current state of the app and the layout, component, and styling changes we wanted to make.
We continued the project by studying the latest Material Design Guidelines, assessing the components and practices that were most relevant to Todoist.
When the project kicked off in February 2021, Material 2 was the most recent version of their design system. Since Material 2 had already been released for quite some time, we anticipated that design changes to Material would be announced soon at the Google I/O event in May 2021. Rather than wait, because we expected the changes to be iterative, we pushed ahead with our work.
We identified 25 components and UI patterns that we wanted to change across the app. The changes included buttons, forms, menus, sheets, navigation drawer, app bar, system bars, text and color styles, and more. We started by creating a table view in a Dropbox Paper document with the component changes and references links to Google’s Material Design Guidelines.
This components list was a starting point for discussion to plan the scope and complexity of the changes. Close async discussions between the design and development team in Twist and Dropbox Paper comments helped us make decisions about scope and complexity early on and set a solid foundation for the project.
In the initial Material Design study, we also researched inspiring Material Design apps, Material studies, Play Store apps, and Google Workspace apps to learn from their execution.
We started out by studying the Material Design Award Winners 2020 and tested out the products that were showcased. The showcased winners struck a good balance between implementing the Material Design Guidelines while maintaining their own product’s brand within the system. This balance between Google’s guidelines and the Todoist brand was also key for us to get right and so we strived to find this mix across the work we created and implemented in the project.
Along with the MDA winners, we researched the Material Studies that Google produced to showcase what apps could look like with branding and Material Design guidelines applied. It was a great reference to see how far components could be customized while maintaining the core platform principles. The Reply case study in particular offered valuable insight to us as its content type and layout came closest to Todoist. It showcased how components like the app bar, navigation drawer, and large screen layouts worked while being customized.
We continued our research by searching the Google Play store for inspiring app examples. Google Tasks, Press, Periodic Table, and Kayak stood out to us as the level of polish and quality of the apps were on par with the experience we were aspiring to create.
Sometime later in the project when Material You was released (more on that later), we stumbled upon the Google Workspace apps blog post which previewed Material 3 changes that Google was introducing to their own products. It offered a great glimpse at what was to come before the Material 3 Design Guidelines were officially released. This post sparked new internal discussions and further design explorations that we considered for future Todoist Android updates.
As we started to define the new Todoist Android app design language and document the changes, we opted to create a design framework, focusing on creating components rather than designing every screen in the app. This allowed us to consistently apply the design system in the app. We did so by using the previously defined component list that we created during the review and study process.
Core screens from different areas of the app were chosen to demonstrate how the components could be applied. We chose to mock up the Todoist project view, navigation drawer menu, project view edit screen, settings, and project detail view, among others. These screens gave us a good overview of how buttons, forms, drawers, lists, and other components would work together and in different states; selected, pressed, disabled, etc.
During the project, we were transitioning our Doist design system to Figma and started creating our first components in the new Doist Product Android Library. We started by using some components from the Material Design UI kit – Components library from the official Google Figma resource file and added them to our Doist design system. We then continued to build up the Product Android Library file with our Todoist-specific components such as task list & board views, detail views, sheets, colors, typography, etc.
We continued by documenting color and typography changes that were based on the Material Design guidelines. The design team opted to implement a new Design Token framework that would share the same values between our design system and the development implementation. The development team would output the values they had in the current implementation and the design team would analyze which values were needed and which could be merged, changed, or deleted. This informed the new Design Token color and typography system which we then documented and discussed with the team to implement. Later in the project, we were happy to see a similar token system introduced by Material 3 in the latest guidelines which validated our thinking and principles behind the new design system.
The design documentation expanded to hold other edge-case mockups that could sit alongside the design system. We documented different responsive screen experiences between phones and tablets against the previous implementation. Additional sections were created to document the motion that should be used for certain components and screens by referencing existing Material Design guidelines examples or prototyping custom motion in Principle and After Effects. The design spec also touched on haptic feedback that should appear on touch targets, how dark mode should work across the new components, documenting Todoist themes within the new design language, and more.
At Doist, the benefit of the squad is that cross-team collaboration is built into the make-up of the team. Designers, developers, support, and product managers work together in a squad to deliver the project. This close collaboration from the start is key to bridging the gap between scope, estimations, design, development, and delivery. The squad discussed their findings on a daily basis and came up with the best plan of action together.
Designers started by creating components in Figma and shared them with developers in Dropbox Paper. We used screenshots to document the current implementation next to the new designs and linked to the default Google Material Design components. This allowed the team to compare all references in one place. Developers shared their feedback, adjustments would be brainstormed together as the designs were iterated.
Designers on the project would share their work in progress on a weekly basis with the rest of the design team in a design review Twist thread. Here details about the designs were discussed, alternatives mocked up and bigger picture plans made. Design reviews brought up topics like FAB (Floating Action Button) placement, theme options, accent color usage on components, consistency with other platforms, navigation options, and shadow elevation. After thorough discussions and alternative mockups were presented, the design team aimed to find the right balance between Material Design and Todoist brand guidelines. The development team, also part of the design reviews, gave their feedback on the solution and raised technical complexities early on.
Eventually, the design was stabilized and consistencies updated across components and mockups. The design spec was kept up to date so the development team could always review the latest designs in Figma.
As soon as the development process started, the Android team provided early screenshots and videos in Twist threads while they were implementing the design spec. This practice allowed us to review the app implementation early and often. Designers could review the development work and share feedback in Twist, which resulted in getting the implementation to a high quality. Alongside Twist discussions, the team set up a Todoist project to track ongoing issues and fix bugs. Designers logged new issues, developers would solve them and share the new implementation for designers to review.
When the team had the first stable version of the Android app, we shared it internally at Doist to get more insight and feedback. Other Doisters could access the redesign via a feature flag that could be turned on in the app settings and test the new version for however long they wanted. The feature flag system allowed people to give us early feedback on the design decisions we made and report bugs. Feedback was submitted by the wider team through a dedicated Twist thread and designers and developers could discuss how best to address the feedback during the active project implementation.
After we refined the app implementation further and addressed early feedback we opened up the app update to our beta users. Here users had access to the new Android redesign and were able to give us feedback. Our support team gathered feedback and shared it with us in a dedicated Twist thread. The squad aimed to analyze every comment and looked for patterns where we could make tweaks and improvements to the user experience.
As part of these tweaks, we made changes to how the bottom bar and navigation drawer worked. Some users reported frustrations with the way the new bottom navigation and menu drawer worked. In its first implementation, the drawer was half raised when opened and had to be swiped up to be raised again to see the full content list. This was an issue for some users as it was slower to get to the content below the list. So we decided to fully raise the drawer by default when opening. We also made it easier to open the navigation drawer by sliding up from the bottom app bar. This was a small shortcut but it enabled users to get to their content faster.
While we were in the testing phase and about to wrap up the project, Google unveiled Material You, and sometime later the Material 3 Guidelines were published. With the newly announced resources, we went back to study the latest guidelines and references we could find to see where the Todoist Android app redesign fits in and which adjustments we might need to make now or in the future.
Dynamic Color was a big new feature that was announced as part of the Material You update. As Todoist supports many different themes the Material You Dynamic Color feature seemed like a good fit for our product. We decided to prioritize this feature and implement Dynamic Color light and dark themes as part of our Todoist theme settings options.
To implement Dynamic Color, the development team started off by creating a demo prototype that utilized the Dynamic Color system and showcased how we could select from a range of color choices that the system defined based on the wallpaper choice. From there, we tried to incorporate system behavior in our design mockups. We designed a range of different color mockups and components to see which ones could fit with which components. We then came up with a color system that worked for the Todoist app and the new themes. These new Dynamic Color themes would sit alongside our current theme options in the Todoist app settings. From here users could choose between Dynamic Color Light and Dark themes.
Along with Dynamic Color, the team also created a customizable bottom app bar, allowing users to set up the app in a way that’s most convenient to their workflow. The location of the Dynamic Add Button can be changed to the center, left, or right corner of the screen. The order of the Menu, Search, and Notification buttons can be rearranged to best fit the ergonomics of the user’s dominant (left or right) hand and optimize their navigation patterns.
As critical beta feedback was addressed and stability tweaks were made, the squad felt ready to release the new Todoist Android app to the public. The team logged the issues that could not immediately be addressed for future reviews and updates.
The design and marketing team readied the launch by creating What’s New banner artwork and copy that are displayed within the app when launching the update. The Doist marketing team also created release notes and shared the app update announcements on our social channels. The brand and product design team worked together to create custom image assets and copy that summarised the project work in a simple and beautiful way.
After a successful launch of the redesigned Todoist for Android app, Google contacted Doist to announce that Todoist was selected as the Material Design Award 2021 winner in the Large Screen category. The team was excited to be recognized for their hard work and it felt like we achieved the goal we had set out to accomplish.
Internally, designers and developers continued to study and discuss the Material 3 updates. The design team started exploring mockups and design changes inspired by Material 3 and Google’s Workspace app updates. Some of our current Todoist explorations include changing the FAB styling, updating the app bar, further removing elevation shadows, and more. Here is a preview of what a future Todoist update could look like.
We hope these insights into Doist’s design process and collaboration practices have sparked your interest. Thank you for reading and stay tuned for future design updates!
The post Case Study: Redesigning Todoist for Android first appeared on Webdesigner Depot.
Bored with the same old design tools? There are plenty of new toys to experiment with, from fun divots to functional design tools that could become your new go-to’s.
Here’s what is new for designers this month…
Kosmo is a new project management and invoicing system designed just for freelancers. Designers and developers will love it because the interface is sleek and modern. The tool lets you send invoices, track time, manage projects, send proposals and contracts, and manage billing. You can customize everything from your brand to colors so that your invoices reflect your business style. The platform has a free option as well, making it easy to have the tools you need to run your business. (Plus, there’s a very affordable premium plan if you want more features.)
STUDIO lets designers layout and publish responsive websites, including the ability to connect to backend data, all with a low learning-curve GUI and no coding knowledge prerequisites. You can publish to a free URL with free hosting on the cloud. The free version also includes forms. STUDIO also has premium plans if you like the tool for websites of all sizes and bandwidth needs.
NFT.JS allows you to deploy an ERC721 contract that can perform all the required functions without writing a single line of code. Interact with the contract by calling functions and sending transactions to the contract with a couple of lines of NFT.JS. Provide the input file into the metadata object, and NFT.JS uploads all the files provided in the metadata to IPFS as well as uploads the metadata.json file to IPFS and mints the NFT.
Color Morph is a fun little tool to help you generate mesh gradients in SVG format, or generate CSS, that you can snag and use in projects. The patterns are trendy and fun to use.
Scripts Organizer is an advanced code editor for WordPress. This premium tool helps you make workflow scripts work for you with scheduling, advanced functionality, live previews, safe mode, SCSS partials, code injections, import and export, and more.
Texture is a fun web project that creates generative art that you can use for backgrounds or pretty much anything else. Preview the textures, pull the JavaScript or CSS or even edit and continue to play with them on CodePen.
Avvvatars are a set of unique placeholder avatars that are free. The tool is easy to use, includes 40 colors, is accessible and lightweight, comes with 60 shapes, and is customizable. You can grab it on GitHub or as a Figma file.
Epic Ruler is a premium design utility tool that measures distance, dimensions, position, pick colors, test contrast, and align on-screen elements anywhere on your screen. You can also create alignments, and it comes with a great color picker that helps you pinpoint hues down to the pixel.
Jotform Apps is a new set of app tools from the company you may know for form-building tools. The free no-code app builder lets you add forms, links, widgets, and branding to one fully customized app that can be downloaded onto any smartphone, tablet, or computer. Get started with a template to jumpstart projects.
Spruce is an open-source, lightweight CSS design system that’s built on Sass. The tool, which is in beta, is designed to help you start with a solid foundation for projects. It includes structure and code, typography, tables, and buttons.
Yaade is an open-source, self-hosted, collaborative API development environment. It’s made for those who want self-hosting in security – if you don’t know the password, there’s no way in! You can import OpenAPI v3 files, there’s data import and export, and a dark mode default.
Agnostic UI is one stylesheet that works with multiple frameworks. The user interface components work in React, Vue 3, Svelte, and Angular. It includes semantic and accessible HTML with unprocessed CSS so you can code on the platform to get ahead of web standards.
Turbulent Buttons is a button-and-hover animation that goes the extra mile. This is a fun button and animation that is anything but boring.
Never Install is a cloud platform that allows you to run any application from the browser without installing it on your device. It is an alternative to traditional desktop application usage and enables people to stream applications over the web. The developers are working on a next-generation cloud platform to bring any GUI application regardless of the operating system, device, and system requirements to the browser. The tool is free to use.
Photoinsight is a tool (free and paid) to manage digital assets, including photos, videos, and 3D elements, in one place. You can search, filter, and group views based on your preferences. Plus, there are tools such as batch renaming and statistics and trends to help you manage files.
Formspector answers that nagging question – are my forms working? Use the tool to set automated tests that will notify you if anything stops working, from newsletter signups to contact forms to support requests.
Wikifox.js is a lightweight, powerful, and restful JavaScript library that connects to the Wikipedia API. This library can be used to get content from Wikipedia.
Lightning Builder is a free browser-based drag and drop website builder. You can design a mockup in minutes so that you can show developers or writers what you are thinking when you are planning a new design or website project. Use it to ease communication for teams with new project builds.
Waaard is a tiny tool with a lot of practical applications. Use it to create a protected link or file that only people you want to access it can open. With plenty of verification methods, you’ll know your links are safe.
Doodle Ipsum is the lorem ipsum of illustrations. Customize doodles, grab the code, and use them on web prototypes, landing pages, or no-code tools.
FF Din Stencil is a fun display typeface for just the right application with a distinct style. It comes in a variety of weights and styles and is part of a greater FF Din family.
Fontanella is a typeface designed by Coto Mendoza, which emerged from calligraphy and manual drawing exploring the skeleton and classic proportions of Roman capital letters. It has an easy-to-read style with interesting sans serif characters.
Sarlotte is a statuesque typeface with long tails, swashes, and flourishes. From the type designer: It seduces your eyes with its curves yet still manages to maintain its classy serenity, it’s perfect for branding, logos, invitations, and more.
The post Exciting New Tools For Designers, April 2022 first appeared on Webdesigner Depot.
Whether you are a CSS expert or a front-end beginner, using the right CSS framework is crucial for your daily tasks. There are numerous frameworks whose ultimate goal is the same: helping developers target multiple screens, in the simplest possible way.
This is why Bootstrap is by far the most popular framework on the market. All developers have heard of Bootstrap, and more than 80% of them say they are happy using it.
But that doesn’t mean that there aren’t some great alternatives if you’re willing to shop around. Bootstrap won’t be top dog forever, and there are numerous new lightweight and powerful CSS frameworks.
If you are bored of coding with Bootstrap and Foundation and tired of using complex CSS rules, this list is for you.
From frameworks that take a pure CSS approach to minimalist frameworks with fully customizable themes, nothing is left out. Let’s get started…
Bulma is one of the most popular alternatives to Bootstrap and Foundation. It is an entirely free, open-source CSS framework that does not have a steep learning curve. No prior CSS knowledge is required to use Bulma.
When you add the variety of colors, responsiveness, and clean flexbox-based grid it offers, it’s no wonder Bulma is becoming more popular every day. Bulma is a well-documented framework that you should definitely try out.
If you’re looking for a lightweight yet powerful CSS framework that can be wired with HTML and JS, Ulkit is for you. It fully supports right to left languages and has one of the best icon libraries out there.
Keep in mind that Ulkit is also easy to use. All in all, Ulkit is an excellent Bootstrap alternative that is perfect for designing web layouts for desktop and mobile screens.
Even though Bootstrap is relatively easy to learn, it is much more than just a front-end template. So what if you need a fully compatible JavaScript, CSS3, and HTML5 template? In this case, HTML5 Boilerplate is a good choice.
Of course, since it’s a template, this framework does not include layouts and component modules. However, if you need a reliable CSS template that offers extensive documentation, HTML5 Boilerplate is a great solution.
Metro UI is one of the most flexible CSS frameworks on the market. This front-end framework can be easily combined with JavaScript-based frameworks like Angular, React, etc.
We found Metro UI to be an excellent open-source CSS framework and a great alternative to Foundation during our testing.
As a two-in-one solution, Skeleton quickly made it on our list. This is both a boilerplate and a comprehensive CSS framework. We enjoyed customizing its 12-column grid during our testing, and we found out that it has virtually no learning curve.
The automatic width resizing works like a charm, and the syntax is fully responsive. This is why we consider Skeleton to be an excellent Bootstrap alternative.
If you are looking for a quick way to create a web app, Bootflat is the framework you need. Bootflat’s components are built with CSS3 and HTML5, and the framework offers a comprehensive panel of color schemes for you to choose from.
Bootflat looks and acts like a simplified version of Bootstrap. However, that doesn’t mean that this CSS framework isn’t scalable and robust. On the contrary, you can fully manipulate the size and performance of the web designs you create.
If you exclude the fact that Semantic UI doesn’t have the utility classes Bootstrap offers, it is a comprehensive CSS framework that you should try. The best Semantic feature allows you to write HTML code without using BEM methodologies.
So, if you need a framework that will help you write readable codes in minutes, Semantic is the one for you.
We know that most developers nowadays use flexbox and native CSS grids. Still, there’s nothing better than Susy if you need a grid system that supports legacy browsers. Although Susy is no longer maintained, it is one of the most flexible old-school grid systems.
Like most CSS frameworks on this list, Materialize is built with HTML, CSS, and JavaScript.
It’s specifically designed to help you develop faster using a standard template and customizable components. As the name suggests, Materialize is based on the basic principles of Material Design.
If you need a lightweight alternative to Bootstrap, Kickstart is the CSS library for you. A great thing about Kickstart is that it doesn’t require jQuery which makes it very small.
Of course, like a pruned version of Bootstrap, this CSS framework isn’t as robust. Still, this is an excellent choice for those who need a UI framework and a comprehensive boilerplate library.
With a fast styling process and the ultimate freedom it provides, Tailwind is extremely popular among some developers. This is a utility-first, front-end framework that is fully responsive and stable.
Unfortunately, Tailwind CSS requires some time to learn, and it is not the most flexible choice when it comes to revising CSS rules.
Yahoo specially developed Pure CSS to help developers create fully responsive web pages.
We consider Pure a minimalist alternative to Bootstrap that offers every module a beginner needs (navigation menu, grid, tables, etc.).
PowertoCSS is on this list for a good reason. This is an ultimately responsive CSS framework that you can use to create grids and scale web apps on any platform.
PowertoCSS is based on Modular Architecture and Scalable when it comes to design.
Unlike other CSS frameworks, PowertoCSS is very lightweight, beginner-friendly, and comes with detailed documentation.
The coding process is simple, and we found the learning curve to be shallow.
Spectre is one of the most flexible and lightweight CSS frameworks we tested for this article.
It has a modern (flexbox) layout system; it is fully customizable and allows you to get quick, attractive results.
Our last suggestion is Primer, a great open-source CSS framework.
To be precise, Primer is more of a design system that lets you use a BEM CSS framework and create your projects quickly and efficiently.
So, even though Primer is not a CSS framework in the strict sense, it will help you use React and Figma components, icons, and advanced documentation to unify all of that.
Choosing the right CSS framework is not easy. It all depends on your personal needs and preferences as a front-end developer.
Although Bootstrap and Foundation are still the most popular frameworks, many of the alternatives presented above will continue to gain popularity for good reasons.
The post 15 Best CSS Frameworks: Professional Bootstrap and Foundation Alternatives first appeared on Webdesigner Depot.
Experienced web designers are always on the lookout for tools or resources that will (1) introduce them to the latest design trends, (2) enable them to incorporate features and functionalities that will make their products more competitive, (3) allow them to improve their workflows or all the above.
Apply one or more of these new design tools and resources. Then you could realize anything from incremental to game-changing improvements. The better the tool or resource, the more you are apt to realize your investment.
The 15 tools and website design resources selected for this article are the best in their respective categories. The degree of improvement you can realize when using one or more of them may depend on your own business needs. Or on the actual needs and wants of your clients as opposed to what you are currently able to deliver.
Browse the list, and you should be able to put your finger on one or more of these products or services. They could lead to improvement in one or more areas of your work. Look closer, and you might come across a genuine game-changer.
Happy shopping!
If your website design activities are proving to be exercises in tediousness, or you’re tired of working around a design tool’s limitations, you need BeTheme.
BeTheme can be a game-changer in that it gives you the flexibility to design what you want. Be makes building a complex high-performance website quick, smooth, and easy.
BeTheme is Elementor ready and is regularly updated. Click on the banner to find out more about Be’s 40+ powerful core features.
Put Total to work, and 2022 could be a very good year for your website design undertakings.
Total has it all insofar as design aids and options, website-building tools, and design flexibility are concerned regardless of the type or style of website you plan to build:
Click on the banner to discover everything Total can do for you.
What could LayerSlider do for you to help make 2022 a banner year? Look over any of your past website designs to see if any of them could profit from adding a little spice or pizzazz because that’s what LayerSlider does best.
LayerSlider is an animation and website-building tool that can be used on any website to transform its look & feel with modern graphics, eye-catching animations, and interactive features. LayerSlider is one of the most established and popular products with millions of active monthly users.
Click on the banner to see what LayerSlider could do for you.
Most table or chart building table plugins on the market either limit the amount of data that can easily be processed or the types of tables or charts that can be produced. wpDataTables has neither of these limitations.
With the wpDataTables premium WordPress plugin, you can –
Uncode is a top-selling pixel-perfect creative and WooCommerce theme. More than 80,000 sales have been made to date to freelancers, bloggers, agencies, and small businesses.
Uncode’s key features include –
With Trafft, you can schedule meetings, events, on-site and virtual appointments, manage staff schedules, send reminders, and accept payments — all from a single platform.
This game-changer integrates seamlessly with Google Calendar, Google Meet, Outlook Calendar, Apple Calendar, Zoom, and Mailchimp.
WHATFONTIS is a hidden gem in the world of font identifiers that allows you to find a font from your uploaded image in a matter of seconds.
Mobirise is fast, easy to use, and the best offline website builder on the market.
The Mobirise website builder is free for both personal and commercial use.
Downloads from this library of premium illustrations can change the way you go about designing your websites, apps, and presentations.
Illustrations you download come with a commercial license and are yours to keep without limitations.
If you have trouble bridging the gap between what your clients want and what you can provide, Slider Revolution could be exactly what you need to fix the problem.
Slider Revolution is THE cutting-edge WordPress plugin for addressing today’s over-the-top web designs. It features –
Amelia offers an automated, highly customizable solution to any business that relies on a manual or semi-automated operation for booking client appointments.
Many social media platforms allow you to include a link that allows followers to visit your website or an important landing page. With 8bio, you can create a link that a visitor can’t resist clicking on.
Your link can –
The premium Essential Grid WordPress gallery plugin developers assembled a collection of aesthetic, easy-to-customize plug-and-play templates that make creating a breathtaking portfolio gallery a fun and easy task.
Pixpa provides an all-in-one platform from which creatives can manage their online portfolios, blogs, galleries, and eCommerce sites.
XStore is a feature-packed Envato WooCommerce theme that is incredibly simple to work with has acquired more than 30,000 enthusiastic customers.
There are plenty of tools and resources for designers on the market. You could use them to create websites that are a little better than the ones you have already built or are using.
What you should really be looking for is a special design tool or resource. When using it for a small investment could markedly improve both your productivity and your design efforts to make 2022 by far your best year ever.
That’s the reasoning for publishing this selection of top 15 design tools and resources. Selecting one or more could make your day.
[- This is a sponsored post on behalf of Be -]
The post 15 Instantly Helpful Tools and Resources for Designers and Agencies (Updated for 2022 ) first appeared on Webdesigner Depot.
Micro-interactions effectively communicate brand identity and ethos while strengthening ties with the customer. These habit-forming tools make for a fun and seamless user experience. Facebook’s ‘likes’ and Tinder’s ‘swipes’ are two classic examples.
Micro-interactions originated with the need to guide customers who had hit a snag while using a service or a product. The goal was to ease customers into being more product-savvy via subtle reassurance and feedback. Micro-interactions are now employed by everything from washing machines, to coffee makers.
Along with feedback, prompts, and recommendations, they can also present customers with an appealing visual reward upon finishing a task. When used optimally, micro-interactions drastically enhance the navigation and simplify how users interact with sites and apps.
Here are the four structural elements to a simple micro-interaction: triggers, rules, feedback, and loops. Every micro-interaction has a significant component to organize the operational cycle. It lets you control feedback and runs, so the users understand the consequences of their performance and feel motivated to follow through.
This feature begins micro-interactions of both the user-initiated (prompted by user) and system-initiated (driven by the system) kind. For example, a click, scroll, swipe, tap, and pull are common triggers that users carry out. So making a payment, booking a cab, and clicking or tapping on the hamburger menu all fall under this category. On the flip side, the user’s alert prompt upon entering a wrong password is a classic system-generated trigger.
This element determines what happens after the user sets a prompt into motion via tapping, clicking, scrolling, or swiping. Rules refer to the fact that apps decide the triggers that users employ — Tinder’s ‘swipe’ feature illustrates this point. These rules gradually become a habit-forming action that users get accustomed to while regularly engaging with an app.
During this process stage, the system informs the user via auditory, visual, or haptic cues. It engages the users and encourages them to proceed further in their process. For example, the progress bar of a download, the visual representation of steps cleared in a circle, or the visual, aural, and tactile indication upon the success or failure of payment are all a part of the feedback mechanism.
This final stage entails tiny meta-rules of the process and determines the frequency and duration. A classic example from an ecommerce app is the ‘Buy Now’ transformed to ‘Buy Another’ Before the user loses interest in the app, the app typically uses such a loop to get them to re-engage with the app.
We’ve established that micro-interactions are fabulous, but not every UX interaction on your app or site needs one throughout the wireframe. Overusing this tool could saturate the overall creative experience your design may want to offer. Worse, it might even end up confusing the information hierarchy. It undermines the design and unbalances the user experience of discomfort and irritability. So it’s crucial to know when exactly to use them.
Let’s find out how few quick tips on micro-interactions can elevate and humanize your mobile user experience:
Here are a few basic principles you should follow when you introduce a micro-interaction to the user experience.
KISS is a famous design principle that becomes even more important in the case of micro-interactions. The goal is to make the user journey delightful and not be a distraction.
It has ‘micro’ in the name itself. But, again, micro-interactions aren’t supposed to be show stars, and a lengthy micro-interaction only distracts the user.
You should always consider the options carefully before choosing the spot for any micro-interaction. The widely used user-interaction designs are popular for a reason. Many people have already approved them, so you can safely continue with them. The use of micro-interaction should also sit well with your brand image.
See also if the placement of a micro-interaction is reaching your ideal customer or not. And even consider whether you need a micro-interaction to begin with.
As UX designers, we can profoundly impact the overall design of sites and apps, the user’s journey, their interactions with our product/service, their connection with the brand, and the ease of doing a transaction.
We want customers to connect to our brand, love our products, and experience our exceptional customer service. But most of all, we want to earn their trust and loyalty.
Featured image via Pexels.
The post Using Micro-Interactions to Drive UX first appeared on Webdesigner Depot.
Adobe has launched Creative Cloud Express to help anyone make beautiful, stand-out content for the web.
Unlike Adobe’s other products that need a little training and practice to make the most of, Creative Cloud Express is aimed at those with no prior design experience as part of Adobe’s mission to enable creativity for all.
Creative Cloud Express is a series of web, and mobile apps (iOS and Android), that uses a templating system to allow anyone to create social media posts, logos, ads, and more. Simple to use, Creative Cloud Express uses guided tools that hold the user’s hand throughout the process, making it easy to achieve beautiful results with no previous experience.
Creative Cloud Express makes producing creative work a viable option for anybody, regardless of experience. However, it is most suited to social media posting — even though it’s possible, it’s unlikely anyone is seriously going to use Creative Cloud Express to design a logo, given the extensive design insights needed to approach that task.
Creative Cloud Express is great for anyone who wants to dip their toe into Adobe’s product range but isn’t ready for the full Create Cloud Suite of tools. However, it’s really beneficial to companies whose design teams are tied up producing assets for the marketing department. It’s perfectly suited to marketing teams that need to output a lot of professional-standard design assets quickly; designers can make brand assets once and leave the marketers to create the content they need, safe in the knowledge that they’ll end up with professional-looking results regardless of skill.
Adobe describes Creative Cloud Express as being “template-first,” meaning that the starting point for your design will be one of the thousands of professionally designed templates included in the app. Once you have your starting point, you can add your images, content, and videos using a simple drag and drop interaction. In addition, creative Cloud Express has thousands of high-end illustrations, brushes, stickers, and fonts. Creative Cloud Express even gives you access to the entire Adobe Stock photo collection. So, even if you don’t have an extensive set of company assets ready to go, you can still create something truly unique.
Professional designers will also benefit from Creative Cloud Express thanks to the tight syncing with the Creative Cloud Suite. You can quickly toggle between rich and straightforward tools, allowing you to take advantage of powerful apps when needed and fall back on fast automation when suitable.
Powered by Sensei, Adobe’s proprietary AI and machine-learning technology — the same tech that powers design-app giants like Adobe Photoshop and Adobe Premiere Pro — Creative Cloud Express takes the hard work out of producing design assets with quick actions. For example, you can remove the background from photos, trim or merge videos, and export PDFs, all in a few clicks.
One of the must-have features of any design app these days is collaboration, and Creative Cloud Express has it built into the core experience. Adobe’s Shared Libraries, Shared Templates, and Shared Brands are all built-in so that teams can work seamlessly together.
Creative Cloud Express is already an impressive tool, but it’s just the beginning for Adobe. Future updates will include even tighter integration with Creative Cloud apps, more quick actions, and new templates. Adobe plans to release new features every week, making for an exciting learning curve.
Creative Cloud Express is all about enabling creativity and helping those professionals that haven’t previously thought of themselves as designers to build a career as part of the creator economy.
Creative Cloud Express is free on the web at adobe.com/express and can be downloaded for free from the Apple App Store or Android Store. Premium features can be added for $9.99 per month.
The post Have You Tried Adobe Creative Cloud Express Yet? first appeared on Webdesigner Depot.
