#Syndicode UI/UX design

[syndicode]

Best books and resources for UI/UX designers in 2019

UI/UX design is one of the main parts of any project. Here in Syndicode, our UI/UX designers are engaged in the development processes and can determine the possible future requirements of the application in early stages. From user research to information architecture and from prototypes and...

[inventiba]

Extensiva Guía & Terminología UX & UI [5/11]

A propósito del extenso artículo de Irene Korkishko (Syndicode) sobre UI & UX, preparamos 11 pequeños artículos con lo mejor.

Partes del diseño de interfaz de usuarios

Diseño Visual

Se encarga de la estética general del producto y de enganchar con la audiencia con principios de user-centered design (diseño centrado en el usuario). El objetivo principal del Diseño Visual es darle forma y mejorar la UX con la ayuda de ilustraciones, fotografía, tipografía, espacio, diagramación y color. 

Colores

Elegir los colores correctos para un proyecto es muy importante debido a las asociaciones psicológicas con emociones y significados. También es importante seguir los colores de la marca y usarlos sabiamente dependiendo en el diseño que se desee lograr y el mensaje objetivo.

Diseño Gráfico

El diseño gráfico es responsable por combinar imágenes, tipografía o animaciones para impresionar a los clientes. El diseño gráfico busca la perfección a nivel de pixel. Esto es para asegurar que los textos tengan un espaciado perfecto y los colores son los indicados por la marca. El diseño gráfico es una disciplina especializada, y hay un cierto nivel de artesanía y un juego de habilidades especializado (tal como uso de tipografías y teoría del color) requerido para producir visuales geniales. Usualmente la confunden con el Diseño Visual.

Mockups 

Un mockup es un modelo a escala o tamaño real de un diseño usado para demostrar, evaluación de diseño, promoción y otros propósitos. Los Mockups se idearon para mostrar el acabado final del diseño con detalles visuales, tales como colores, tipografías y texturas. Los Wireframes, mockups y prototipos suelen confundirse, pero sencillamente representan diferentes etapas del flujo de diseño. Un wireframe es un modo de baja fidelidad de presentar un diseño, delimita únicamente las estructuras y diagramaciones. A diferencia del wireframe, un mockup luce más como un producto terminado o prototipo pero no es interactivo ni clickeable. Los mockups son usados para ofrecer un rango de opciones para estructurar pantallas en diferentes aplicaciones. Junto con las diagramaciones, ayudan a organizar el contenido para asegurarse de que sea comprensible para el usuario.

Tipografía

La tipografía es una fuerza que se mueve en todas las formas de comunicación artística. Esta es el arte y ciencia de darle estilo a las fuentes, apariencia y estructura, la cual se dedica a entregar tanto la estética como la facilidad de lectura a los lectores. La tipografía ayuda a agregar una impresión poderosa a sus mensajes en cualquier tipo de proyecto. Una buena tipografía debería:

Trabajar bien en diferentes tamaños

Poseer caracteres o letras fácilmente reconocibles

Tener una jerarquía identificable para mejor percepción (tamaños descendentes).

Adicionalmente, hoy en día el diseño UI depende bastante en el diseño en moción o animaciones, los cuales crean retroalimentación instantánea con el usuario, crítico para cualquier tipo de interfaz de usuario. Las animaciones, efectos visuales y pantallas de transición tienen un impacto tremendo en cómo los usuarios primerizos  van a interactuar con la app, por ejemplo.

[theboinalagoa]

The main task of UX design is to create products which can be tailored to meet a user's specific needs, but which provides functionality that is predictable. In other words, UX Design is to study user behavior and understand user motivations with the goal.

“UI/UX Design services”, Syndicode

[goodcore101]

Custom software development process stages

One by one, here I described all development stages for custom software we follow in Syndicode (the agency I work in). Custom software development process stages in details.

In my custom software development handbook, I talked about and shared different nuances to consider before someone hired a dedicated development team to work on a product. In addition to access to the core business data, signing an NDA, and many other non-functional but important issues, you have to understand custom software development process stages.

Custom software development is an iterative process that goes through defined process stages to implement all the required features and reach the desired result. Even if we aim to create a custom product specifically tailored for the specific group of users or an organization, the development process still heavily depends on software development methodology your software development partner follows. (For example, Syndicode follows Agile methodology). But the main iteration stages are pretty similar.

Сustom software development process

includes the next stages:

Analysis and Planning

— a collection of requirements,

— research,

— changes management,

— risk management,

— software architecture.

Design

Development

— backend development,

— frontend development.

Quality Assurance and testing

Intermediate deliveries

Documentation

Maintenance (software evolution)

Reporting

If you’re looking for details, here they are.

Analysis and Planning

Collection of requirements in custom software development is a cornerstone. At this stage, we understand the niche, business values and plans of our client. Whether the client wants to launch a web app for logistics or develop an IoT platform, together we need to go through a Discovery Session. This is a meeting (online or offline) between client’s and developer’s team the main purpose of which is to define a tech stack and product’s features to be implemented. Tech stack for custom software development might contain a bunch of different technologies like Ruby, PHP, NodeJS, GoLang, Python, Swift, Kotlin, Elixir and so on… They are defined according to a technical specification created by software architect or lead developer. Find out the other Discovery Session tasks, key participants, timeframe and results.

Software development research aimed to understand the current tech trends and main characteristics of the technologies meant to be used in this particular project. All the difficulties and best practices count. Apart from the tech side, project manager and business analyst do research about implementation and maintenance prospects. SWOT for current competitors should be prepared as well. After this research, we usually create a plan for the software development process and wait for the client’s approval.

Changes management helps us to prepare, equip for and adopt all the possible changes that might appear during the process of custom software development. Because we might face changes in tech, design, business needs and priorities from the client or even the end-user anytime. Changes management is connected with risk management in software engineering. Here, risk management stands for risk containment and mitigation. We should be ready to act when a risk arises, drawing upon the experience and knowledge of the entire team to minimize the impact to the project.

There are 5 types of risks you can face working in a software development company:

New technologies (that are not tested yet)

Functional requirements There is a risk that the change in elemental requirements will likely propagate throughout the entire project, and modifications to user requirements might not translate to functional requirements.

System architecture Wrong platform, component, or architecture can have disastrous consequences.

Performance Users’ and client’s expectations on performance should be met no matter the changes and failures occurred during the process of product development.

Organizational This risk heavily depends on reliability and professional skills of your software development partner.

Design

If you’re developing a web or mobile application, one of the major things you need to get right is the way your app looks and feels. For example, if your field is eCommerce, a poorly designed app will lose you many potential customers. That is why visual design, your brand identity and user experience of your digital product play one of the most significant roles. I devoted a whole page to describe the purpose of the great UI/UX design, the main terms, history, some examples and processes for design development — read a comprehensive UI/UX design guide.

Development

Backend development handles the functionality of web applications. You can’t see it on the screen but every interaction in the human-computer system is possible thanks to backend development. Backend development refers to the server side of development where you are primarily focused on how the site works. It is code that manages user connections, connects the web to a database, and powers the web application itself.

Here in Syndicode, we work with many different languages for backend development, but Ruby is our language of choice. Ruby on Rails (Ruby’s main framework) backend development helps the workload become easier for the architects and developers through the collection of pre-packaged codes that make the development of the backend seamless and fast. It makes the entire programming a lot speedier and more profitable. As far as most businesses now want to get a web application, I compiled the list of the reasons why Rails is ideal for web app development. And here you can explore the examples of the most famous web applications built with Ruby.

Talking about frontend development I mean everything you can see on the screen. Look, feel and design — that are the 3 main parts generated by code for your digital product in frontend development. Frontend development is focused on the client side of development and responsible for seamless user experience.

In Syndicode, we use JavaScript and its main frameworks like React and Angular (and explore Vue.js as we see a lot of potential use cases for it). Also, we work with CSS and HTML.

For custom mobile development we use Ruby on Rails for mobile backends and RESTful APIs. When there’s no need for heavy effects or computations we use React Native. This technology is beneficial for marketplaces and CRM, or projects where you need just to duplicate what you have on the web and add some geofencing, notifications, and other mobile features. For native development of iOS applications, we use Swift. The same story with Android SDK — we choose it in cases when features could be implemented only in native tech stack. Also, when it’s required in the project, we work with Python, Node.js, and PHP. Also, we are big fans of Flutter.

Of course, the tech stack for custom software development might have every possible configuration, depending on the client’s needs, and we are not bound to one technology just because we like it.

QA and testing

Quality assurance is a set of activities for ensuring quality in software engineering processes. This stage ensures that software meets and complies with the defined or standardized quality specifications. QA is a process that checks the developed software to ensure it meets the desired quality measures.

Software testing is the process of checking developed software for any mistakes or bugs. This helps to validate and eventually verify the product as to whether it is ready for the market.

What is the difference between QA and testing? Put is simply, QA enhances the quality via improvement of the development process and testing enhances it via finding bugs.

Intermediate deliveries

Intermediate deliveries great because they help to provide a fast feedback loop that immediately show developers the effects of their work. Mistakes are fixed quickly, while beneficial changes can be released and deployed to customers without having to wait for a distant future release date. Find the example of continuous integration and delivery with Github, Gitflow, and Jenkins.

Documentation

Development documentation stage encompasses all written documents and materials dealing with software product development. Except for pre-development documentation (where you should describe:

vision statement;

initial assessment document with stages of development;

roadmap;

technology stack;

software requirements specifications;

wireframes and UX roadmap),

you also should add documents created in course of the software engineering process. There are only two main types of them:

coding documentation;

testing documentation.

Also, software development agency must provide post-development documentation that includes:

support papers, and

users manual.

Maintenance

Software maintenance is a continuation of the collaboration with the client to improve, modify and update software product after delivery to correct faults and to improve performance. There are 4 categories of software maintenance:

Corrective — to rectify some bugs detected while the system is in use, or to improve the performance of the system.

Adaptive — to modify and update when the customer needs the product to run on new platforms/operating systems/hardware/software.

Perfective — to support the new features or to change functionalities according to the customer’s demands.

Preventive — to prevent future problems of the software. Some problems might be not significant at this moment but may cause serious issues in the future.

Reporting

Reporting helps us to inform our client about the current stage of development or issues found or solved during the software development process. This is a critical part of effective project communications and management strategy. As in the early stages of development so as in the middle and when the product is released, we prepare a project status report. Also, there is a project management report that includes:

general product info;

status Info;

milestone review;

project summary;

issues and risks;

projects metrics, and so on.

Reporting keeps the client updated to what is happening with the custom software during its development. And reporting generates trustful relationships between a software development company and the client which guarantees transparency and loyalty — the key factors of successful cooperation.

This part of the story was related to the process you’ll go through while developing your product. But there are also aspects a business owner should consider long before the development starts. Such aspects as innovations. To be successful you have to embrace new technologies and hacks available nowadays. Do you want to know what innovations can grow your business and save money?

Thanks for reading!

(Content Source: https://syndicode.com/2019/05/23/custom-software-development-process-stages/ )

[sinceramentenonso]

A longread aimed to gather all the theory about UX and UI design processes for creating web and mobile application design Originally I shared this guide to Syndicode blog to describe UI and UX design…

[syndicode]

The basic rules to create the great User Interface design

We assume that you already know the main UI techniques and prototyping tools. But there are also some best practices in user interface design that have proved their efficiency and transformed into rules. Syndicode made a scope of the basic rules to create the great User Interface design! To...

[syndicode]

The UX design pyramid with the user needs

As UI/UX design agency, Syndicode follows the main rules of UX and UX design to obtain the best results in crafting unique and appealing design for web and mobile apps. Let’s talk about the main requirements for the UX design. What should be the perfect User Experience design? The answer to this ...

[syndicode]

Personal touch patterns for better mobile UI design

But as UI/UX design agency, Syndicode likes to dive into details and deliver the maximum information on the topic. Today we are going to explore how to use personal touch patterns for better mobile UI design. Read on! So, how it works? When you try to write a message without typos during some...

[syndicode]

UX and Design events to visit in 2019

As UI/UX design agency, Syndicode tries to keep an eye on the most interesting design events and conferences. If you share our interests you might find this list of UX and Design events to visit in 2019 quite useful! Visit at least one to master your skills and find a new inspiration! We have 96...

[inventiba]

Extensiva Guía & Terminología UX & UI [2/11]

A propósito del extenso artículo de Irene Korkishko (Syndicode) sobre UI & UX, preparamos 11 pequeños artículos con lo mejor.

Proceso de Diseño UX

Investigación de Usuario Diseño

Wireframing UX

Prototipo UX

Diseño UI (visual e interacción)

Pruebas de Usuario

Aproches principales en el proceso de diseño de UX

Actualmente hay tres muy bien conocidos aproches de diseño UX:

Clásico

Un proceso de diseño clásico es usualmente enseñado en los colegios y es construido usando la metodología de cascada. Aquí está el típico proceso de diseño clásico:

Investigar los principales problemas, aquí deben ser descubiertos.

Categorizar los problemas que fueron descubiertos.

Crear personas y mapas de viajes (no confundirlos con los flujos de usuario).

Ejercicios de ideación para generar soluciones y resolver problemas revelados.

Construir el prototipo basado en los flujos de usuario y el diseño de interacción establecido.

Probar el prototipo.

Enviar el prototipo final a desarrollo.

Recoger feedbacks de usuarios.

Regresar al primer paso con el feedback recibido.

Lean

El proceso de la metodología Lean se creó para que trabaje dentro de la metodología Agile de desarrollo de software ya que el método clásico era incompatible. Se puede pensar en el aproche Lean como “Piensa, Hazlo, Revísalo”. Sin embargo posteriormente este proceso pareció ser ineficiente cuando el plan del producto no estuvo bien definido, resultando en pérdida de tiempo significativo y de trabajar nuevamente todo.

GV (Google Ventures) Design Sprint

Este es otro proceso de diseño sugerido por Google Ventures: Design Sprint. Le permite a los equipos definir rápidamente y probar prototipos de baja fidelidad. Se puede considerar que Design Sprint es una combinación de tres aproches: Design Thinking, Agile y Lean. Un componente clave de sprint es la creación de un prototipo, el cual es uno de los mejores modos de obtener datos y probar ideas.

Todos los aproches tienen los mismos componentes pero una organización diferente en cada aproche permite responder preguntas diferentes.

[syndicode]

InVision released Animation Handbook with principles of motion design in UI

The animation is not the art of drawings that move but the art of movements that are drawn. We know the value of animations for the modern web, that’s why we couldn’t miss the news about InVision released Animation Handbook with principles of motion design in UI. And we would like to ...

[syndicode]

15 rules for professional UX designers

Last time we shared with you a thoughtful material about UX design pyramid with the user needs. You should take this into account when developing a new design. But at the same time, there are 15 rules for professional UX designers you must know and follow everytime. Here they are! Here are the...

[syndicode]

10 UX researchers to follow

As UI/UX design agency, recently Syndicode shared with you a great material by Dr. David Travis that helps start working on the project’s design by presenting the UX research process in10 diagrams. And now we prepared an article about 10 UX researchers to follow that can help you to master your U...

[syndicode]

The main UI design elements

In our comprehensive UI/UX design guide we had briefly described the main UI design elements. But as UI/UX design agency, Syndicode can’t just leave it like that. We want to dive into details and deliver the maximum information on the topic.  To start with, you have to understand that from ...

[syndicode]

UX research process in 10 diagrams

While Syndicode was preparing our big UI/UX design guide, we found a great material by Dr. David Travis that helps start working on the project’s design by presenting the UX research process in 10 diagrams. 2×2 diagram is a simple way of looking at a problem. You consider each of the...