sprintwebdesign

[sprintwebdesign]

Modular content: your manager will get even smarter

Modular content: your manager will get even smarter https://ift.tt/2FGwbQG Mattie Reynolds

Creating and planning content is one of the most important steps in a web project. We use WordPress as a content manager on most of our projects and it is very easy to edit and update a website at any time. But the technology is moving fast, are the tools keeping up with the needs of content creators?

When the client has a team to play the content and wants to take on this responsibility, we have the challenge of setting up the site admin so that it is as intuitive as possible and that no one needs to resort to an instruction manual every time a text is changed or image.

When developing a custom template in WordPress, for example, we have to consider the various formats of content that exist in a site such as news, articles or institutional information and create a logical relationship between them (grouping by categories and menus, for example). Every part of the site that has this editable content should have an easy-to-manage page, and with just one login and password you can change and save at any time.

More freedom in the content manager

A copywriter who receives this access has the freedom to change texts and images within a block of content on each page of the site, but without changing the design or layout. The problem is that managing only one content block per page is no longer sufficient for the activity of creating good web content today. Technology can not limit strategy and the new way of thinking content for the internet is requiring content managers to be more and more customization with more agility. So get ready …

The management of content as we know it is already with your days counted.  How about we set up the pages using modularized content, as if they were Lego blocks, that we can assemble and disassemble videos, quotations, texts and forms in various and unlimited ways and at any time?

This is Modular Content and software built on top of this concept allows for incredible flexibility, with the traditional drag-and-drop interaction you’ll be able to assemble and reassemble posts and pages and diagram content to the web with more freedom than ever before.

Advantages of modular content management

Do not get stuck in the layout . Modular content allows us to make changes to a site’s architecture at any time (just enter the manager and drag up or down). And we can still change blocks of place at any time and without having to look for a programmer for that.

Edit your site more easily . The administrator interface is even easier to use and the content strategy manager does not need to think about layout or design (it was already planned and properly set up in css), just in the diagram.

Combine multiple media . Content managers tend to organize content analytically by type, and as the number of categories increases, how to connect them becomes increasingly complex. Forget it all. Add videos, quotes, images, calls-to-action, texts and forms as if they were widgets of your main content and organize them as you see fit on each page.

Lower your costs . Because technology is helping you assemble and reassemble pages and content from scratch, you do not need the intervention of a technical professional to create different content every time there is a need. A template with modular content allows a multitude of combinations that can be arranged for a wide range of purposes.

Responsive content. Because content does not carry design information, content can be easily readjusted to any device using the concepts of Responsive Design . That way, regardless of changes, your entire site content will continue to work properly on all devices, such as phones and tablets.

Administration should be user-centric and not technology

The administrative screen no longer needs to be just an imitation of Microsoft Word if you are creating content for a media that is no longer the role. And you can already prepare yourself, because this new concept of CMS is already between us.

The post Modular content: your manager will get even smarter appeared first on Web designing Bangalore.

https://ift.tt/eA8V8J June 30, 2019 at 01:18AM

[sprintwebdesign]

Flat Design: where it came from and how it can help you

Flat Design: where it came from and how it can help you https://ift.tt/2YoondA Mattie Reynolds

Flat design is a simple graphic style with no visual excesses. The flat style contrasts with skepticism , or realism, an approach that seeks to represent effects that bring created items closer to reality.

A realistic icon representing a phone function, for example, creates an instant association with the image of a physical phone with all the shadows, highlights, and details; the flat design , by contrast, is a simple, recognizable and representative image, but without trying to mimic 3D effects.

Realism enthusiasts claim that style provides objects that are more visually appealing and therefore more recognizable. Flat designers argue that users of digital devices have become technology natives and no longer need the high degree of fidelity to real objects. For flat fans, simpler designs are more honest and reliable because they do not try to forge 3D effects.

Where did this Flat Design guy come from?

The launch of Windows 8 is considered by many to be the milestone of the emergence of Flat Design as a trend. Of course, before that practice was already on several other products (mainly mobile), but once a software giant applies new aesthetic rules on its flagship product, it carries a legion of followers.

It was enough to ensure the popularization of this style. After Windows, the entire Office suite became Flat and Apple surprised everyone by announcing the iOS7 with minimalist applications and without its traditional decorativism.

From night to day the collective conscience decided to stop loving the textures and started to want simple interfaces, vibrant colors and light fonts. We were behind the main factors responsible for this trend. Here are some of them:

1- We are bombarded by information all the time!

As a connected culture, we deal with a flow of information that never stops. Part of it is important and relevant, most do not. We are constantly evaluating, filtering and creating content: this is very exhaustive.

Much of our content consumption is now on mobile phones and tablets, small screens increase the feeling of overhead. It is very easy to feel bombarded by information and a reduction in this mess will surely create a greater tranquility for the user.

2 – Lowest Viable Product (MVP)

It is consensual among users, developers, and designers that the functionality of a tool, coupled with its design, can not fail. Simple, niche-focused ideas are being developed faster and faster with more agile methodologies (such as Lean UX ) – Flat design has enabled more functionality to be delivered in less time with an MVP to users.

3- “Content is King” again

When a new device or technology enters the market, we are fascinated by what they can do and by the way they can improve interactivity; and the focus on the interfaces turns out to be focused on content as well. We want to consume text, audio and video in the most intuitive way possible, so we do not want interfaces that hinder us instead of helping.

4- Technological Literacy

We saw that smartphones and tablets quickly penetrated all demographic markets and this made worrying about teaching the obvious device controls lessened. Unlike when the concern of the designer was that the user failed to push a button if it does not emerge as a pop-up on the screen, we are now looking to explore the microinteracoes , more subtle and persuasive.

5- Responsive Design

As the range of device screen sizes increased, interfaces needed to be more fluid. The Design Responsive attended this flexibility demands, but without being attached to any aesthetic style. Flat interfaces certainly fit better than other styles.

To the extent that the size of the screens and pixel density begins to increase in mobile devices, smaller letters and thinner ( light ) can be displayed with clarity. Another advantage of the minimalist design is the reduction of page size and load time.

Did Flat Design come to stay?

This new way of designing is not just another trend. We have seen the reasons that make Flat Design a manifestation of the desire for more authenticity in the interfaces. But calm down! Placing the Flat as the opposite of Realism does not mean that you should abolish the texture, shadows, etc. The important thing remains to design unique interfaces that are intuitive for users and that support the developer’s goals.

Is that you? Do you think that the Flat is here to stay, or is there going to be another fashion style? Leave a Reply We want your opinion!

The post Flat Design: where it came from and how it can help you appeared first on Web designing Bangalore.

https://ift.tt/eA8V8J June 30, 2019 at 01:17AM

[sprintwebdesign]

What is Responsive Design?

What is Responsive Design? https://ift.tt/2FJ19Yo Mattie Reynolds

The Responsive Design (English Responsive Design ; to Respond : react) is a design approach that suggests that it must adapt to the environment and user behavior.

In the field of Web Design and Digital Product Development , the practice of Responsive Design eliminates the need to upgrade site , software, and App versions to every new device launch.

The practice consists of a mixture of grids , layout , fonts and flexible images integrated into an intelligent code. When the user changes from his laptop to his cell phone, for example, the site must adapt to the new resolution. In other words: a website must have the technology to automatically react to user preferences.

It is a concept that, if implemented correctly, considerably improves the experience on any device and platform. With Responsive Design you can create personalized solutions for each person, be it on an old computer or a newly launched smartphone .

Responsive digital products create unique experiences and the application of this concept in projects is increasingly essential.

The post What is Responsive Design? appeared first on Web designing Bangalore.

https://ift.tt/eA8V8J June 30, 2019 at 01:14AM

[sprintwebdesign]

How to Choose the Best Hosting for Your Website

How to Choose the Best Hosting for Your Website https://ift.tt/2FICG5t Mattie Reynolds

If you have a website or blog with lots of hits you need a good server. Investing in infrastructure is essential to growing your website as a business, so choosing the hosting service is so important.

The Perfect Hosting for Your Website

Shared hosting

Services like Locaweb ,  UolHost  or Dreamhost  offer shared hosting and can already be satisfactory depending on your need. They are suitable for small businesses, professionals and personal websites who wish to have an institutional web page and personalized email accounts. For these cases we use Dreamhost  in our products and clients.

However, if your business grows and you need scalability, it’s good to start thinking about keeping dedicated servers.

The shared hosting works with servers hosting several clients simultaneously. This even varies according to the policies of each hosting, but generally a single server is used for hundreds of websites. When one of these sites receives a high number of visits or uses memory beyond normal, it compromises the performance of all others.

The best hosting services in cost / benefit

VPS Hosting with Digital Ocean Droplets

As your business grows, you may begin to consider migrating to a Virtual Private Server (VPS). We know that in Brazil the servers cost much more than in other countries; here we use the services of Digital Ocean  for VPS quite often. With less than $ 20 / month we can build a very high performance infrastructure for web products and cost-benefit is one of the best in the market.

Cloud Hosting Amazon EC2

The  Amazon Web Servers  opened a data center and now offers all of its services hosting and cloud here in brazilian lands. With the presence of this datacenter  we have an excellent hosting service , Amazon EC2 , which counts with an excellent response time. On the one hand, you will solve all your problems and it is the best return on investment, but on the other hand, you will need more qualified people or a specialized company to manage and support this service. 

Advantages of dedicated hosting

Safe.  Your sites will be in a Virtual Private Cloud (VPC) or Virtual Private Server (VPS). You decide which instances (data storage blocks on the server) are exposed to the Internet and which ones remain private. This ensures that you decide between what only you and your company will have access to and what is left open for the public to access.

Accessible. You pay a very low rate for what you actually use. On demand instances allow you to pay for computing power per hour with no long-term commitments. This exempts you from the costs and complexity of planning, acquiring, and maintaining hardware, and turns what are typically large fixed costs into much smaller variable costs.

Flexible. You can choose various types of instances or droplets, operating systems, and software packages. Both  Amazon and Digital Ocean allow you to configure one or more machines the way you want, and you can customize the memory, CPU, storage and size for your business.

Fast. Cloud hosting  allows you to increase or decrease capacity in minutes, not hours or days. It is possible to commission one, hundreds or even thousands of server instances simultaneously. Of course, because everything is managed with a good administrative interface and API services, your server can automatically expand or shrink depending on the needs of your tool.

Who uses Amazon Web Services

The service is used by a plethora of great web products like Netflix, Autodesk, Foursquare, Pinterest and Spotify. Big companies also opt for the stability of the web service Amazon: Adobe, Nokia and GE are one of the giants that use the EC2 hosting service . See the complete list in their portfolio .

How to improve my hosting service?

Most startups or digital products start with a small user base and a small memory and server demand. The great thing about working with Amazon Web Services right from the start is that it can be perfectly scalable and keeps up with your startup growth , even if it has explosive, viral overnight growth.

When seeking us to take care of the health of websites and systems, migrating to a hosting service like this is always a natural step in the evolution of a web product. A good service is one that ensures all the privacy of your data, ease of maintenance, agile resolution of problems, freedom and speed of service.

  The post How to Choose the Best Hosting for Your Website appeared first on Web designing Bangalore.

https://ift.tt/2YoGBf9 June 30, 2019 at 01:13AM

[sprintwebdesign]

For a faster web: know the Performance Test

For a faster web: know the Performance Test https://ift.tt/2YmSCBR Mattie Reynolds

We have already spoken here on the blog about the importance of performance for digital products. In the mobile environment, slow websites and apps generate costs directly for the user – and for those who are hosting as well.

In general, slow platforms crush the potential results that a product has.

Non-sellers, unread blogs, and apps that do not generate conversions

We have seen in our day-to-day design, development and marketing projects that we should never give up on performance. Often bad performance is part of or has as a consequence a bigger problem.

But each case is different. As performance optimization actions generate costs, we need to have a keen eye to not indicate a possible about optimization .

In this course, the performance diagnostic tools were allied to us, and we ended up internally creating an internal site velocity monitoring tool, 100% developed by the Man Machine team.

Made for the digital industry

After months adjusting to the practical use – and creating new functionalities – we saw a product with the potential to generate value for our industry.

Free and directed to professionals and representatives of digital products, we launched the Performance Test.

Monitoring

Create your list of pages for monitoring and follow through here the results of actions directed to performance.

The performance history of a site can be related to iterations made in a period and to identify periods of instability and factors that directly affected the speed.

Indicators and punctuation

Solid methodologies begin at the research stage, and when it comes to performance, a diagnosis is needed to understand the causes of poor performance.

In a practical and user-friendly non-technical way, the test page features easy-to-understand indicators and scores that expose the reasons for poor performance. Find out if it’s a server problem, page weight, or code – and based on that, set your priority actions to correct slowness.

Alerts and reports

Receive a weekly report in your email with a summary of the score from your list of monitored pages. A convenient way to track site health and be notified in case of atypical falls in key indicators.

Performance Culture

It’s easier to measure and take care of speed – your reports will not be the same either. Be an early adopter of Performance Testing – test your website for free .

The post For a faster web: know the Performance Test appeared first on Web designing Bangalore.

https://ift.tt/eA8V8J June 30, 2019 at 01:10AM

[sprintwebdesign]

UX and UI for Mobile: Quick Tips for Shooting

UX and UI for Mobile: Quick Tips for Shooting https://ift.tt/2Ynxawy Mattie Reynolds

It is a fact that most access to websites and systems today come from mobile users. Unlike the desktop, with large resolutions and many pixels of space, small screens are a limitation; the touch screen, as a new form of input and control, causes new UX and UI recommendations to emerge for this format.

We have put together some mobile usability tips that make all the difference when designing layouts and experiences for the mobile visitor, taking advantage of reminders of global tips that can not be ignored

Excess of information brings clutter

Each button, image, text, form field, and icon added make screens more complicated. Minimize the user’s mental load by making objects, actions, and options clearer and more visible.

One of the tactics used to reduce the cognitive load is progressive disclosure , one of UX’s global principles.

No one wants to have the same job twice

Look at all the streams looking for those who give more work. The user should not need to remember information that he filled out during different and previous steps of the flow, such as having to re-enter some data that has already been reported before, or that is the default, or having to make decisions that he has made before .

A little at a time

Find ways to break a primary task into subtasks. Large and long tasks generate more complex interfaces. A flow should be, wherever possible, divided into linear steps where the sense of progress is visible and the option to return is always within reach.

The way the purchase checkout within Instagram is performed shows that digital products can offer actions and flows different from their primary purpose

Screens and conventional terms

Draw screens thinking about how much they will be familiar, that everyone expects finds, for their user base. In apps that contain feeds, these screens would be “Home,” “My feed,” and “Search results” – always use your industry standards.

Today is also much talked about microcopy, the wording of custom text for buttons, warning texts and error messages. It is wonderful for branding within the product and humanization interfaces, but when it deviates from the main idea, it can confuse users, making the learning curve. Avoid jargon and specific terms that can be a great barrier to lay people.

Reduced focus on UI consistency

It is a principle of design that, when ignored in the mobile environment, makes a product very punished. Keeping consistent appearance is essential in screens and in-app elements. Interactive elements should remain consistent and match expectations.

Do not be afraid to create a mega button for the main action of a screen. Give weight to what really matters, with font size, special elements and colors.

Today we have guidelines, such as Apple’s and Material Design. Do not be afraid to rely on already consolidated UI standards that fit well with your needs. It is important that typography and colors remain consonant with website, social network, email templates and any other platform or format in which the brand operates.

More power and control for people

We have previously written about affordance , the ability of an object to communicate its usefulness. Interactive elements should have their explicit meaning and lead to expected results when triggered.

Predictability makes the user feel empowered. People also feel in control when there is the option to return and correct any mistakes. And speaking of errors, how do the error messages in your product go?

Did you make a mistake? Swears This Spotify error message does not help the user at all.

Remember that wrong is human and eventually these unwanted screens will be displayed. Regardless of the cause, the way you design and manage error scenarios is what sets a good experience up to that point bad. Be transparent, telling what went wrong, why it went wrong, and what direction the user should follow to fix it.

Most inclusive mobile product

Accessibility can not be ignored in a world where 4.5% of people are estimated to have some type of color blindness and populations that get older every decade.

Think of the classic colors of error and success, respectively red and green – are complicated spectra for colorblind types. Your product can be part of the inclusion easily by also adopting W3C accessibility guidelines.

Spectra of colors and how they are seen by Achromatic, dichromatic and trichomatic color-blinds.

Another problem, inherent context of using mobile products, where the user is almost always in transit, may be the excess of animated elements. Too much movement in the eye can cause nausea in sensitive people. Always present an option to disable the animations in the interface.

More tips from UX mobile

These recommendations are a great starting point when analyzing interfaces and starting to optimize a product. As you’ve seen, many global rules in common with the desktop can be applied in mobile design.

You can go further. Understanding the context of use and building empathy with the user is an ongoing process that the best design teams of great products practice daily. How do you deal with it? Here at Man Machine we give great value to research, testing and feedback and we can help you with these methodologies .

The post UX and UI for Mobile: Quick Tips for Shooting appeared first on Web designing Bangalore.

https://ift.tt/2Xx1UOj June 30, 2019 at 01:08AM

[sprintwebdesign]

Mobile-first becomes the new indexing standard

Mobile-first becomes the new indexing standard https://ift.tt/2FHybIG Mattie Reynolds

Exactly 4 years ago Google already signaled that the mobile user experience would be prioritized by the search engine. In the event called by the community as Mobileggedon in April 2015, the main algorithm undergoes changes that make non-mobile-friendly sites deferred in the results, and some industries have observed more than 20% drops in their traffic.

Since then, conversations about mobile usability, responsive design and its importance to results not only SEO but also business have intensified.

And in this line of changes, which do not seem to be trend-setters, but to follow a behavior that already exists – more and more people accessing the web by cell phone – is announced in 2016, in the Webmaster Central Blog, the idea of mobile-first indexing and the programmed tests for this change in the parameters of the search engine.

The expected adoption of mobile-first indexing by default for new domains will finally begin in May 2019. Here’s what that means in practice:

What is mobile-first indexing?

It means that the mobile version (which is displayed on mobile phones) will be the starting point in indexing – the addition and ranking of your site pages in the Google index – and will be the new base value for determining rankings.

For SEO, it is important to know that an increase in the proportion of Googlebot Smartphone crawlers is expected – and that the cached version of pages will be mobile.

Remember that mobile-first is not mobile-only: if a site does not have a mobile-friendly version, its pages in the desktop version can still be included in the index – but a poor mobile experience will certainly negatively impact the rankings.

In practice

Unlike mobilegeddon, where there were not many hints of what was to come, mobile-first indexing comes more as a reminder that good design practices and UX can not be overlooked in small screens

According to Google’s official targeting, responsive and identical sites in their desktop and mobile versions are already tailored enough for the change.

Still, you’ll want to review whether dynamic elements and images are optimized for mobile. The search for a good load time and conversions improvement continues.

For sites with separate desktop and mobile versions (separate URL), pay attention to these points:

Content – the mobile version should bring the most valuable content (video, text, and images) first, in the prime areas of the layout, in the same way as the desktop version.

Structured data and metadata – include the same schema, identical in desktop and mobile versions. The metadata (title, description) should be similar (but need not be identical) – you can optimize with fewer characters or more keywords relevant to the mobile context.

Sitemap and Search Console – the URL of the sitemap and your robots.txt should be accessible by the mobile version of it. The mobile version must be added and checked separately in Search Console.

Responsive web design, UX and loading speed

Apart from these recommendations, the principles of mobile usability are also valid – it is no use receiving visitors from Google if they do not perform important conversions within the pages of a site.

To improve rankings and results, conduct some testing and see how your site is tailored

Test if your site is mobile friendly

Test if your site is slow for mobile visitors

Want help optimizing? Leave your question in the comments!

The post Mobile-first becomes the new indexing standard appeared first on Web designing Bangalore.

https://ift.tt/eA8V8J June 30, 2019 at 01:06AM

[sprintwebdesign]

Cohort Analysis: What it is and how to use it

Cohort Analysis: What it is and how to use it https://ift.tt/2FI8ZBz Mattie Reynolds

Adding a look at metrics in design and marketing projects is certainly a differential. In addition to more information available for decision-making and task priority setting, using this data dimension also fosters a performance culture: you can only optimize if you keep your eyes on the gauges!

See the definition, what it is for and how to apply the cohort analysis technique.

What is cohort analysis

One of the metrics whose adoption by our industry is growing more is cohort analysis. It is a more complex technique because it is dynamic – instead of a given number for a period (eg, total sessions, time on page), cohort analysis signaled usage behavior of specific user groups or customers over different periods .

What is a cohort

Cohort is a group of people who share a common trait in a certain period of time.

Define groups, track their behavior in a defined timeframe, and compare results

In apps, for example, we can define cohorts according to the application’s application date:

Cohort 1 – users who signed up in January.2019

Cohort 2 – users who signed up in February.2019

Cohort 3 – users who signed up in March.2019

Another example of how much it is used is in and commerces; here the cohorts can be defined according to the reference channels:

Cohort 1 – visitors coming through direct traffic who made a purchase

Cohort 2 – Visitors coming from Facebook who made a purchase

Cohort 3 – Visitors coming in through Google who made a purchase

Cohort 4 – Visitors coming from Instagram who made a purchase

Example of a cohort analysis

Hypotheses for analysis

The first step in the analysis is to define relevant cohorts for your case. Next, indicators are defined that can answer a question or hypothesis.

In the first example given, from an application, we could look at cohorts for conversions (or actions) completed in the application. In this case, a decrease in conversions in each successive cohort over a period is a dangerous signal: average user quality is declining over time, changes have been made within the app that have affected engagement and retention. Here’s how to use cohort analysis to measure behavior .

In the second example of the virtual store, the cohorts defined by the acquisition channel may show that reference types are more valuable to the business, not only based on the revenue of a single purchase from each user in a cohort, but also from purchases that can should be repeated in the period. In this case, cohort analysis can help measure the value of the customer’s life , or LTV (Lifetime Value).

Performance Culture

It is a good choice for those who have little time and need a report that summarizes important points such as retention and value per customer, applications, systems, stores and sites. Tools like Google Analytics already offer this kind of analysis, which can also be done manually with simple data sheets.

The post Cohort Analysis: What it is and how to use it appeared first on Web designing Bangalore.

https://ift.tt/2YjDSDI June 30, 2019 at 01:04AM

[sprintwebdesign]

The best design methodologies to give the kick-off your Startup needs

The best design methodologies to give the kick-off your Startup needs https://ift.tt/2YmrjHS Mattie Reynolds

One of the ways we have to improve the work routine and results within a company that is still being designed is through design methodologies that are compatible with your team and the goals of your startup.

The question is: how do we guarantee results and a healthy development of the projects that we propose for our teams? And how can we bring innovation to the day to day work, having a better performance and evolution of the company over time? This is exactly what the methodologies we present today bring to the startups, always mixing currents of thought, mechanisms and techniques to reach a new point.

From the explanation of these methodologies we hope that you can choose which, or which ones, are the best for your business and team.

Lean startup

Also known as Lean Startup, this term has taken over most of the articles and articles on innovation in the market. The eyes of those who are working with multidisciplinary teams, this methodology rescues a Japanese model of the Lean Manufacturing, developed by Toyota, in which the processes to be developed are studied to have wastes disposed of promptly, but also adding techniques of marketing, technology and team management.

Although it is more applied in technology-related companies, especially in the launch of new products, Lean Startup can be implemented in several areas and even in already consolidated companies and large, since its premise works with cyclical periods of projects that unfold in a healthy investment of material, financial and, mainly, human resources.

But what are the methodologies used in Lean Startup?

Based on three cyclic phases during the Build, Measure, and Learn project, it provides an agile solution for the client, leveraging results and minimizing any waste they may have during their development, with MVP, Pivot, and Agile interaction with clients as some of the premises that this methodology brings to be implemented in a team.

The MVP, or Minimum Viable Product.

It is your initial test instrument. It functions as a beta version of your product, made quickly, inexpensively, and delivered to customer testers as quickly as possible, so you can capture feedback for improvement. Fundamental to getting market information and validating your premises, this is one of the “Build” steps within the Lean Startup phases.

The Pivot

Soccer fans are going to kill that letter! The term is exactly what a pivot is inside the football game. That player to the ball, spinning on the axis of it to find a new opportunity to attack and score a goal for the team. Here, the technique is similar: by maintaining the foundations of the company, which is already consolidated, we seek market opportunities that fit what can be offered. The act of Pivoting a project is to pause it to maintain what has already been established and then identify market opportunities by testing services, products, and formats.

Design Thinking and Agile Development

As well known as Lean Startup, Design Thinking is something we already see being applied to companies of all sizes successfully. And this approach proves: it’s really good for anyone who wants to innovate in design methodologies with an easier and simpler process to apply.

Design Thinking is nothing more than an interactive process aimed at identifying, understanding and redefining usability issues that our users may face, working with a more humanized and innovative approach that uses design processes to bring solutions to startup teams.

While Design Thinking is viewed as a collaborative solution to problems, Agile Development is a way of working based on interactive development and continuous improvements that accompany deliveries, it is the “father” of methodologies such as Scrum and XP, results of the Agile Manifesto, which preaches values ​​such as interactivity and collaboration between developers and users, as well as the tool’s continuous adaptability.

What are the differences between Agile UX, Design Thinking and Lean Startup?

Lean Startup is a methodology created with a process of beginning, middle and end; the Agile method is a work process: it is understood that it can be applied alone or within a methodology. Design Thinking is considered neither a method nor a process, it is a way of approaching the solution of a problem.

It seems confusing, right? The tendency is for us to separate the three in different scopes, where the best way is for us to use all three as allied tools within the work of a Startup. With Design Thinking, we idealize, emphasize and define. With Lean Startup, we turn those ideas into business models. And with Agile, we propose more intelligent and interactive processes, working more agilely within our objectives.

Still not sure how to apply the methodologies your company needs?

The Man Machine is here for that. We set up a new way to work out your goals in a smart way.

Our favorite methodology today? It’s Design Sprint, which you can check everything  by clicking here.

The post The best design methodologies to give the kick-off your Startup needs appeared first on Web designing Bangalore.

https://ift.tt/eA8V8J June 30, 2019 at 01:02AM

[sprintwebdesign]

Slow WordPress Never Again – How To Leave Website And Panel Faster

Slow WordPress Never Again – How To Leave Website And Panel Faster https://ift.tt/2IXqaRO Mattie Reynolds

More and more people are talking about user experience on digital platforms and its importance to businesses that want to grow vigorously and achieve their goals.

We know that there are several factors that separate a pleasurable experience from one that leaves something to be desired. A website with appealing aesthetics, tailor made content for a specific audience, and information architecture that meets visitor goals is often the end product of UX projects.

On the other hand, little is said about the ability to deliver resources, or page performance. The loading time of a website and the slowness perceived by users, although little questioned in product design projects, also play an important role in visitor behavior.

Viewing how a bad upload experience can give the impression that a page is interactive without all the necessary features are loaded. This can leave your users frustrated.

In the case of websites that use CMS WordPress as a framework, slowness can become a problem not only for end users, but also for people running the publishing and publishing routines of blog content and pages.

The problem of slowness

Slow sites are a problem when they cause damage to any of the parties that relate to the platform. If efficiency and performance are already discussed in various industries, why should we approach it differently with our website?

Think With Google Insights into the Impact of Charging Time on Behavior

Slow for visitors

The perception of slowness has a lot to do with the speed of the band who accesses. We know the limitations of mobile internet in Brazil and that the signal of the networks is generally unstable in certain areas. The perception of the slowness of a page accessed by a desktop user with broadband (10mbps) is completely different by a mobile user in 3G or 4G network.

What Does My Site Cost shows how much your users are paying for each access to your site based on your internet costs

Not only for seconds of page rendering, but for what he expects, based on his previous experience with other sites. The fast desktop and internet user expects a YouTube video to load in the first few seconds; already the mobile user with 2G internet knows that under its conditions that same content will take longer to load – and this is perfectly acceptable.

The damage here is more on pages with conversion, forms or buttons to be clicked (ex .: buy, in virtual stores). When key pages are slow to load, there is the perception that something is broken, leading to withdrawal. Generally, the slower a page is, the higher your visitor abandonment rates and conversion rates are.

Slow admin panel

Another little point noticed is the impact that a slow WordPress has on the internal routines of an organization. For the operation of a blog, for example, several routines and publishing and publishing tasks of content that go through the administration interface are necessary.

Similarly, virtual stores (WooCommerce) have inventory management routines and product content updates that pass through the administration panel. This slowness causes tasks of this type to take longer to complete, and consequently spend more time on the author, publisher, or store manager. Every business should seek to correct these inefficiencies, since time is a limited resource and has a cost to the company.

Is your WordPress slow?

The first step is to know how slow your site is. For this we have some free performance tests that provide several metrics. With them you can diagnose what technical factors are pulling the speed of your pages down and leaving the backend slow.

Speed ​​tests

The main ones on the market today are Google Speed ​​Insights, the Lighthouse (extension of Chrome) and the Performance Test (national). They work in a simple way: when you enter a URL, the tool simulates visits on the page and records some performance indicators.

Lighthouse performance test result

See some performance metrics and understand what they mean.

Time for the first byte – in seconds, the time it takes for the browser to access the first information on a page. It is desirable that it be less than 0.3 s. Flag slow servers or redirection problems.

Total page size – in megabytes, is the total weight of all the resources a page loads, counting text documents (HTML, CSS, and JS) and media (images, videos, and sound). The heavier a page, the slower its loading.

Page load time – also in seconds, is the time it takes for all the features of a page to be fully loaded. It is affected by the speed of the internet (band) of those who access. It is recommended that it be less than 3 seconds.

In general, these insights help diagnose the causes of slowness. Testing tools also provide fix-up hints – tasks that can be performed on the site structure by a developer or infrastructure technician.

It is always possible to optimize a website (even the fastest ones can be optimized). The point is that there are corrections that, due to the expected improvement in time, may not be efficient if they are related to the resources (time and money) employed to perform the task. Fine code and structure adjustments should be made only after the basics.

Leave the site fast

The basics of optimization are tasks that have high impact on speed. See the main points that will make your pages take off.

Hosting for WordPress

Cheap hosting plans are an economical way to make your online business possible, but as your reach and number of visitors grows, it’s a service that deserves an upgrade.

Among the most popular cloud servers on the market, Digital Ocean servers are ahead. Response times, error rate, and price lower than the Amazon AWS service

The hosting services offered widely in the Brazilian market offer plans with old servers. Unlike a dedicated server, shared hosts have multiple sites, and when there is overhead, all sites experience variations in speed. Usually run outdated versions of frameworks necessary for the perfect functioning of WordPress – there are servers offered today that run PHP version 5, while version 7 of this framework already exists. By default, some of these services also have speed limiters.

Plan upgrades do not solve the problem. They often reflect timid improvements in some indicators (time to first byte and load), but the structure continues with its limitations in the core. There comes a point that the slowness of conventional hosting services makes hosting unviable in that environment.

To fix, migration to servers with cloud technology is indicated. Unfortunately, Brazilian hosting companies that offer this structure, do the pricing with heavy hands. It makes it much more advantageous to outsource services – even in dollars, the monthly price is very attractive and, in some cases, very close to the price of plans with shared servers.

The migration should be accompanied by an infrastructure expert, who will make the right settings for WordPress to run with high performance. You can also configure backup and security routines.

Cache plugin

Do not underestimate the power that WordPress plugins have. In terms of performance, we recommend installing a cache plugin. This technology makes returning visitors already have many preloaded site features in their browser, providing instant loading of most requests.

One of the best today is the W3 Total Cache. In addition to caching technology, it offers the feature minification feature (HTML and JS minify), making the site also lighter (page weight). In the plugin official the following benefits are presented:

Improved rankings on search engines, especially for mobile-friendly sites that already use SSL

Optimized rendering: The page loaded becomes interactive much faster

Reduced page load time: Improves visitor time on site and number of pageviews in session

Improved server performance: sustains periods and peak traffic

Bandwidth savings of up to 80% with compression (minify) of HTML, CSS and Javascript

Redesign, optimize images and other settings

The two basic points of optimization can bring impressive improvements and that’s where we recommend that performance optimization begin.

Having done that, another easy point of optimization can be in images, which usually correspond a large part of the weight of pages, especially on pages with lots of photos. These are files that can be compressed and reduced in size by up to 90%. There are technologies that make smarter image uploads that can be explored, such as Lazy Loading and CDN.

Sites can also have features and content reviewed in a redesign that makes it simpler and more straightforward, avoiding any excess information in the layout – which, from a performance point of view, always means heavier and therefore slower pages.

Continue optimizing with fine adjustments indicated by performance tests. We can help you set priorities based on your current structure. Sites in WordPress are not slow – if there’s one thing we’ve seen over the years is that slowness problems are derived from misconfiguration, poor development and inappropriate server.

The post Slow WordPress Never Again – How To Leave Website And Panel Faster appeared first on Web designing Bangalore.

https://ift.tt/2X6nLbe June 29, 2019 at 06:00PM

[sprintwebdesign]

3 Interfaces Design Trends for 2019

3 Interfaces Design Trends for 2019 https://ift.tt/2X6nK7a Mattie Reynolds

UX, CX, UI … The year went by and the acronym for intelligent web design was increasing. The UI is a term used to designate the medium through which the user will interact with your site or application. In good Portuguese, it is the user interface, and we use it for everything that is visible to the people on your platform.

Be the format of the menu, the layout of a presentation page, the way the photos appear in an application … Everything the user interacts with is the UI account. UX – we’ve explained a lot how it works and you can read more about  clicking here  – is the area that is concerned with promoting a good user experience, since the UI is the visible part of the platform, and will focus more on creating a medium that provides this interaction in the best way to extend the user experience. UX and UI go hand in hand, but they are different areas that need specific professionals for project success.

UI is one of the key points when building platforms with high conversion and adherence, and it is responsible for bringing out all the “invisible” efforts of building UX and other on-platform programming. Sites, applications and interfaces that are user-friendly convert better and win more people not only because they have good functionality but mainly because of usability .

And it’s been thinking about staying current that we’ve separated for you some trends that we’ve been following in terms of design and aesthetics in recent years, like new features that appeared timid in the marketplace in 2018 but which are now showing they’ve come to stay.

# 1 Typography with storytelling:

Tell to charm, and tell in a beautiful way to engage. The ability to tell good stories will be a differential of companies that want to excel in the market, and the use of typographies, combined with the construction of an interesting visual hierarchy, will be a determining factor.

Copywriting along with the interface design in synergy with the story to be told will be the elements that will bring many positive results, either by capturing the attention of its users or by creating connections with the story told.

# 2 Transitions and Motion with CSS:

Already very popular in 2018, these visuals gain even more prominence in 2019, especially if we think of micro-animations. They are ways to help the user identify with what interact within the platform and capture a positive feeling for their beauty and playful nature.

Onboarding Flow by Sal for Weebly

# 3 Colors, gradients, and overlapping effects:

Effects that blend colors, formats and typography in an elegant and natural way, capturing more attention from the user and adding a greater interest to the content. These techniques demonstrate care in their creation and bring the possibility of working with elements of neuro programming from colors and application of Gestalt techniques .

Duotones, gradients and an open composition style. Via Bruno Pego

We also have to bring an honorable mention for the techniques of 3D, Artificial Intelligence and Augmented Reality, which have been prowling for several years in the most diverse platforms and companies and walking to take a bigger space in the next 5 years. By 2016 it seemed to be impossible in terms of affordability and graphics, but today we have products and techniques increasingly accessible to bring into the expanding business that are interested in innovating their interfaces.

Innovation is the mother of good business and knowing how to bring new ways to communicate your services, ideas and products to customers is one of the most accurate ways to gain more audience.

The post 3 Interfaces Design Trends for 2019 appeared first on Web designing Bangalore.

https://ift.tt/eA8V8J June 29, 2019 at 05:54PM

[sprintwebdesign]

Design: 10 Tips for a Flawless Layout

Design: 10 Tips for a Flawless Layout https://ift.tt/2IXq9gI Mattie Reynolds

While each web designer or web development company has a different plan for building a website, there is a list of what to do in common for most such projects. We created this checklist that we made with the essential items in the construction of a good web interface that is consistent, easy to use and aesthetically pleasing.

Space between elements, personalized quality images, effective internal search tools, and creative ways to invite the user to the interaction. These are the elements that together define the user experience that accesses one of your pages.

Creating Infallible Layouts

We will present here ten elements that you should prioritize on your site, followed by practical examples of each of them and tips on how to use it in your next site creation project . We’ll see what little details make all the difference.

1. Spacing

Spacing is one of the most important elements in layouts . The space dictates the visual flow up to and speed of reading (or readability). Designers are beginning to use space in ways we have not seen on the internet in the past decade mainly because of the popularization of touch screens.

There should be a consistency in spacing and space relations. Similar elements should include similar spacing. The amount of space between the lines of a paragraph should follow a pattern (or proportions), as well as the size of the margin around the images.

Space is also important when creating a focal point for the perception of the interface. An image or block of text surrounded by white space may appear to be larger and more important than one allocated along with other blocks of information and in a tighter part of the layout.

It is also worth remembering that space should not necessarily be white. It refers to the absence of elements and may well be a dark background color or a well applied texture.

Choose the center element, such as a menu, form, or a featured image. White space can highlight this element in the visual hierarchy.

Make sure the information is organized in a way that includes consistent spaces between the elements. If a content block replicates across multiple pages and site sessions, its spacing must remain the same.

Make each button or block of content stand out with due weight in the information hierarchy.

Do not divert the user’s attention to unimportant blocks. One part of the layout should not dispute attention with another at the same time.

2. Navigation

Navigation should not be complicated! It should be easy to identify and use. It is also important to keep the navigation menus simplified, so they do not overload the user with a lot of information.

Web browsing also includes tools that help users stream through the site. Sites with parallax effect , for example, often include arrows that guide the user. A layout should be user-friendly . The easier it is for people to navigate your site, the more likely it is to get what you’re looking for before you leave.

Swing. The more menu items, the lower the depth, and the less, the more hierarchy levels displayed. Balance the navigation.

Use conventional navigation patterns . The user will not study a manual to learn how to use your site. The main menu of a site is in the header; the main logo is usually a link to the home; and so on.

Keep a standard for the weight and position of the links. The user expects to find a consistent experience. You also need to know at what level of the hierarchy a page is (the deeper, the more specific) and always have the option to return.

Give feedback. Tell the user where in the site he is currently browsing. Breadcrumbs are the most appropriate layout block for this – position them discreetly in a visible position without scrolling (above the fold).

Create interactive solutions with javascript and css – sticky headers, which remain on the screen as the user performs page scrolling, are a simple solution to keep browsing always within easy reach.

3. About Us

The “About Us” page should tell users who you are and what you do . It can be used to present the company’s philosophies and goals, or how the site was developed. It can also be the right place for positive testimonials and reviews of users and customers, as well as company success stories. This type of page can also serve directing the user to related pages and social networking profiles.

The biggest problem with the “about us” pages is that they tend to stay long and very descriptive. Keep the page as straightforward as possible; give users only the information they need to be interested in the business, not bored. Remember to keep the design interesting and invite them to get to know the rest of your site.

Use the “About Us” page to give your brand more personality. Photos of the team and place of business lend credibility to the brand. Consider an employee centered approach in the About Us and Team pages.

Tell your story. Storytelling is more than conveying information; it is surprising, provoking empathy and generating interest.

Remember that people today do not have that much time, so be brief and direct. Use image media and videos to communicate subjective values ​​and sensations without prolonging too much.

Invite the user to know the rest of the site. Add links to strategic site sessions.

4. Contact

Contact information appears in two of the most common ways: at the top or bottom of the site or on the “Contact Us” page or similar.

Either of these ways can work well, depending on the information architecture of your site. The key is to do it in a highly visible way. Presenting information like phone, address or a form to contact the site owner is the best way to give legitimacy to your project. It is frustrating for the user to try to contact you and not succeed (unless it is purposeful).

Add contact information in places always visible. This information can be displayed in the form of links to planned actions (eg, Send a message, Make a call). Buttons for automatic message via WhatsApp have been gaining popularity in sites of various niches, especially for the mobile user .

If you get customers at a physical address, include the location (a map widget like Google Maps, for example, it’s fine), if you get a lot of contacts over the phone, leave the phone in a prominent area.

Consider adding a form so the user can send emails straight from your site (and do not forget the success and error pages).

5. Call to Action

What is the purpose of your site? Your website is the gateway to your business, and you should build it thinking about what it should be most efficient. Whether it is a sale of products, services or some information gathering, you must ensure that it is being designed to meet this conversion and the invitations to that interaction should be direct and obvious – no question.

Some of the tips we’ve given here help guide you in the right direction. Dropbox, for example, is very interested that you register early, so you already propose this right on the first page. And you, are you directing your homepage to get your conversion as fast as possible?

Direct and persuasive call-to-action writing  . A striking title accompanied by a short and explanatory caption with an image, button or form.

Position the  calls-to-action  on the home page and above the fold.

Buttons should be of contrasting colors and say exactly what they are for: Buy Now, Participate, Download, Sign Up .

Conversion buttons can be repeated along the page if the user has not engaged at all.

6. Search

Not everyone has the time to search for specific content by site navigation, so search is such an important tool. Draw the search box in a discreet and easy-to-use form, but make sure the box is large enough and always visible. If you want an icon for the search use the magnifying glass without fear, it is a universal icon.

The most popular search box location (in the west) is at the top and the right.

Prioritize the simple and straightforward box design, which will be at the top of your page for search. Add advanced filtering options only when strictly necessary . Leave the search field visible whenever possible.

Do not forget the layout of the results listing.

Perform search tests, checking if the results are ideas for the search context. An example of a serious mistake would be a virtual store, whose search primarily presents blog posts rather than product pages.

7. Footer

The footer is a way to summarize your site and bring forward pages that relate to the institutional part of your company, such as social networks, address and contact. Because its location is at the bottom of the page, it is also the ideal space for a small site map, relevant links and a brief description of what the site is.

Make the footer simple and useful . When creating a footer that exposes links or buttons, the important thing is to be visually integrated with the site. It may even have a much more minimalist touch than the whole, but give it a personality.

Repeat information found elsewhere on the site (the search field on the site may be at the top of the page, in the main index, and again in the footer, for example).

Enter elements previously mentioned in this post if there is no other logical place for them in the layout.

See other footer tips in this cool post we have prepared.

8. Buttons

Every button on a website should be recognized as a button (know what Affordances are ). They must have the same effects regardless of their location or purpose. Creating a set of different buttons can be a challenging task in the case of sites with many clickable items. Consider creating a button kit to maintain consistency and visual cohesion throughout the site.

Do not forget to use statistics tracking tools like Crazyegg or Google Analytics to measure with A / B tests that button colors or sizes are giving more result.

Develop a unique set of buttons for your site that is easily replicated. It should be consistent across all pages.

Provide a large and comfortable click area. The mobile user should have no difficulties in touching.

Perform A / B tests to measure the efficiency of each button. Try changing the text, colors, and position in the layout, and measure the impact of those adjustments on the conversion rate.

9. Pictures

People love to see things in action. Create stunning visuals to please users on your site. Good pictures or illustrations are an easy way to do this. With a small set of great photographs you can display products, people, or anything to encourage the engagement of users in your website or app .

As the internet is at a stage where the weight of images is not a factor that compromises access to the site, we have more freedom to use higher resolution images, but remember to offer an alternative to mobile devices. Also be careful when using image banks ( stock images ) as a source for your site does not lose identity.

Look for a photographer or illustrator to develop and create a unique set of images. If using free stock image media, consider adding a color or effect filter so that they are, to a certain extent, unique to your site.

Offer a unique visual experience. Consider transitions and done in JavaScript or CSS.

Capriche in the resolution of the images , always with an eye on the final file size .

10. Web Fonts

Once upon a time … The time when the web was ordered by a restricted set of sources because the options that were recognized by most browsers were very limited (Arial and Verdana, who never?). Today this limitation no longer exists and we have great Open Source tools to use a much wider range of unique fonts like  Google Web Fonts  or Adobe Fonts .

However, native fonts are still very important for two reasons: compatibility and performance, so do not abuse loaded fonts and take advantage of those already available in the system. Webfonts can also be important for positioning the website in search engines (SEO) if used in place of images that would have text to say something.

Use a service with a library of free fonts, such as Google Web Fonts.

Avoid too many font variations in layout. The need to load multiple weights from the same typographic family can degrade the performance of the site.

Using webfonts to pass a message will usually be more effective than loading an image for the same purpose. Decrease page weight and better meet web accessibility standards.

Conclusion

These are 10 tips that we consider very important for the design in a blog project, virtual stores and institutional sites here in Man Machine. They will certainly help you in creating a layout that helps you achieve your brand goals and also serves the visitors.

To make an incredible layout you have to take into account the typography, colors in the interface and use a responsive design . But let’s take it easy, one step at a time. The basics you’ve already learned here

Make the best layout the world has ever seen. Do you have any tips to share with us? Leave in the comments!

The post Design: 10 Tips for a Flawless Layout appeared first on Web designing Bangalore.

https://ift.tt/eA8V8J June 29, 2019 at 05:52PM