Articles

3 Essential Design Trends, June 2022

,

Are you bored with some of your current design projects? This month’s collection of website design trends can help break you out of that rut with some fun and funky alternatives.

And all of these options are anything but boring. From visual display to technique, these trends present a different set of challenges.

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

1. Layers on Layers

These website designs have so many layers of information that you almost don’t know where to look or where the design elements start and stop.

This can be a complex technique to make work because of the number of elements competing for the same attention in the design.

What you are likely to see with this design tend includes an image or video background with some motion but not anything that truly demands attention. Then add on a few still images in smaller frames throughout the design. Layer on text as well for a three-deep effect.

If you interact with these designs, you’ll find that they are not flat either. They all include animated elements, hover states, and interactions that help direct you through the layers of what can be a somewhat complex design.

Western National Parks Association uses a background image, middle images with animations, and multiple text layers (some on the pictures and some on the background). There’s also scroll animation to help build the design. A lot is going on, but it does not feel too busy.

WIP Architects is another design with layers that interact with each other and include motion. With a lot of scroll animation and layers that go in front of and behind other elements, engagement helps this site work.

The Shipwreck Survey uses the same basic layer outline with a little more overlap between elements and less overall animation. The primary animated effect on the homepage is the scroll bar.

 

 

2. Directed Click Actions

This interesting website design trend can be incredibly useful or a wasted element – directed click actions. These are buttons, icons, and animations that tell you to click somewhere in the design to move to the next stage of interaction.

The direct approach ensures that users see and have the best possible chance of doing what the design is intended for. On the other hand, if you need this much instruction, is the design too complicated? Or is there a middle ground where this trend looks great and is usable?

In each of the examples below, these directed click actions are a bit different.

HUG Co has a big circle to click in the bottom third of the screen. It’s almost designed like a bullseye, and you can’t miss it. The thing that is interesting here is that most of the video falls below the scroll. The click action also has two emojis to denote action – a smiling face or pointer when you are ready to click. (The click extends the video to full screen.)

ThinkOvery also uses a similar circular click icon. It also takes you to the next screen in a single movement so that you can continue to explore the design.

Living with OCD has a different approach with scroll and back-to-top icons paired in the bottom right corner. The scroll option includes words to help create direction and instruction. It consists of a small animation and an interactive hover state when you get close to the interactive element. The interesting thing here is that it is not actually a button, and you use a traditional scroll to interact.

 

 

3. Word Breaks

If you are a stickler for readability, this design trend might make you cringe.

In each of these designs, words are broken across lines – some with and some without hyphens. For the most part, there’s not much confusion about what the words are, but it does make you pause and think during the page experience.

Why would this be a design trend?

It’s a combination of using large typography, long words, and figuring out a solution to create a common experience between large and small screens. Many of these words would not fit on mobile screens, for example, with the same weight, scale, and impact as the desktop counterparts.

Hence, the word break solution. It creates a consistent user experience across devices.

This technique should be used only if you think your audience is savvy enough to understand what you are trying to communicate with the word break. It can be a tricky proposition!

Plantarium breaks at “plant” with a word that’s made up. But with the imagery and supporting terms, you still know immediately what the design is about.

Michelle Beatty takes a common word and breaks it. Because “photog” and “rapher” are the only letters on the screen, it’s pretty easy to figure out. What’s interesting is that the word break is not on the syllable, but the letters do stack nicely with this break visually.

Wreel Collective breaks a word with a hyphen in giant letters – something we rarely see in website design. Hyphens are not often used in this medium. Because of this, it gets your attention and makes you think about the words and the design.

 

 

Conclusion

There are a lot of rule-breaking trends in this month’s collection. They are interesting, fun, and require a certain level of risk to execute.

Could you see yourself (or your clients) opting for a design that features one of these trends? Time will tell if these visual compositions grow in popularity or begin to fade fast.

Source

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

Source de l’article sur Webdesignerdepot

/par

A Brief History of Responsive Web Design

,

Websites haven’t always been as adaptable as they are today. For modern designers, “responsivity” is one of the most significant defining factors of a good design. After all, we’re now catering to a host of users who frequently jump between mobile and desktop devices with varying screen sizes. 

However, the shift to responsive design didn’t happen overnight. For years, we’ve been tweaking the concept of “responsive web design” to eventually reach the stage we’re at today. 

Today, we’re going to take a closer look at the history of responsive web design.

Where Did Web Design Begin?

When the first websites were initially created, no one was worried about responsivity across a range of screens. All sites were designed to fit the same templates, and developers didn’t spend a lot of time on concepts like design, layout, and typography.  

Even when the wider adoption of CSS technology began, most developers didn’t have to worry much about adapting content to different screen sizes. However, they still found a few ways to work with different monitor and browser sizes.

Liquid Layouts

The main two layout options available to developers in the early days were fixed-width, or liquid layout. 

With fixed-width layouts, the design was more likely to break if your monitor wasn’t the exact same resolution as the one the site was designed on. You can see an example here. 

Alternatively, liquid layouts, coined by Glenn Davis, were considered one of the first revolutionary examples of responsive web design. 

Liquid layouts could adapt to different monitor resolutions and browser sizes. However, content could also overflow, and text would frequently break on smaller screens. 

Resolution-Dependent Layouts

In 2004, a blog post by Cameron Adams introduced a new method of using JavaScript to swap out stylesheets based on a browser window size. This technique became known as “resolution-dependent layouts”. Even though they required more work from developers, resolution-dependent layouts allowed for more fine-grained control over the site’s design. 

The resolution-dependent layout basically functioned as an early version of CSS breakpoints, before they were a thing. The downside was developers had to create different stylesheets for each target resolution and ensure JavaScript worked across all browsers.

With so many browsers to consider at the time, jQuery became increasingly popular as a way to abstract the differences between browser options away.

The Rise of Mobile Subdomains

The introduction of concepts like resolution-dependent designs was happening at about the same time when many mobile devices were becoming more internet-enabled. Companies were creating browsers for their smartphones, and developers suddenly needed to account for these too.

Though mobile subdomains aimed to offer users the exact same functions they’d get from a desktop site on a smartphone, they were entirely separate applications. 

Having a mobile subdomain, though complex, did have some benefits, such as allowing developers to specifically target SEO to mobile devices, and drive more traffic to mobile site variations. However, at the same time, developers then needed to manage two variations of the same website.

Back at the time when Apple had only just introduced its first iPad, countless web designers were still reliant on this old-fashioned and clunky strategy for enabling access to a website on every device. In the late 2000s, developers were often reliant on a number of tricks to make mobile sites more accessible. For instance, even simple layouts used the max-width: 100% trick for flexible images.

Fortunately, everything began to change when Ethan Marcotte coined the term “Responsive Web Design” on A List Apart. This article drew attention to John Allsopp’s exploration of web design architectural principles, and paved the way for all-in-one websites, capable of performing just as well on any device. 

A New Age of Responsive Web Design

Marcotte’s article introduced three crucial components developers would need to consider when creating a responsive website: fluid grids, media queries, and flexible images. 

Fluid Grids

The concept of fluid grids introduced the idea that websites should be able to adopt a variety of flexible columns that grow or shrink depending on the current size of the screen. 

On mobile devices, this meant introducing one or two flexible content columns, while desktop devices could usually show more columns (due to greater space). 

Flexible Images

Flexible images introduced the idea that, like content, images should be able to grow or shrink alongside the fluid grid they’re located in. As mentioned above, previously, developers used something called the “max-width” trick to enable this. 

If you were holding an image in a container, then it could easily overflow, particularly if the container was responsive. However, if you set the “max-width” to 100%, the image just resizes with its parent container. 

Media Queries

The idea of “media queries” referred to the CSS media queries, introduced in 2010 but not widely adopted until officially released as a W3 recommendation 2 years later. Media queries are essentially CSS rules triggered based on options like media type (print, screen, etc), and media features (height, width, etc). 

Though they were simpler at the time, these queries allowed developers to essentially implement a simple kind of breakpoint – the kind of tools used in responsive design today.  Breakpoints refer to when websites change their layout or style based on the browser window or device width.

Viewport Meta tags need to be used in most cases to ensure media queries work in the way today’s developers expect. 

The Rise of Mobile-First Design

Since Marcotte’s introduction of Responsive Web Design, developers have been working on new ways to implement the idea as effectively as possible. Most developers now split into two categories, based on whether they consider the needs of the desktop device user first, or the needs of the mobile device user. The trend is increasingly accelerating towards the latter. 

When designing a website from scratch in an age of mobile-first browsing, most developers believe that mobile-first is the best option. Mobile designs are often much simpler, and more minimalist, which matches a lot of the trends of current web design.

Taking the mobile first route means assessing the needs of the website from a mobile perspective first. You’d write your styles normally, using breakpoints once you start creating desktop and tablet layouts. Alternatively, if you took the desktop-first approach, you would need to constantly adapt it to smaller devices with your breakpoint choices.

Exploring the Future of Responsive Web Design

Responsive web design still isn’t perfect. There are countless sites out there that still fail to deliver the same incredible experience across all devices. What’s more, new challenges continue to emerge all the time, like figuring out how to design for new devices like AR headsets and smartwatches. 

However, it’s fair to say we’ve come a long way since the early days of web design. 

 

Featured image via Pexels.

Source

The post A Brief History of Responsive Web Design first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

/par

What Even Is Web Design in 2022?

,

The term “web design” refers to the process of planning, organizing, and editing content online. On the surface, it seems like a simple enough concept. However, the reality is what we consider “web design” can change over time, influenced by our perception of the “web.” 

In 2022, a professional web designer might create custom websites from scratch, but they may also be responsible for: 

  • UX Design: Creating elements focused on user experience
  • App design: Building digital components of a website or online experience.
  • Theme design: Creating visual tools for supplementing web design. 

Web design isn’t just about making a site look attractive anymore. The definition goes beyond the aesthetic to include a complete consideration of the functionality, performance, and abilities of countless assets we engage within the digital world.

What is Web Design? The Definition Today

Web design is the practice responsible for creating a website’s overall look and feel or web asset (such as web and mobile apps). It involves the process of planning and building elements of your project, from structure and layout choices to graphics and presentation. 

Web design has various components that work together to create the final “experience” of a website, including graphic design, interface design, user experience design, search engine optimization, content creation, etc. These elements determine how a web asset looks, feels and performs on various devices. 

Though the definition of web design in 2022 has evolved, it’s still different from web development, which refers to the actual coding which makes a website work. When you’re building a website, you’ll need web design and web development. 

Elements of Web Design in 2022 

When designing a website, modern designers need to consider two overlapping concepts: the overall appearance of the website and its functionality. The proper connection between these elements will maximize the site’s overall performance and usability, and make a design more memorable (for all of the right reasons). 

Let’s break down the elements of web design into its visual and functional components.

Visual Elements of Web Design

Visual elements of web design influence how a design looks. The various visual components of a design should still follow the basic principles of graphic design. In other words, designers should be thinking about contrast, balance, unity, and alignment simultaneously. The visual elements of web design include: 

  • Written copy and fonts: A website’s appearance and the text on the site often go hand in hand. Designers need to work together with content writers to ensure written copy makes sense structurally and uses the correct fonts for legibility. 
  • Colors: Colors for web design are usually chosen based on factors like color psychology, which demonstrates a color’s ability to affect how someone feels, and branding. Most brands have specific colors they use consistently throughout their visual assets; this helps create a sense of cohesion and unity in designs.
  • Layout and spacing: Layout and spacing influence how content is arranged in an app, website, or another visual asset. The right layout helps to create a visual hierarchy, guiding a viewer through a page and drawing their attention to the correct information in order. Spacing helps to separate components on a page and create legibility. 
  • Images, icons, and shapes: Images, icons, and shapes help convey significant amounts of information. The right ideas and icons can strengthen a brand message, direct a customer’s attention using a web app, and bring context to a design. 
  • Videos and animations: Videos and animations are becoming increasingly common in today’s web design strategies. Videos can include 360-degree videos, which help immerse someone in a space, video streams, and short content clips.

Functional Elements of Web Design

Functional elements in web design are the practical components designers need to consider to ensure websites and assets work as they’re supposed to. A website, app, or any other web asset needs to function correctly to be accessible to users.

Functional elements of web design may include:

  • Navigation: The navigation elements of a website or app are among the main components determining whether a site is functioning properly and ensuring a good user experience. Audiences need to be able to move around the app or website quickly. 
  • User interactions: Your site visitors may have multiple ways of communicating with your web app or website, depending on their device. You’ll need to make sure people can scroll and swipe on smartphones and tablets and click on desktops. If your website has VR or AR elements, you’ll also need to consider these immersive components in your design.
  • Speed and performance: While web development elements can also influence a web design’s speed or performance, it’s also essential for a designer to show elements of the composition don’t weigh down the functionality. Designs need to load quickly and correspond with the demands of browsers on various devices.
  • Structure: A website’s structure plays a critical role in user experience and SEO requirements. Users need to easily navigate through a website without encountering any issues like getting lost or ending up on broken pages.
  • Compatibility: A good design should look perfect on all devices, from a wide range of browsers to the various devices users might leverage today. 

What Does Good Web Design Look Like in 2022?

More than ever, achieving high-quality web design is crucial to success in any industry or landscape. More than half of the world’s population is active online. If you’re not appealing to this audience correctly, you’re missing out on endless opportunities.

Notably, while elements of good web design can be subjective, such as which themes or colors someone might prefer for their website, the underlying foundations of strong web design are the same for everyone in 2022.  

Good web design is any design that looks good, performs as it should, and delivers the best possible experience to your target audience. Effective web design should include components like:

  • Effective use of white space for organization and structure.
  • Clearly presented choices and navigation options for the user.
  • Clear calls to action to drive user activities from one page to another.
  • Limited distractions and a straightforward user journey. 
  • No clutter or unnecessary components irrelevant to the needs of the user. 
  • Responsive, flexible design accessible on any browser or device.
  • High-quality content and images are designed to hook a reader’s attention.
  • Appropriately sized fonts and legible typography.
  • A good balance between images and text on a page. 

Other elements like eye-catching imagery and professional photography can help your web design stand out. Using the right building blocks, like a strong color palette and the right shapes or icons in your design is helpful. 

Of course, there is some scope for variation in good web design. A web designer in 2022 needs to be able to adapt their use of the various essential elements of design to suit a specific target audience or the unique identity of a brand.

What Doesn’t Work for Web Design in 2022?

Just as web design elements seem to appear consistently in all excellent examples, there are also parts of web design we’ve left behind over the years. Simpler, more straightforward designs have replaced cluttered spaces, flashing images, and endless animations. 

The focus in 2022 is on creating an experience that’s simple, engaging, and intuitive, capable of speaking to the right audience without confusion or being visually overwhelming. In most cases, some of the top components to avoid include:

  • Clunky performance: Non-responsive website design, slow pages, and other examples of clunky functionality are a no-go in 2022. Websites need to be quick and responsive.
  • Distracting content: Flashing images, animations, and complex backgrounds are a thing of the past for a good reason. Websites today need to be clean, simple, and clear. Any elements which don’t add to the value of the design should be removed.
  • Generic content: Filler text, irrelevant stock photos, unclear buttons, and links can be removed from today’s website designs. A web design should be specific to the audience’s needs and the brand’s identity. Generic components don’t work.

Creating Web Designs in 2022

Today, the underlying definition of web design has a lot of similarities to the definition we’ve known for several years already. Creating a great website or web asset still requires focusing on user experience, aesthetic appeal, and functionality. However, today’s web designers generally have more components and different devices. 

Web design in 2022 is about creating high-quality experiences for customers that can support various environments and devices. The best web designs are aesthetically appealing, functionally reliable, and capable of adhering to the latest trends in web creation, like augmented reality, 360-degree video, and ultra-high resolution. 

 

Featured image via Pexels.

Source

The post What Even Is Web Design in 2022? first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

/par

20 Best New Sites, May 2022

,

Sometimes it’s easy to feel like the world is going to pieces all around us, especially when we’re doom scrolling Twitter between news alerts every few minutes. But if we step back a little, things may not seem so bad.

On the web, we see companies and individuals taking a positive stand, making changes, and carrying on despite challenging circumstances. So in this month’s collection, we celebrate confidence and accentuate the positive, as the song says. Enjoy!

Plastic Bionic

The ‘change view’ option is well used in this portfolio site for Plasticbionic design studio. The grid view is especially pleasing.

Fabricca

Creative agency Fabricca has gone for a simple look, with some appealing illustrations and custom icons.

Normand

The color scheme and display font choice (Knockout) make a strong statement here for law firm Normand.

Dumpling Delivery

We all need some bored-on-a-slow-friday-afternoon distraction from time to time, and Mailchimp delivers the goods here.

OTR

OTR is a mental health service for young people aged 11-25. The site does a great job of feeling approachable and friendly to younger users while not being condescending, cutesy, or childish.

neueMeta

Good use of block color adds extra depth to this otherwise brutalist portfolio site for neueMeta design studio.

Vitra Chair Finder

This interactive questionnaire helps the customer identify the best chair for their needs. The animation is done well here, and a page of swirling Vitra chairs is a lovely thing to see.

Chia Studios

A good balance here of serious and fun in Chia Studio’s portfolio site, professional but friendly.

Sagmeister 123

The concept behind this limited clothing range designed by Stefan Sagmeister is that, taking the long-term view, the world is actually getting better. As such, the Sagmeister 123 site has an overall feeling of quiet positivity. And a koala.

RecPak

RecPak is a meal replacement shake designed for taking during outdoor activities. The site has an active, dynamic feel that works well to convey a sense of rugged outdoor adventure.

Alicia Moore

This site for Alicia Moore clothing brand oozes style and sophistication with soft colors and beautiful fashion photography.

Think Packaging

Think Packaging’s website has a bright, bold, fun feel. Case studies are well presented visually but keep text to a minimum.

BP&O

Brand design and packaging blog BP&O has added extended content for subscribers, and their new site is a pleasure to browse.

The Future Factory

The Future Factory is a business lead generation agency, which doesn’t sound, well, a bit dull. But, some funky animation and slightly quirky type certainly do not convey dullness.

Polybion

Polybion’s new website has a spacious feel with a rich color scheme adding a sense of confidence and brand maturity.

The Empathy Experiment

The Empathy Experiment is an interactive ‘game’ from digital agency media.monks that examines empathy and inclusivity in the workplace while at the same time showcasing some technical skills.

Belle Epoque

The opening scroll on Belle Epoque’s site is really pleasing, and the random floating shapes are intriguing.

Richard Ekwonye

Richard Ekwonye’s portfolio site is clean and straightforward. Skills are on display, but without intruding on the content.

SND

SND has created UI sound kits. The site is as simple as it could possibly be, and yet it is impossible not to investigate all the sounds and start imagining where you could use them.

KMZ Industries

Regular readers will know how much we like technical/industrial-made-interesting sites, and this one for KMZ grain storage systems is a perfect example.

Source

The post 20 Best New Sites, May 2022 first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

/par

Case Study: Redesigning Todoist for Android

,

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

/par

Exciting New Tools For Designers, April 2022

,

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

Source

The post Exciting New Tools For Designers, April 2022 first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

/par

20 Best New Sites, April 2022

,

This month’s collection of the best new sites released in the previous four weeks might seem like a mixed bag, but if you look carefully you’ll see distinct themes emerging. Full-page images and videos are back with a vengeance, and designers are embracing large-scale 20th century-inspired typography from Art Nouveau to ’80s corporate.

Here are the sites that grabbed us this month. Enjoy!

I Killed a Cactus

I Killed a Cactus is a beautifully rendered 3D site that guides the less-horticulturally inclined of us in the best ways to care for our houseplants.

Aris Hotel

After a couple of years in which travel has been restricted, we’re itching to get moving again, and this elegant site for Aris Hotel is steering us in the direction of Crete.

Emergence Magazine

With excellent writing and great photography, Emergence Magazine is dedicated to stories that intertwine ecology and spirituality. Its bold typography epitomizes its ethos.

Milton Textiles

Milton is a textiles manufacturer with an eye for design. Its site showcases its art-inspired collection with big, bold, colorful photography.

Brutally Human

Brutally Human is the one-page portfolio/pitch of designer Stanley Vaganov. He has an impressive client list, and his site exudes the confidence that comes with that.

MAAP

MAAP uses a billowing flag to grab your attention as soon as you land on the site. The whole site is clean, efficient, and cool; exactly what you’d expect from a cycling apparel company.

Diabla

Outdoor furniture is typically presented as minimal and sophisticated. Diabla throws surrealism into the mix by introducing brand colors to its large-scale photography.

Steffie de Leeuw

The site for designer and artist Steffie de Leeuw features large typography that appears to be woven through layers of intricate illustration.

Garden Eight

What could be better than Garden Eight’s gaggle of 3D-rendered cartoon creatures floating around a page, twisting and transforming into new shapes?

Circus Shanghai

The site for Circus Shanghai uses a rich mid-century illustration to reference both the solar system and the Chinese flag; it’s an arresting combination.

Moooi

Ever inventive, the new micro-site for Moooi asks you to defy gravity with an engaging scroll through collages based on its product range.

Josephmark

More full-page motion, this time for design studio Josephmark. The site blends rich colors with a brutalist layout and minimalist typography to create its own identity.

Tony G

We love the infinite scroll on the homepage for creative agency Tony G. It’s a great way to add a slideshow to your homepage without the flaws of slideshows.

Estudio Piedras

This site for furniture design studio Estudio Piedras uses bold lettering mixed with product shots. The straightforward site is punchy and mimics the solidity of the materials used.

The Fleur

The Fleur is a botanical encyclopedia of fictional flowers that Ondre Jzunka has created as NFTs on the Ethereum blockchain.

Gloutir

Gloutir is the site for a “subscription-based workhorse design and development studio” that breaks all the rules of typography, and yet somehow it works.

Sophias

The rich blue and bright cream of the site for Sophias urban bistro and city garden echoes the welcoming real-world interiors and ties the brand together.

Lucalem

Lucalem is the portfolio site of designer and developer Lucas De Melo. A little more fun than the typical freelancer’s site, it features a disturbingly phallic character.

Soft Power

Soft Power is a creative design studio with an eye-popping list of international clients. Its advertising-style site uses a trendy glitch effect expertly.

Aather

Pastel colors and subtle textures evoke a calm mood, ideal for candle company Aather. It’s challenging to visually present smell, but this site does it well.

Source

The post 20 Best New Sites, April 2022 first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

/par

16 Best Typeface Micro-Sites

,

Are you looking for a unique font that will make your next project shine? Or maybe you need a typeface with a beautiful design and rich history behind it. Luckily, mini-sites for fonts allow us to creatively explore a font’s origins and history. We know (from our own experience) how important it is for UI and UX designers to have a variety of fonts for our designs.

Now that 2022 is here, it’s time to expand our font collection. That’s why, after extensive research, we have created the ultimate list of the best 16 creative mini websites for fonts.

Are you ready to take a look at the most creative, cute, and fun font websites available on the market?

1. GT Eesti

This website is about the history of one of the most popular fonts on the market, GT Eesti. As you will notice, the typeface has a long history (more than 80 years) and was recently reborn in Switzerland.

As for the font, GT Eesti is a flexible geometric sans serif that can be used in almost any project. As one of the most creative websites for fonts, full of animations and interesting information, GT Eesti quickly made it onto our list.

2. Ultra Font

Are you looking for a font that combines calligraphy and elegance and sits between the sans and serif styles? 

Then GT Ultra is just what you need. We loved how the creator tells the story and structure of Ultra with beautiful animations on this unique, one-page website.

3. Maru Typeface

Maru is by far the cutest design on this list. The website is a vertical narrative of the typeface’s history. 

The typeface was inspired by the designer’s travels to Japan, and the mini-site fully reflects that. Best of all, Maru also includes a great collection of cute emojis and stickers.

4. GT Flexa

GT Flexa is a very flexible font that you can easily use for a responsive UI design. We enjoyed navigating through the minimalist mini-site and exploring the creation and history of Flexa. 

Flexa also offers a free trial that allows you to try the font before you buy.

5. Super

Super’s mini-site reminded us of earlier decades. GT Super is a vintage typeface inspired by the serif fonts of the 70s and 80s. 

Therefore, it can beautifully frame nostalgic designs. The font was designed by Noel Leu and is available in two styles (text and display).

6. GT Zirkon

GT Zircon is located in a place where creativity meets minimalism. This is one of our favorite mini-sites for fonts. 

The site showcases Zirkon’s history and design process through creative graphics, videos, and animations.

7. America Font 

This mini-site allows you to explore the history, style, and character overview of GT America, a contemporary font family. 

The designer has used elements from American Gothic and European Grotesque to create one of the most flexible typefaces available.

8. Alpina

Reto Moser recently designed one of the most popular GT typefaces, the Alpina “Workhorse” serif. 

This innovative, one-page website tells us the story of Alpina and explains how the designer jazzed up, posed, and flexed the classic book typography to create a wide range of typeface variations.

9. Cinetype

As the name suggests, this mini-site is inspired by classic cinematic movie reels. If you’re looking for a font inspired by the fascinating world of cinemas, Cinetype is simply the best choice. And on this creative website, you will learn all the reasons why.

10. Haptik Typeface

When it comes to monolinear geometric typefaces, Haptik is one of the best. This innovative mini-website tells how the Haptik font came to be and highlights the history of the font. 

The hand gesture gifs at the bottom of this one-page site are some of the most creative mini-videos we have seen in a long time.

11. Walsheim

Walsheim is a typeface designed by Noel Leu. This mini-site explains how the designer was inspired by the fascinating poster designs of Otto Baumberger, a successful Swiss painter of the 20th century (1889-1961). If you like fonts with a deep backstory, Walsheim is a must-have for you.

12. Prospectus

The Prospectus mini-site is specially designed to look like a newspaper. And let us say: the result is extraordinary. 

This one-page website explores the origins, construction phase, and classifieds of the Prospectus typeface, allowing us to experiment in real-time with the weight, height, tracking, and size of the typeface.

13. Mort Modern

Mort Modern is a unique serif typeface designed by Riley Cran in 2018. The mini-site provides information about the typeface in a creative, cartoon-like way. 

We really liked this responsive, one-page website because it is elegant and colorful at the same time. The font is available in 56 (!) styles and promises to beautifully frame any kind of modern design.

14. Tofino

The Tofino mini-site is a creative, one-page portal that allows us to discover one of the most adventurous Swiss-style fonts on the market. 

Tofino is a top choice for any travel-related project and comes in 75 unique styles. When it comes to creating a well-crafted report on a font, there’s nothing better than this.

15. Faction Typeface

We love websites that offer both a dark and light theme. And the Faction mini-site is one of them. 

In this mini-site, you’ll learn how the Faction typeface was created and why it’s one of the most popular display typefaces for modern designs.

16. Moriston

If you’re looking for a unique sans serif font with extended multilingual support, Moriston is the font for you. 

In this one-page mini-site, Riley Cran tells the story behind this typeface and explains why Moriston is the best choice for Risograph posters, monograms, and more. 

Source

The post 16 Best Typeface Micro-Sites first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

/par