Articles

Learning how to design an MVP webpage or website could be one of the best things you can do as a site creator in today’s digital world.

In a fast-paced landscape, where customer preferences and technology are constantly changing, most companies don’t have time to dedicate months or years to each web project. The longer you take to complete your website, the more likely your creation will be outdated by the time you hit “publish.” That’s why countless creators are beginning to take a different approach.

To avoid wasting time, money, and effort on something that doesn’t deliver a significant return on investment, designers are now building “Minimum Viable Products,” or “MVPs.”

Here’s what you need to know about creating your MVP webpage.

What is MVP Web Design?

Typically, the “MVP” development process is most common in the app or software creation world. It refers to when a developer builds the simplest version of a technology capable of achieving specific goals. For instance, if a company wanted to create an ecommerce app, they would design a simple tool capable of listing products, enabling payments, and tracking orders.

After launching the MVP product, the company or developer would check to ensure it had the right impact on the target market and generated positive results. Using feedback and analytics, the developer would then begin to add new features one at a time.

MVP design aims to ensure you’re developing the best, most valuable product for your audience while getting your solution to market as quickly as possible.

The same strategy in MVP app and software design can also apply to website creation. Rather than building a highly complicated website with multiple features straightaway, the designer would focus on creating a single page equipped with the essential elements.

For instance, instead of building an entire site for your online course, you may develop a single-page website where customers can learn about the system, sign up, and pay for their membership. The great thing about an MVP web page is it allows companies to start advertising their solution, product, or service quickly, with the minimum initial investment.

How to Create an MVP Web Page

Creating an MVP web page is similar to designing any Minimum Viable Product. Throughout the project, the focus will be on keeping the development process simple while collecting as much feedback as possible.

Here’s how you’d get started with an MVP web page.

Step 1: Planning

Planning is an important stage in any web design project. It’s particularly crucial in the MVP landscape, where you need to define the most critical features of your webpage or website to ensure it’s “viable” for your needs. The initial planning stage can sometimes be the lengthiest part of the process, depending on the amount of research you need to do.

For the most part, web designers and companies will begin by conducting market research. This means examining crucial concepts intended to drive your strategy, such as:

  • Your target audience: Who are you trying to target with this web page, and what will they need from your site? A user persona can be helpful if you don’t already have one.
  • Competitors: Who are your main competitors in this space, and what do their web pages offer? Which features do you need to replicate or avoid?
  • Goal setting: What is the main objective of this web page? What do you need it to do, and what might it need to accomplish in the future?

The key to MVP web page planning is ensuring you look holistically at your project without thinking too far ahead. The site you create should be capable of scaling and expanding in the future, but it shouldn’t have too many features from day one.

Step 2: Creating Your Feature List

Once you’ve done your research and formed the foundations of your plan, it’s time to list all the features your MVP web page needs to have. Unfortunately, this is where the process can get a little complicated. It’s easy to start adding capabilities and components that aren’t necessary to make your site more exciting or competitive.

As worrying as it can feel to release a very basic web page, remember your focus is on rapid growth and development. With this in mind, concentrate on narrowing your feature lists down into:

  • Initial must-have capabilities: First, decide what your web page can’t thrive without. If the primary goal of your page is to sell software subscriptions, then you’ll need to implement tools for collecting member information and payments.
  • Next stage functionality: Consider the features you might add once you’ve confirmed your webpage is effective. This will allow you to ensure you’re creating a platform that can expand to suit future needs.
  • Possible future requirements: You can also list features that might be helpful in the future but don’t necessarily need to be implemented immediately. For instance, if you’re selling an online course, you might create a separate page where people can sign up to learn about future lessons.

Step 3: Finding the Right Software

Next, you’ll need to decide how to build your web page. There are several options available to today’s designers. An open-source solution is usually the best route for designers who need to create something specific from scratch. However, if the factor that makes your solution “viable” is unique, you may need access to code to bring your idea to life.

Alternatively, if you’re building a basic webpage capable of something like collecting customer email addresses or facilitating transactions, you might be able to use an off-the-shelf tool. CMS services for web designers can reduce the work and expense involved in creating a minimum viable product.

For instance, you might use a tool like Wix or Squarespace to edit a pre-existing template and simply drag-and-drop the features you need into the right places. On the other hand, if you’re planning on adding more functionality to your site down the line, it’s worth checking if any builder you will use has the right level of flexibility. Many tools will allow you access to code, advanced features, and essential module-based building functions.

Step 4: Implement Your Analytics

One of the essential parts of an MVP workflow is feedback. When you roll out your MVP, you’ll be looking for insights, guidance, and analytics to help you decide what your next steps are going to be. As a result, MVP workflows are based heavily on experimentation.

This means you’re going to need the right analytical tools in place to track crucial information. You can implement tools for collecting customer feedback directly. It’s also worth having a system in place for tracking metrics like:

  • Conversion rate;
  • Traffic numbers;
  • User behavior;
  • Most used/least used features;
  • Technical site performance;
  • Bounce rate;
  • Average time spent on the page.

While Google Analytics is one of the most popular tools for collecting insights in the MVP website design world, various other options are available. You can even find tools with in-built heatmaps to see how people navigate your site more effectively.

It’s also worth having A/B testing components in place. This will allow you to test the different “new” features you add to your web pages over time and examine how they influence your conversions and support your goals. For example, you can use A/B testing to explore the impact of everything from CTA button colors to webpage copy and offers.

Creating Your MVP Web Page

In the fast-paced web development and design world, the old-fashioned and slow approach to designing web pages is growing increasingly less common. Instead, an MVP strategy may be the best bet for companies looking to go to market faster, collect insights from their target audience, and accelerate growth.

Though getting used to this design strategy initially can be challenging, it can save you significant time, resources, and money in the long term.

 

HTML vector created by vectorjuice – www.freepik.com

Source

The post How to Design an MVP Web Page first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

Welcome to our guide to the best new websites this month. If subtle, minimal sites are your thing, either look away now or prepare to have your preconceptions challenged because this month, we are going maximalist.

Lots of elements fill up the screen, lots of color, lots of big fonts, lots of illustration, and plenty of in-your-face personality. This is a tricky style to get right: if elements are not chosen and placed well, the result is simply annoying clutter. If done well, the result can be impactful and memorable.

[And Happy Independence Day to all of our American readers!]

screenagers & the incredible machine

screenagers & the incredible machine’s site puts illustration front and center, creating a look that evokes various mystic ideas. It sounds strange, but it works.

Anna Jóna

This prelaunch teaser site for Anna Jóna café and cinema has an elegant yet modern feel.

Hardpops

This site for Hardpops (alcoholic) ice pops takes its cue from the product flavors, and the bright, fruity colors give it a real zing.

Daniel Spatzek

Daniel Spatzek’s portfolio site takes the rules-are-made-to-be-broken approach. The result has attitude and a nice touch of humor.

Ander Agency

Plenty of color, large type, and illustration make a bold statement for Ander Agency’s single-page site.

Pretty Damn Quick

Colorful illustration on this site for Pretty Damn Quick’s Shopify app creates an impression of friendliness about the company and ease of use of the product itself.

Know Your Beetle

Know Your Beetle is a showcase page for Kaploom creative studio. Color and type combinations make a big impact.

WTFFF

While many of the sites featured here have a sense of fun about them, WTFFF tackles a somber subject: online sexual abuse and harassment. Artwork and audio create an immersive experience in which five young people share their experiences with the aim of helping others.

BelArosa Chalet

Full-screen illustrations with a hint of vintage style create an ideal impression of what future guests can expect from the currently under construction BelArosa Chalet.

Paradam

The color scheme on the Paradam site is on the pastel end of the scale, but there is still lots going on to entrance the eye.

Tilton Group

The scrolling color panels on the Tilton Group site are a thing to behold.

Fresco

Fresco uses a standard layout design, but the colors and quarter-circles instantly lift it.

Museum of Pink Art

Museum of Pink Art is an immersive experience celebrating the color pink. Undoubtedly worth a virtual wander around.

Icons by Menu

OK, this somewhat more minimalist site slipped through the net, but Icons by Menu is so pleasing to look at and use that we had to include it.

GlareDB

With an illustration that could be ideally at home on an Arthur C. Clarke book jacket and that rich, deep red background, this site for Glare DB is a world away from what might be expected.

Alex Beige

While the overall style and accent illustrations are pleasing on Alex Beige’s site, the Our Team section is guaranteed to raise a smile and stick in the user’s mind.

Snickerdoodle

Careful spacing means busy elements (like on scroll animated illustrations) don’t become overwhelming on the Snickerdoodle site.

Grisly’s Cosmic Black

The site for Grisly’s Cosmic Black is fun, bright, and joyful. Plus, it’s nice to see an alcohol site going a bit further than the usual ‘drink responsibly’ and actually providing helpful links.

The Perennial

Not just floorplans and (lots of) images, but virtual walkthroughs too. The Perennial doesn’t feel like a standard office building.

Source

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

Source de l’article sur Webdesignerdepot

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

Are you a creative person looking for the perfect career path to take? If so, there are not many more creative professions than that of a web designer.

However, becoming a web designer can be challenging, especially if you do not know where to start. For example, do you need to attend college to become a web designer? And what kind of computer and software do you need to own to be successful as a web designer?

This guide aims to answer all these questions and show you the steps you need to follow to build a career in web design.

Web Designer: Main Skills and Responsibilities

Generally speaking, a web designer is a professional who creates, manages, and maintains content for the web. Nothing is left out from designing pages and visual elements via programming languages and creating user-friendly websites.

Web Designer (Hard and Soft) Skills:

  • UX, UI, and visual design knowledge (web fonts, colors, etc.)
  • Management of design software (e.g., Adobe Photoshop)
  • Coding knowledge (HTML, CSS, JavaScript, etc.)
  • Time management
  • Communication skills
  • Problem-solving and teamwork skills
  • Research skills

Web Designer Responsibilities:

  • Plan and create web pages
  • Design appealing layouts
  • Use codes to create user-friendly pages
  • Ability to meet deadlines
  • Listen and advise clients
  • Able to work as part of a team and effectively solve occurring problems
  • Analyze the client’s niche, explore new web design opportunities/ innovative digital marketing approaches

If you feel overwhelmed reading this table, don’t be! You do not have to master all of the above skills. No one expects you to either. Becoming a top-notch web designer takes some dedication, but ultimately it’s nothing more than a series of steps. Let’s dive deeper into them.

Becoming a Web Designer: 7 Essential Steps

1. Gaining the Knowledge Needed: Theory and Certifications

Let’s start with the most common question, “Do I need to go to college to become a web designer?” Research shows that more than 65% of web designers are self-taught (fully or partially). Of course, that does not mean you can jump into design from the start.

Instead, we recommend that you learn some essential web design elements and how to use them in your future projects. This includes UX (user experience), UI (user interface), protocols, and patterns. The same goes for technical knowledge like programming languages, frameworks, and design software.

2. Developing Certain Skills

So, there are numerous aspects you can explore regarding technical skills. To be specific, your first steps in web design include developing the following skills: 

  1. Theory and certifications: Learning the theory to understand how the web and the market work
  2. Web design tools: Finding the web design tools you need to start designing (.e.g Webflow, Sketch, Figma). This will allow you to learn how to prototype web design mock-ups.
  3. Graphic design tools: Becoming familiar with software like Photoshop, Illustrator, etc.
  4. Programming languages: Especially if you think of becoming a freelance web designer, you should at least learn how to use fundamental languages (HTML, JavaScript, CSS).
  5. SEO (Search Engine Optimization): Learning how to optimize your web pages to rank on search engines is crucial.  

3. Mastering Web Design Software 

What software do you need as a beginner to start creating web designs? There are numerous apps that will help you gradually enter the fascinating world of web design. 

When it comes to CMS platforms, WordPress is by far the most popular in the market. The good thing about WordPress is that it is very beginner-friendly and comes with thousands of pre-built themes and plugins that you can use when creating a website.

But the same is true for InVision Studio. Unlike WordPress, InVision Studio is specifically designed to help web designers prototype and design a website. Finally, when it comes to graphic design software, we recommend you start with Photoshop (for creating visual samples and prints) and Sketch (for UI designs). 

4. Learning How Much Computing Power you Need

Although online CMS platforms like WordPress do not require special hardware, that’s not true for web design and graphic design software. To be precise, both InVision Studio and Photoshop have quite demanding system requirements. 

Still, a mid-range desktop or an entry-level gaming laptop can easily handle such applications. You need a reliable CPU, 8 GB RAM, and a dedicated graphics card.

I find working with two screens perfect when it comes to prototyping. You do not need to spend thousands of dollars to buy a laptop or desktop for web design.

5. Practice, Practice, and Practice

As with any other profession, practice makes perfect in web design. Therefore, the good idea is to get involved with personal web design projects before you start seeking clients or applying for job offers. This way, you can gradually acquire the technical skills you need.

Also, by working on some personal projects first, you can build a professional portfolio.

6. Creating a Professional Portfolio

If you want to draw attention to your talent, you should have a comprehensive portfolio as a web designer. This way, potential customers to trust you by having a look at your work and previous experience.

When creating a portfolio, make sure to showcase all aspects of your work and make it user-friendly. In other words, think of your online portfolio representing your talent and treat it accordingly.

7. Choosing the Web Designer Type That Best Suits Your Needs and Preferences

Last but not least, before working as a web designer, you should know that there are three main types of web designers: Freelance web designers, Agency web designers, and In-house web designers.

If you prefer to be self-employed and believe that you have the required soft skills, freelancing is probably the best path.

On the other hand, working for an agency or a company is usually easier (especially for beginners) and will provide you with a stable income. But, in the end, it all depends on your needs and preferences.

Wrap Up

Being a web designer can be an exciting career. As long as you have the necessary dedication and willingness, nothing will stand in your way.

Learning different aspects of the profession and mastering specific software will only make you better. All you need to do is respond positively to (and ask for) incoming feedback and practice!

 

Featured image via Pexels.

Source

The post How To Take Your First Steps in Web Design 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

A career as a web designer can be extremely lucrative. The average web designer in the US makes around $50-55,000 per year, equating to an hourly rate of around $25. Of course, not every designer will automatically get a full-time, high-paying job as soon as they earn their web design credentials.

Sometimes, you might need to generate a little extra cash, perhaps to supplement your part-time income or keep the lights on while you’re taking some new courses. You can even use your web design skills to earn some extra money on the side while working a standard 9-to-5.

Today, we will be looking at some of the most effective ways to make extra cash on your web design skills.

1. Freelance

Starting with the simplest option, working as a freelancer is one of the best ways to start making cash with your design skills. There are dozens of websites out there to help freelancers find clients these days. Some of the best options include:

  • Toptal: For web developers, designers, and software experts;
  • Upwork: For all kinds of design freelancing;
  • 99Designs: Excellent for selling your designs whenever you like;
  • Dribbble: Display your work and find new clients;
  • Behance: Sell everything from animations to videos;
  • Envato Studio: Sell packages for web design.

As a freelancer, you’ll be able to choose which hours you want to work, and which projects to work on. You can make money from all kinds of design skills this way, from making pages for a website to designing widgets and applications.

However, you’ll also be responsible for tracking down potential leads, building your portfolio, and managing your own taxes, so keep this in mind.

2. Sell Design Assets

As a web design professional, you’ll end up with a lot of assets over the years. Whether you’re working freelance or full-time, not every asset you create is going to be picked up by your customers. Sometimes, you’ll end up with unused content sitting on your computer.

Fortunately, you can leverage these assets for some extra cash. You can sell things like icons, backgrounds, UI assets, and more. You can even sell themes on sites like ThemeForest if you’ve built something your clients weren’t happy with.

There’s a market out there for just about every asset, from icons and PSD templates to documents, fonts, UI assets, backgrounds, and brushes. You might even build your own website where you can sell assets in the future.

3. Design and Sell NFTs

Feel like getting in on the cutting-edge of a new marketplace? NFTs are probably one of the hottest topics in the digital world today. As concepts like Web 3.0 and the metaverse gain traction, NFTs will only become more valuable.

Countless companies and innovators are looking for people to design their NFTs for them these days. If you don’t mind dedicating some of your free time to creating digital graphics, you’re in for a significant amount of earning potential.

If you learn enough about the NFT landscape and blockchain, you could even create your own NFTs. However, this would probably require a lot of time and research. You can learn more about the NFT design and art landscape here.

4. Become a Consultant

Don’t have time to build endless new websites right now? No problem, just help other people build their sites instead. Consultants are people in any industry with expertise and insights they can share to support other people. As a web design consultant, you can offer your expertise to other upcoming freelance designers or business leaders.

You’ll need to invest some time into building your personal brand as a consultant. This means developing your social media pages (like LinkedIn) and creating a portfolio. It also helps to have an air of thought leadership. This usually means you’ll need to share at least some content online.

Consulting can be an excellent way to share your skills with other people without having to do all the work of building a design course.

5. Teach Web Design

On the other hand, if you like the idea of being a teacher, you can make money almost passively with web design courses and webinars these days. While you do have the option of selling one-on-one education to students, this will usually take up a lot of your time.

If your focus right now is on a side hustle to increase your earnings, it’s often much easier to use a site like Udemy or Skillshare. The great thing about teaching web design these days, it’s much easier than you might expect. The majority of solutions on the web allow you to drip content to your clients automatically. This means you only have to create the content once.

You can create a handful of videos, quizzes, and downloadable assets, and make money off your educational resources while you sleep.

6. Create a Web Design Blog

Blogging is still a surprisingly lucrative way to make money. If you have a creative streak and you know how to write about web design in a way other people can understand, you can turn this into an excellent side hustle.

Start by building your own website using your design skills, then start publishing regular blogs with the content you know your customers would be interested in. It’s a good idea to cover a range of topics, from Photoshop, to how to design widgets and more. You can even share reviews of various web design tools and add affiliate links to earn money that way.

Make sure you use SEO strategies to improve your chances of customers actually seeing your blog and promote your content as often as you can across social media. Once you have your blog, you can make money from it by:

  • Working as an affiliate and promoting design products;
  • Showing banner ads or sponsored posts on your website;
  • Selling digital products through your blog (like themes).

If you decide to take the affiliate route, here are some excellent programs to consider.

7. Contribute to other Websites

If you don’t have time to launch your own website and build a following for your blog, you can still make money from writing in other ways. Becoming a freelance web design writer means you can sell your blogs and content to other leading publications.

Many popular websites are constantly looking for new content to add to their blog. If you develop a strong relationship with some of these site owners, you could get yourself a regular gig.

Contributing to other sites as a writer helps you to develop your thought leadership. Many companies will even allow you to link back to your social media pages or profile.

At the same time, you get to earn some extra money writing about things you enjoy.

8. Sell Themes and Templates

A lot of web designers today rely on other themes and templates created for WordPress to help them build their websites. Access to themes and templates can make building a new website a much easier, straightforward process.

If you’ve got some excellent coding prowess, you can develop and sell a host of website themes and templates, and sell them wherever you choose. As mentioned above, there are a number of websites available for selling web design assets. Alternatively, you can sell your own packages and templates on your website, depending on your needs.

If you create a particularly valuable theme, you can actually earn a full-time passive income over time. Placing your themes and templates on marketplace sites will also get you a lot of attention from potential clients in the future.

9. Flip Websites

If you’ve ever seen one of those shows where someone buys a house, makes it look great, and then sells it for a higher price, you’ll understand the basic premise of flipping websites. The idea is to purchase an existing website for a low price (preferably with a good domain name), then fix it up to sell on a website selling directory.

If you want to earn a decent amount of money for your website, you’ll need to dedicate a decent amount of time to building traffic, improving the appearance of the site, and so on. However, it can be fun to take on these projects in your free time if you’re looking for a way to hone your skills.

You might learn some important lessons about how to make websites more profitable while you’re flipping your various sites, which could make you more appealing to customers in the long term.

10. Write a Book

Similar to flipping websites or producing an income from a high-traffic blog, writing a book isn’t something that’s going to give you a lot of extra income overnight. However, it can be an excellent source of passive income in time if you know how to use this strategy correctly.

If you have a specialist skill in web design, or you serve a specific niche, you can generate a lot of attention for an eBook or physical book sharing plenty of accurate and specific information. Remember, writing about web design, in general, will usually make it harder to earn money because there’s already a lot of competition out there.

Writing a book is a fantastic way to create a possible extra source of income as a side hustle, and it can also make you more credible if you decide to go full-time with your web design skills in the future. It’s definitely more impressive to present yourself to clients as a published author.

Remember to advertise your book whenever you can to improve your chances of additional sales.

Find Your Side Hustle

Web design skills are highly sought after in various parts of the digital world. If you’re willing to devote a little time and creativity to exploring the various avenues above, they can all deliver an excellent source of income to you and your potential business. All you need to do is figure out which side hustle makes the most sense for you.

Remember, there’s no one-size-fits-all. In some cases, you might even be able to run multiple side hustles at the same time, particularly if you’re using strategies for passive income, like writing your own book or selling your own course.

 

Featured image via Unsplash.

Source

The post Side Hustles for Web Design Professionals: How to Make Some Extra Cash first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

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

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