Articles

WordPress has made it easy for everyone to launch a blog, but even though launching a blog isn’t a difficult task any longer, driving traffic to your blog certainly is!

In this article, I’ll share some tried and tested strategies that have worked well for my clients’ blogs. You do not have to be an expert or a marketing guru to get traffic to your WordPress website. Follow the helpful tips I share in this article and watch the visitors start pouring in.

Tip 1: Use Powerful Headlines

The first thing related to your blog that a user reads in the search engine results is your article headlines. Of course, nobody wants to click on a boring article title. But a powerful headline stands out from the rest and gets you more clicks. 

In most themes, your article headlines are translated into meta titles for the pages. Meta titles indicate the topic of your articles to Google and other search engines. 

Tip 2: Build an Email List

Consider offering your visitors a newsletter signup form through which they can subscribe and get notified about new posts on your blog. You can offer them an incentive for free to persuade them to subscribe to your blog. It can be anything from an e-book, membership, useful templates, or an e-course. 

Building an email list gives access to the inboxes of your visitors. You can share your blog content with this prospective audience every time you post a new article. This will help you get consistent traffic to your WordPress blog.

Tip 3: Use Free Giveaways and Contests

Free giveaways work as an incentive for your WordPress blog visitors. To offer an entry to your blog’s free giveaway, you can ask your visitors for an email subscription, comment on your blog posts, share it on their social media channels, and ask for other such things. 

The trick is to think about the actions of your visitors that will increase traffic to your blog and provide them with one or multiple giveaway entries for such actions. 

Tip 4: Optimize For Keywords

All successful bloggers optimize their content for keywords. You need to perform proper keyword research to find sentences and words that your target audience is typing in Google and other top search engines. 

Instead of guessing the keywords for your articles, consider using some helpful tools like SEMrush’s Keyword Magic Tool and Google Ads Keyword Planner. This way, you can find the terms people are genuinely interested in and the keywords that do not have too much competition.

You must ensure to choose the keywords that have some excellent traffic volume but, at the same time, have less competition. Such keywords will help in the better ranking of each of your articles.

Tip 5: Optimize WordPress Site Speed

It has been proven that loading time is a ranking factor for SEO, as Google tends to assume that fast sites are high-quality sites.

Signing up for a hosting provider specializing in WordPress guarantees you get the best optimization features for your WordPress site. However, that alone is not enough because you need a hosting provider that can also handle a high volume of visitors.

Optimizing your WordPress website will help in the faster loading of your blog pages. Images are generally the biggest culprit in slowing down your website. So you must first optimize them through an image optimization plugin like Smush, Imagify, or Optimus. 

Enabling caching on your WordPress blog will considerably improve its speed. You can store your website data locally with caching, thereby reducing your server load to a large extent. Your website will, therefore, load faster on your visitors’ end, especially when they are repeat visitors.

Tip 6: Take Advantage of Social Media

Try building your presence on some of the top platforms like Facebook, Instagram, Twitter, LinkedIn, and Pinterest. Post multiple times a day on these websites and share your blog articles.

You must also include social sharing buttons with your blog posts to make sharing easier for your audience. It will allow your blog visitors to share your post on different social platforms. This dramatically increases the chances of your blog post going viral.

Tip 7: Internal Linking Strategy

The only key here is to link articles that are closely related to each other. Your visitors might be interested in such related content and read more of your blog posts, thereby increasing your page views. It also increases the chances of visitors sharing your blog content since they find it valuable.

Tip 8: Be a Guest Blogger

Guest blogging involves creating content for other websites for mutual benefits. It helps you establish your authority in the blogging world while attracting more visitors to your WordPress website. 

Becoming a guest blogger allows you to spread the word about your blog to a new set of audiences and bring in organic traffic. It expands your work portfolio and helps build or enhance your online reputation.

Tip 9: Pay for Traffic

Consider using Google Ads, Facebook Ads, Microsoft advertising, and other top advertising platforms when paying to bring traffic to your blog. Be aware of your blog audience and use the most suitable criteria to target it. 

I’d recommend setting a weekly budget for paid ads and tracking the ad performance at the end of the week.

If you are satisfied with the traffic results, use the same criteria for the next week. On the other hand, if the ad performance is not as per your expectations, try different criteria to reach your target audience.

Conclusion

Getting traffic to your WordPress blog is an incentive for all the hard work that you do in creating content and managing your website. It builds a name for your blog and improves its search engine ranking. All this leads to better user engagement and revenue.

 

Featured image via Pexels.

Source

The post 9 Ways To Drive Traffic To Your WordPress Blog first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

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

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

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

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

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

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

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

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

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

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

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

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

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.

Picture Perfect Images with the Modern img Element

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

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

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

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

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

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

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

Kocha is a funky ligature-style typeface perfect for lighter design elements, including logos or packaging. It includes clean and rough versions.

Magnify

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

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.

Source

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

Source de l’article sur Webdesignerdepot

Every day design fans submit incredible industry stories to our sister-site, Webdesigner News. Our colleagues sift through it, selecting the very best stories from the design, UX, tech, and development worlds and posting them live on the site.
The best way to keep up with the most important stories for web professionals is to subscribe to Webdesigner News or check out the site regularly. However, in case you missed a day this week, here’s a handy compilation of the top curated stories from the last seven days. Enjoy!

Tailwind Fast Started Template

Are these the Worst Logos of 2022 so Far?

5 Open Source Tips to Reduce Waste in Web Design

Introducing Material Symbols

Should I Use a Carousel?

What’s Coming in WordPress 6.0 (Features and Screenshots)

20 Best New Sites, May 2022

Choosing a WordPress Website Builder and Why You Should Use One

What if Our Sliders Actually Slid?

A New Future for the Interface

6 Web Design Trends to Look Out for in 2022

The Best Free Tailwind CSS Components for 2022

Source

The post Popular Design News of the Week: April 25, 2022 – May 1, 2022 first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

Acquiring a new customer is difficult, but retaining an existing one is even more challenging. Yet, statistics show that efforts focused on retention bring way more value. 

For instance, according to SmallBizGenius, 82% of companies agree that customer retention is cheaper than acquisition. Apart from that, 65% of a company’s revenue comes from existing clients, and increasing the investment in retention by only 5% already gives you a boost in profits by 25% to 95%. Impressive, right?

So what should you do to reach such results? 

One component that impacts brand-client relationships is website design. This article will give you three design tricks that will encourage your customers to come back to your site more and more. 

1. Rethink Your Website Structure

It is hard to imagine a website visitor who would spend more than five minutes (usually it’s way less) trying to figure out the navigation system on your website. If you have a loaded, complex site structure, you will not retain a customer. 

Take Craigslist, for instance. Its navigation is not user-friendly, not to mention that it took over 30 seconds to load when the acceptable average load time should be no more than 1.7 seconds:

Here’s what proper website navigation presupposes:

  • Subordination should not go deeper than three levels.
  • A website should include eight horizontal categories max. 
  • The structure should be symmetrical. 
  • The menu should not be overstuffed with too many locations. 

Since we mentioned Craigslist, let’s take a look at its competitor AdPost, which has a better website structure:

Instead of listing all the product categories on the front page, like Craigslist, AdPost added them to the search menu, thus making the design more user-friendly and making the navigation cleaner. 

2. Make Your Site Multilingual

If you have visitors coming to your website from around the world, you should not assume they know English. A survey by Weglot found some interesting results regarding the attitude of buyers to shopping on international websites:

  • 52% of websites are in English, but English reaches only 25% of global users.
  • 56% of visitors say the website information in their language is more important than the price.
  • 73% of customers say they prefer to shop on sites in their own language. 

So, there is no doubt that having your website localized to several languages can increase customer retention, especially considering the last stat. 

To understand the proper practices of making a website multilingual, look at the examples of the best language learning apps. For instance, Preply has a drop-down menu where you can choose from multiple language options, including Polish, Ukrainian, German, and many more:

Translating your website to different languages will help the visitor understand the value of your product better. However, before you invest in localization, make sure you study the data on customer behaviors to understand which languages your audience speaks. 

3. Invest in Custom Illustrations

Some companies don’t bother much with designing their websites, especially when it comes to custom elements, such as visuals. However, research has shown that the focus on branding in website design increases customer commitment and e-loyalty, as a result. 

Moreover, in the world of billions of websites, you need something that would help your business stand out. And custom illustrations are among those features that contribute to your site’s uniqueness. 

Just take a quick look at the Emiozaki Web site. It includes personalized illustrations and animation created in the form of a tablet that substitutes the navigation menu:

This website reflects the brand’s tone and style, and animation adds emotion to UX. Apart from that, it’s also an excellent example of structuring a website. 

Or, if you would like an example of a less loaded design, take a look at this personal portfolio by Victoire Douy. It also includes animations that add interactivity to the design. For instance, you can play with the shadow of the girl’s hand:

So, if you want your website to attract more customers and encourage them to hang out for longer, take the creative approach. Hiring an illustrator is, of course, costly, but it will help your site stand out. 

Wrapping Up

As you can see, you’ll have to put in a lot of work to bring forward website design that increases online customer retention. You just have to employ our three best practices. Let’s quickly recap them:

  • Rethink your website structure; it should make the navigation easier. 
  • Consider making your site multilingual; you’ll retain more international visitors. 
  • Invest in custom illustrations to help consumers differentiate your brand from your competitors. 

Source

The post 3 Quick Tricks to Boost Customer Retention first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

Ask any seasoned web app developer about their choice of programming language, and they are sure to mention PHP. PHP is a widely-used general-purpose scripting language that is especially suited for Web development and can be embedded into HTML. As per Builtwith, 3,090,319 live websites are still using PHP. However, when it comes to developing massive projects without lag or stability issues, developers tend to use frameworks, and PHP has two remarkable frameworks: 1) Laravel and 2) Yii. Both frameworks have a lot of followers in terms of full-grown communities globally, and there may be questions arising about which to choose.

What Are Laravel and Yii?

Laravel is a simple PHP framework frequently used for web-based or web application development initially created as a better alternative to Codeigniter. It is known for MVC Support, articulated ORM systems, reliability, modularity, and uncomplicated coding rules. Some of the key features of Laravel Framework are:

Source de l’article sur DZONE

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!

Opportunity

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.

Solution

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:

  • Review the current implementation and older design specs.
  • Study the latest Material Design Guidelines and assess what is relevant for our project.
  • Research great Material Design apps and case studies and learn from their execution.
  • Define the new Todoist Android app design language and document the changes.
  • Design and development work together to assess the proposed solution and implementation.
  • Test an early version of the new app internally to gather feedback and make adjustments.
  • Invite beta testers to the new app to gather feedback and make adjustments.
  • Refine the app and address core issues before launching to the public.

Review

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.

Study

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.

Research

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.

Design Spec

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.

Design Implementation

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.

Testing

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.

Material You

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.

Launch

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.

What’s Next: Material 3

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!

Takeaways

  • Study the Material guidelines, Material Design winners, Material studies, and Google Workspace apps to make informed design decisions when designing your next product or app update.
  • Evaluate which Material Design components and practices are right for you and implement them into your product.
  • Carefully balance the Material Design guidelines with your brand guidelines to create a unique and consistent experience between your product and the platform it lives on.
  • Collaborate with your Android developers early and often to ship app updates efficiently and increase the design implementation quality.
  • Use design components and build a design system along with practical mockups to create an efficient design spec.
  • Consider how the latest Android features fit into your product and which have the most impact on your users before deciding to implement them.
  • Test and review builds with your internal team and external beta users to get valuable feedback and make adjustments before releasing them to the public.
  • Create announcement artwork to showcase your latest app or feature update along with a clear description to share in-app and on social media.

Source

The post Case Study: Redesigning Todoist for Android first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

When Document Generation API launched a few months ago, we included a Microsoft Word add-in to make it simpler for folks to design their Word templates for use within the API. To use the add-in, you needed to provide data in JSON format, either pasted in or uploaded via an existing file:

This worked perfectly fine if you had your data ready to go, but that wouldn’t always be possible, especially if you’re starting a new project and need to start prototyping quickly. Luckily, our latest update adds a few features to simplify this. Let’s take a quick look at what’s changed. Note — for folks who’ve already installed the Word add-in, it should update automatically for you. Suppose you haven’t installed this add-in yet; head over to our documentation for instructions on how to do it. 

Source de l’article sur DZONE