UI Design in Augmented Reality

Augmented reality becomes more and more embraced by developers and users. We already have some AR experience with hits like Pokemon GO and cute Instagram filters. As it is fun to use apps that offer it, for designers creating them can be a challenge. Let’s see why.

What is AR?

If you know these apps we mentioned in the intro, you probably know more or less what augmented reality is. But let us explain real quick. Simply put, AR integrates virtual elements with the real world. So you can see a dancing dwarf on your carpet in your living room. Or you can catch Pikachu that is hiding on your parent’s porch. Or you can put dog ears on our own head. You get the idea.

It’s worth noting that Google and Apple already introduced their AR development platforms some time ago. That’s proof that augmented reality is something to be alert about.

The difference between AR and VR

Virtual reality is often confused with augmented reality, but the difference is really simple. VR offers a fully created new world, without any elements of the physical world we are the part of – even if the experience is quite similar to it. AR connects the virtual world with our own – mixing elements together to give us some new opportunities.

Comparing them wouldn’t even make sense. They can be used for alternative purposes and each of them is one of a kind.

Here is an example from Wanna.by:

Design in AR

We’ve mentioned design trends for 2020 already on our blog. Now we want to add one more – AR in UI. It can explode more than ever, as we need to stop always thinking about UI that is fixed to a screen. 

What will be the key when designing a user interface with augmented reality in mind, is to create experiences that feel like they are a part of the real world. Blending virtual objects with reality is not easy, but learning it can be a key for all innovative projects that spawn every year.

Let’s start with the basics and then analyze the obstacles in UI design related to AR.

Types of UI design for augmented reality

There are a couple of different approaches when it comes to user interface design for augmented reality solutions. We distinguish:

Object-related design

In this case, we can have two different situations. The first one is that real-world objects have a certain interaction connected to them. The second one is showing a digital object after scanning a marker.

Real-world related design

These AR apps use the world around to display certain elements – for example, restaurant reviews.

Fixed to screen design

All the elements are locked in the screen space, so the user has to position the camera in a certain way for AR to appear.

What you should consider when designing AR?

When creating extensive reality, there’s a couple of things you need to have in mind. This way you can provide a positive experience for every user. These 3 S rules will help you to understand what matters most:

Simplicity

If there’s too much going on, you can be sure that no one will be satisfied with what they see on the screen. Be sure to give each action a clear context, don’t overwhelm the audience with too much data and explain the meaning of every element.

Check out this example from Behance:

Surroundings

Remember, that AR becomes a part of reality – so you need to design it in a way that will help it respond despite all the external conditions. That includes lighting, indoor/outdoor situations, movement and more. You can’t predict everything, but probably most of the scenarios are pretty repeatable. If you notice something is not working in certain patterns – fix them ASAP.

An example from IKEA:

Security

What’s most important, is that AR is complementing reality with digital objects which means it can be distracting for the user. Make sure using it won’t lead them to dangerous places or to make unwise decisions. Also, prevent physical injuries by not requiring weird movements.

Also, because AR often uses the camera and other hardware and operating system features – take care of data safety.

2D in AR

When we think about AR, the question arises – should the designed objects be 3D or can they also be 2D? The answer is not so obvious because it depends. Flat, 2D objects can be less distracting so they are great for notifications and controls displayed on the screen. Actually, putting too much on the screen is not recommended in almost every case. For controlling features and text it is always better to put them in someplace that doesn’t intrude on the main experience.

So what’s next?

There is no doubt that AR is a huge trend in UI design. Wearables like glasses and headsets that use augmented reality will become more popular every year. Google and Apple are already working on them – right now it seems like not a lot of people will become their users on a daily basis but that can probably change with decreasing prices and growing functionalities.

For all UI designers, it might be wise to consider learning more about augmented reality. Find out how to make it right and consider all the difficulties it might bring. New trends in the digital world are approaching fast so being updated is the best we can do for our work. Probably more and more clients will require some skills and knowledge in AR. Hopefully, thanks to this article you will know where to start.

And if you’re looking for seasoned designers with many competencies to offer – let us know what you have in mind. Let’s create something extraordinary together!

10 Popular IT Acronyms You Need To Know

If you work with a digital agency, you probably will hear some of the acronyms we explain below. Knowing them is crucial not only for communication but also for a better understanding of the process of software development.

Why do we use acronyms anyway? Well, it’s just convenient. We probably don’t save hours, but saying and writing long names of all the terms can be annoying.

Acronyms, or should we say abbreviations, are short versions of words or names, usually created from initial letters. People started to use them long ago when computers weren’t even existing yet. Writing “FBI” instead of “Federal Bureau of Investigation” or “NASA” instead of “National Aeronautics and Space Administration” could save lots of space on a paper and ink in a pen.

In the IT industry, acronyms are very popular. There are so many specialistic concepts we use and lots of them have their acronyms. Today, we will explain the most common ones for everyone who is collaborating with a dev house or is considering it in the future.

UX & UI

Let’s start with two acronyms we use very often at iteo. In web and mobile design, these are very important. We describe them together, because, although they are different things, they complement each other and are often a part of the whole design process.

UX is short for “User Experience”. UX designers are responsible for people’s feelings when using an app, a website or other software. They create interactions between the user and the product, caring to deliver a positive experience. People who want to work in this field should know not only what colors are easy on the eye or what kind of interactions are most intuitive, but also they need to understand cultural contexts, symbolics and other factors that shape user’s reactions. What’s interesting, is that UX is not a term that was created in a digital environment. UX design is practiced in all sorts of industries – to make our surroundings convenient to use.

UI stands for “User Interface”. UI designers create interfaces that we, as users, see every day. They are responsible for making them easy-to-use and effective. Unlike UX, this is a strictly digital kind of work. Designing UI is all about colors, typography, buttons, icons, interactive elements and all that jazz we see when we use a digital product. If their job is done properly, we receive a piece of software that we use with pleasure, not thinking too much about all the steps we need to take to use it. That’s because good UI makes it all logical for most of the users and they can focus on main functionalities instead of wondering where is the button that will make it happen.

Too complicated? Here’s a quote that will simply explain the difference between those two:

“The main difference to bear in mind is this: UX design is all about the overall feel of the experience, while UI design is all about how the product’s interfaces look and function.”

UX and UI work great together to give the user the ultimate experience. Both done with attention to the detail result in a good-looking product that is highly functional.

MVP & PoC

We wrote a whole article about MVPs and PoCs. Another two popular acronyms in software development – often used in the process, so every client should be aware of their meaning and purpose.

“Minimal Viable Product” (MVP for short) is the most basic form of an application. Usually, it is made to verify the idea – it is shared with potential users so they can test it and leave feedback. To cite our mentioned article: “It should have core features and basic design so people who use it can focus on its functionalities. The main focus of MVP is proving value proposition.”.

Proof of Concept (PoC) is also used to validate the project, but it is usually created for internal purposes. Its main goal is to determine if the idea is viable. This quote will explain it thoroughly: “It gives all the project participants fast clarification if the concept is worth pursuing. It’s also the cheapest and safest way to test it beforehand.”.

Preparing an MVP or a PoC helps with the validation of the product idea, which can reduce additional costs. Also, seeing the “live” version of the project, even when its basic, can help determine if it will be sufficient to fulfill the business needs that were established at the beginning.

QA

This mysterious acronym stands for “Quality Assurance” and is a more correct name for what we call testing. Why software tests are important, we already explained in one of our blog posts. QA is the whole process of finding bugs in developed products and giving feedback that helps to fix them. It’s one of the most crucial processes in software design – without this step, a lot of apps could not work improperly.

HTTPS

You probably know this acronym – you could see it not once not twice in your web browser. Websites that have HTTPS before their WWW can be considered secure for your data. “Hypertext Transfer Protocol Secure” is used for safe communication in the online environment. It prevents all the information sent between computers from hijacking and editing by third parties. It encrypts them all with a TLS or SSL which are acronyms as well.

Authentication of a website is based on certificates provided by another entity. Nowadays most browsers block pages that don’t have HTTPS. This protocol is very important to protect our information, especially during online payments.

CTA

Let’s leave the topic of security for now, and focus on the marketing of your business. CTAs are also a part of the design – because when working on digital products, designers need to decide where to put a “Call to Action” button or notification.

CTA is supposed to encourage users to take concrete action. They are put on landing pages, inside mobile apps and on websites. Being a part of the sales process is just one of their functions. They can be a great way to collect newsletter subscribers, tell the users to download your freebie or send them to the next piece of content on your blog.

API

“Application Programming Interface” is a set of concrete rules and descriptions for communication between computer programs. It is used to simplify all the processes between certain pieces of software. Often used in development – for example when an app needs to connect with the client’s internal system, it sends a request to its API. Simply put, afterward, it receives an answer on how it should react to the user’s action.

CMS

If you own a website or a blog, you probably need to change its content sometimes. With CMS, which is “Content Management System”, it’s easy. You just log in to your administration panel where you can find all available options – to add a new article, change a picture on the page and more. This way you don’t need to know even the slightest bit of code to edit your webpage.

Usually, when you collaborate with a digital agency that creates a website for you, they provide a CMS with it so you can easily manage it after finishing the project.

VPN

Security is more than important – at work and in life. Privacy is another thing we like to protect in today’s world. VPN which is “Virtual Private Network” can be useful in this case.

VPNs come in a form of software that allows the user to extend their private network. They are often used in big companies that want to share their internal resources with remote employees or between offices in different locations. Data sent between computers in the network is compressed and encrypted, so the process is efficient and the information is protected. These attributes are also appreciated when working with clients – so their files are safe when sent to the business partner.

Now you know a little bit more about acronyms we use all the time in the IT industry. These are just a handful of all the abbreviations we say and write – but probably the most common ones. With this small vocabulary provided above, you will understand more when collaborating with a digital agency. And we will explain the rest to you when it is necessary. Just let us know what you have in mind – let’s work on your extraordinary project together!

The Next Big Thing: Illustration trends for 2020

The background

Last month my colleagues wrote about our expectations in UX and UI design for this year, also mentioning illustration. As a UI Designer, but also an illustrator, I try to keep up with new trends. Of course, it’s not necessary to follow them – but it’s great to see what other illustrators create, what new tools they use. It’s not only about scrolling through Dribbble or Behance though! We can get inspired by new music videos, mobile games, performance art, culture or even current events.

Let’s get into some of the biggest illustration trends for 2020 with my commentary and, of course – some of my favorite examples. 

#1 – 3D is here to stay

As the years 2018 and 2019 progressed, we had a chance to see more and more 3D graphics. Glass, metal, fur or plastic – 3D textures are getting realistic and it looks awesome. 

Big brands like Spotify or Huawei incorporate them into their campaigns, especially mixing 3D elements with photos, videos or typography. My personal favorite is Joseph Melhuish – in the recent project he used beautiful, expressive 3D render with photos of bottled water called “Arto Lifewtr”. 

I also really enjoy seeing vivid textures on unrealistic, deformed, fantasy-like shapes and it’s definitely something that’s creating the wow-factor we always strive for. 

The 3D effect is especially desired for commercial campaigns and innovative real-life products. Using them in mobile apps and websites is more than welcomed.

Leo Natsume | Brain Dwad | Philip van Heerden and Cherie Cordier | Joseph Melhuish

#2 – Isometry is not dead yet

Remember that episode of Bold and Beautiful where we all thought Ridge Forrester died in flames, but he actually survived and was better than ever? That’s how I see the isometric trend we all got tired of in mid-2017.

3D hype also impacts other styles of illustrations – the isometry we see today is refined to more realistic forms, shapes and perspectives. As a designer, I’m not quite ready to brush off my isometric illustration skill – I’m looking forward to improving it with some realism and complex textures. I’m truly inspired by the amazing work of Andrew Nye as he pays attention to the composition and palette of the whole visual, but also polishes every detail. His illustrations definitely captivate the viewers and let them immerse themselves into the small world of each piece.

Isometric visuals are great for explaining abstract technological concepts, as well as companies or product advertisements. What’s really awesome about this style is that with the right grid we can show the complexity of a city or detailed product – all with semi-3D effect, but with lesser effort than it would take to create real 3D render. 

Andrew Nye (1 & 2) | Vadym Presniakov | Khyati Trehan

#3 – Shapes! In all forms

Simple shapes still inspire us in 2020. Don’t be afraid to have fun with a new color palette, because the result can be unique, fun and fresh. It could be a safe choice or a crazy one, depending on how you use this style. The great thing about it is that it’s easily scalable and easy on the eye. 

If you want your product to seem simple to use, or fun and youthful – it’s a trend for you. I’m looking forward to seeing how it will evolve throughout 2020. 

Algo 🤖 + ILLO Studio | Leta Sobierajski + Wade Jeffree | Tianqing Li | studio 6.8

#4 – Big, Bold and Beautiful

One of the most interesting trends these days is using creative typography in brand identities. Strong sans-serif fonts can really upgrade your company’s slogans and, when used in an interesting way, can either replace or enhance illustrations. This typography trend is expected to evolve and flourish in 2020. Don’t hesitate to play with letters and remember – thick is beautiful.

Brain Dwad | Carolina Aboarrage | My Name is Wendy Studio | Fatih Hardal

#5 – Heavy metal 

Remember old heavy metal covers with metallic elements and crazy typography? It comes back in a big way. The metallic effect in typography and illustrations adds elegance and confidence to whatever text or idea you illustrate. This trend is sometimes used in poster design or in branding and looks well with a minimalistic design. My favorite example is &Walsh branding by Jessica Walsh. Seemingly simple typography is mixed there with beautiful metallic signs.

Used in print, it can truly enhance your business card, packaging and, of course, album cover.

Plus, it’s super cool.

Blake DBDS | Water Prouf | Jessica Walsh | Afonso de Matos

#6 – Flat but realistic

2019 was the year of geometrical and linear characters and a new year is a great opportunity to try something different! Stripping down the illustration to its essentials – minimal palette and simpler shapes – can create elegant and captivating visuals without unnecessary details. Don’t forget about shadows – it also adds to the atmosphere and sometimes focuses on the user’s sight on more important elements.

Robert Kalfas & Joanna Dudoń / Gamba Studio | Brain Dwad | Joanna Ławniczak | Jiaqi Wang

#7 – Include and inspire

One of the best ideas 2019 has brought us is inclusiveness in illustration. It really shows that beauty and creativity come in different forms and colors. You can play with proportions and geometry of a body, clothes your character may wear and much more. It’s cool to show each character’s personality because diversity is real and it captivates the viewer. 

Consider this idea especially when creating brand illustrations. 

Roberts Rurans | Ömer Faruk Yılmaz | Chloé Nicolay | Braća Burazeri

Be yourself

I think it’s important to remember that while creating illustrations for apps, websites or brands trends come and go. You don’t want to create (as an illustrator) or buy (as a client) something that is going to be outdated in a year. 

My solution is to be yourself. Come up (or let us come up) with something that truly represents your brand, even if it will take longer to create – like Alice Lee for Slack, Mailchimp drawings or… our one line illustrations!

How to Become a Software Developer

For some people, coding seems extremely difficult, while others find it super easy. Give it a try – if it’s hard to understand for you, then maybe being a developer is not your destiny. But if you belong to the second group – becoming a programmer might be something for you. This way you can discover your new passion and career prospect.

IT specialists are one of the most wanted groups of employees. Digitalization of the world, businesses that want to expand their operations online, new startups that use technology to make our lives easier – they all need talented coders to make their visions come true. Working in a digital agency as a software developer can help you be a part of this exciting scene. Also, you can really impact the future by creating innovative apps and programs – like the next social media platform that will conquer the online world or the product that will actually save lives.

So how to become a dev? Let’s see!

There is more than one way

Ask a group of programmers in a digital agency what was their path to their profession – each one will have a different story.

Some have known they liked computers since kindergarten and they have been pursuing IT careers their whole lives. Others discovered the potential of this industry while in college and switched degrees to find out some more about technology. Some devs worked in a completely different place but got bored and decided they needed a change – so they learned how to code.

If you ask for their opinion, it will differ depending on the person. So we did just that. We asked iteo software developers how to become one of them. Here’s what we found out.

Do you need education?

There are three options when it comes to education in this field. One is to go to college and study computer sciences. There is no actual degree in programming but usually, when you pick IT-related studies, some coding lessons are included. Another way is to participate in a course. There are many schools dedicated only to teaching their students how to write code.

There’s also a third option – to be a self-thought kind of developer. It might seem risky because the only thing you have while learning a programming language is yourself and some kind of information found probably online (or maybe a book? is that still a thing?). But iteo developers agree that to become a good software-creator you need to repeatedly write code. Learning on your own mistakes and solving difficulties will help you gain experience and think like a seasoned dev.

So you don’t need to invest your time, money and energy in formal education but it might be helpful to sort out your knowledge. What’s most important is to practice – a lot. Some say that gaining most experience comes from commercial projects, teamwork and solving everyday problems.

Decide what kind of dev you want to be

There are many languages used to create software products. Also, there are different types of programming. We have a couple of divisions that describe developers, depending on what they do and for what purpose.

Two of the most basic groups are web and mobile devs. And the latter can also write code for either iOS or Android devices. So that’s that.

Then we have front-end and back-end developers. First one needs to have a high sense of aesthetics. The second one should be good in logical thinking. They work together to make the product visually usable while it is delivering its technical purpose. And if you feel like both of these areas are interesting for you – there’s always a path of being a full-stack developer. 

Picking a framework you will work in is more of a trial and error thing – especially at the beginning. Try different options and see what’s most suitable for you. No one said you can’t know more than one programming language. That’s why…

Learn… like all the time!

The tech industry is one of the most evolving ones. Sometimes changes appear within days or weeks. That’s why if you want to be a developer you need to constantly learn new things.

Not only to be better at what you do. But understanding different frameworks, being up-to-date with trends and finding connections between various parts of the software development process will make you more fulfilled and flexible in your work. We can’t imagine a dev that specializes only in one language without knowing at least the basics of some other ones. This job requires openness and willingness to always learn.

Free online courses, videos on YouTube, articles on industry portals – you name it. Keep yourself updated and if you find something useful – try it. This way you will learn new things and maybe even discover another IT field you want to explore in your professional maneuvers.

Communities online and offline

Sharing experience and knowledge with other developers can be one of the best methods to improve your coding skills. That’s why being on GitHub can be a big part of your journey. This hosting environment allows fellow devs to publish their software projects. Thanks to that they can provide code reviews for each other and discuss certain issues. It’s a community of programmers and for them.

Looking for answers? Try Stack Overflow which is a Q&A website that associates devs so they can help each other solve code mysteries. And if you want to talk with real faces consider visiting one of the meetups organized in your city or nearby. 

These meetings are organized by programmers for everyone interested in certain topics. Usually, they are focused around one specific technology – for example, Flutter or React Native. At iteo, we often participate in such events and sometimes we even do presentations. This is a great opportunity to network and learn new things. We recommend all beginners to come to meetups.

Just code!

Last but not least – a tip that will be a gamechanger. Do projects ALL THE TIME. Code as much as you can. Create stuff, even if it’s just for yourself – but share it with online communities that we mentioned above. Learn from others but also shape your unique style as a software developer. You can start with an easy thing like a calculator or a drawing program for Secret Santa (true story!). Then escalate your skills and knowledge and try something more complicated. Practice makes perfect.

We hope this short guide will help you to determine if being a programmer is for you. It’s a very satisfying but also demanding career path. If you even consider it – we recommend trying. You can gain a new passion and ability to create some extraordinary products – for example by working at a digital agency like iteo. For inspiration – check out our career page and see what are the prospects.

Start a Career in a Digital Agency This Year

It’s a brand new year and some of you might consider your next career move for 2020. You want your job to be challenging and rewarding and of course to get well paid. You can find all of that in a digital agency that creates software for international clients.

The high and growing demand for IT products is indisputable. That’s why digital agencies and dev houses are hiring new employees each year. Their businesses grow together with their clients’. And to expand, they need manpower that will create code, take care of clients and coordinate all business operations.

It’s easy to forget that digital agencies hire not only programmers. Every company needs different specialists to handle all the areas of expansion. Administration, marketing, sales, design, QA – without them all, a dev house is like a donut without a filling 😉

So if you cannot code but your interest in new technologies is strong, you can still consider a career in a digital agency. Here’s a couple of tips on how to do it.

Your current situation

Depending on the level of your education and experience, you need to consider a job that will be suitable for you. If you are still a student or a fresh graduate – applying for an internship would be a great idea. It will give you an opportunity to gain all the knowledge needed to pursue a career in IT in the long run. And a chance to be hired afterward, too!

For more seasoned job-seekers, the question is – what are your skills? Are you looking for a chance to change the entire course of your career or you just want to switch the environment? Answering these questions will help you determine which position you should apply to.

In many IT companies not only developers can be juniors, mediums or seniors. Also account managers, business executives, HR managers and other members of big company branches can upgrade their position by being promoted. Why are we mentioning that? Because if until now you’ve been an accountant at a financial firm but you dream to be a project manager at a digital agency – looking for a junior vacancy can be a good start. Demands will be much lower and you will have a chance to learn from your colleagues.

What’s important is to be confident in your knowledge and skills. Even if you have never been an HR specialist or a social media manager – your resume should underline all your people skills or basic knowledge of Facebook. And during the recruitment process be sure to prove that you know what you are talking about. Show the employer that you are willing to learn and that you are confident in your goals.

Tech knowledge – or at least an interest

Yes, if you want to work in IT – you need to know at least a little bit about technology. That doesn’t mean you need to know how to develop software. But knowing the names of programming languages, being up-to-date with trends, understanding business purposes of digital products is a must.

Not feeling like it? Share your skills somewhere else – specialists are needed in many places like advertising, finance, automotive, fashion and more. Dev houses grow rapidly also because there is so much going on in the online world. Artificial intelligence, the Internet of Things, new models of smartphones – we need to keep all of that in mind when working on our products.

That’s why sales, marketing, HR, account and project managers need to know what’s up in the world of software development. Every company has a different field they specialize in, so when you send your resume to a specific agency – check out their website and social media profiles. Learn as much as possible about what they do – not only names but facts as well.

What matters is your interest. No one will kill you if you don’t know all the details, but knowing basics is a must.

Certain traits

Working in a digital agency requires some attributes because it is a peculiar workplace. Do we need to mention knowledge of the English language, as most dev houses work with clients from around the world?

First of all, oftentimes we need to work under the pressure of time and with constantly evolving conditions. Clients changing their minds, sudden problems found in testing, special requirements for a project – you name it. Resilience to stress, quick reacting, flexibility and can-do attitude make this job a lot easier.

Solving difficulties and proposing creative solutions is the core of our operations. That’s why every digital agency team needs not only exquisite specialists with great hard skills but also open-minded individuals that know their soft skills. Additionally, there would be no good dev house without teamwork, so make sure you like to cooperate with others.

Company culture expectations

There are many types of digital agencies. What distinguishes them from each other is not only their fields of expertise. There are bigger and smaller dev houses with different structures, rules and styles of work.

For example, some software development companies allow their employees to work fully remotely. Most of them offer one or two days per week. Other benefits usually depend on the size of the firm so check the recruitment announcements carefully to find out what you can expect.

Also, the website should be a source of useful information about company culture. You can find out if the team is integrating regularly and how they do it. What methods (eg. Agile, Scrum) they use for their daily operations. What the office and work stations look like. IT companies are often very unique work environments – because they love innovative ideas. You can be sure you won’t be bored while working in a digital agency.

Pick one that has a culture suitable for your own needs and character. If this dev house you consider meet up every week to play board games and you rather just go home after work – maybe you should look for a different place to send your resume to.

Will 2020 be a ground-breaking year for your career? That depends on you! If you wonder how we work at iteo and if we have any open positions at the moment – check out our career page. Find out how you can expand your prospects. Starting a new job in a digital agency can be the beginning of something great in your life!

The Why and How of Wireframes

It seems like a lot of people have already written something about wireframes – but we still want to add our thoughts on that topic. This will help you understand why they are such an important step in our design process. We will explain how those are created, used and translated into a full product.

As stated at www.usability.gov – a wireframe is a basic visual interface guide that suggests the structure of an interface and the relationships between its pages.

Why do you need them?

During our design process, creating wireframes is a step of forming a draft of a product that can be easily verified and examined. During the first stages of our work, it gives us a general view of the whole project. Thanks to that, the client can check if the presented solution meets his expectations. Also, wireframes allow us to quickly introduce changes to the product before it gets to further stages of the development process.

Additionally, at this point, we can easily decide what parts of the product are really crucial, and how the project can grow in the future. This allows us to make bigger decisions before the actual UI and coding parts start.

The main benefits of wireframes for the client:

  • Evaluation of the idea before visual design and development starts 
  • A chance to present the draft of product to the client’s company and the possibility to discuss internally
  • Testing the product before moving to the next steps of implementation
  • Reducing the cost of changes and adjustments that can be very expensive in the late stages of the project

Wireframes step by step

Why are wireframes so important in our work process?

  • The whole team has a chance to understand the project’s structure from the very beginning
  • It simplifies communication between the team and the client
  • Everyone engaged in the project knows what to expect from the final product
  • The whole design and development process becomes more efficient because everyone knows how the product works as a whole.
  • When the product is complex, a more visual and “real” form helps to understand more complicated processes and allows to speed up the communication.

What do they look like?

Most often wireframes present interface structure, navigation scheme, a draft of content, buttons, icons, placeholders and more. All of these elements placed on the wireframe views will showcase the features and functioning of the product.

The base is super clear, using lines, boxes, grayscale colors, basic fonts and described placeholders instead of graphic content.

Why so simple?

Below, we present the same screen in two forms. On the left, we have a simple wireframe and on the right, we can see the styled view. Despite the time of work needed to design the version on the right, let’s analyze elements and functionalities presented on them both.

The example on the right, although generally prettier, is worse for verification, especially at the beginning. That’s because people who see the styled view unintentionally focus on aspects like: whether they like this particular color, why this icon is drawn like that, if we could change the font to a different one or maybe find another picture instead of the chosen one.

On the other hand, the view on the left thanks to its simple form helps us focus on functionalities and the “bigger picture” of the product. We can check if the whole app is understandable and how the flows work. When checking on wireframes, we ask different kinds of questions: can this element be more visible, how can we reach this option, what we push the user to do.

That’s why we always start with designing the wireframes so the client and the team can verify how an app, a system or a website works. All changes and upgrades are much easier to introduce due to simple and clear form.

The process of wireframe creation

What needs to be done before our UX team can start designing the wireframes?

Depending on the complexity of the project – definitely Product Workshops. After collecting all the needed knowledge, the designer starts to create the skeleton of the solution – wireframes. Having the information architecture in mind, sometimes we begin with less-precise wireframes called low-fidelity (lo-fi) ones.

These first sketches showcase if all the elements are included in the view and if the basic flow of operation is as expected. Depending on the preference of the designer, this can be done on paper, a board or a computer. That’s a good material to start a conversation with the client or the team about all the decisions they have to make when it comes to basic but key functionalities and structure. 

The advantage of the less-detailed approach is prompt verification of the idea (but in a very limited way). Also, we can generate a couple of different solution concepts. Next – we pick the best one.

After having the project in the form of lo-fi wireframes, we can start to create high-fidelity (hi-fi) ones – they are much more close to the styled prototype. These wireframes cover all the shortages of the basic version. They define weight, visual hierarchy, actual form and all the interactions within the product. 

What’s next?

We are almost finished! Our wireframes are ready – so what’s next? Usually, wireframes are assembled into one clickable prototype of the product. It contains not only the main views of the app but all the needed ones to present all possible cases. 

When we have this clickable prototype, we can proceed with customer surveys that will quickly verify the idea’s accurateness and if the product will actually work.

After testing and verifying, if the prototype receives approval, it can be passed to the next stages of design and implementation. These steps include whole visual design, development and more.

Now you know why wireframes are important and how we create them. If you are looking for a web and mobile development agency that works with you every step of the way – contact us. Let’s start with a conversation and your idea can become something extraordinary.

UX and UI Design Trends for 2020

We’ve asked iteo design team about 2020 trends in their field. Our UX Team Leader Magdalena and Senior Product Designer Kasia share their thoughts about the future of UX and UI design in the next 12 months.

Magdalena Brzuska, UX Team Leader:

When it comes to User Experience design, I’m not sure if we can talk about “trends” by definition. We design products that should fit users’ needs, not (ok, not only) the ones creating the demand. So maybe a better way to put it is “expectations” – what users will definitely expect from digital products in 2020 when it comes to usability and experience. Here we go:

(no) human interactions

Last year was all about chatbots, voicebots and all other ways of conversing with the client without real human input (mainly for “human resources and cost optimization”, but that is another story). Well, a bot will never call sick or be in a bad mood. Also, he (or she ;)) will always do his best to help you. That makes a pretty good customer service that slowly becomes the standard in more and more industries. 

What was also noticeable, AI came to our houses and it looks like we welcomed it with arms wide open. Conversations about how scary it is may seem to be dulled by the whispers of delight about how convenient it actually is.

Merge both mentioned above, and here comes the future (that already came, but we definitely will see more of it). We observe that our clients are no longer satisfied with bots that learned some of the answers. That makes perfect sense. People do not want to speak or chat with customer service that can not solve THEIR specific case. And getting the wrong answer, or being told to wait for a real person – that is a no go.

There are only so many processes and scenarios that we can teach bots. But the efficiency calls for more almost every day. Moreover, bots are now also used not only for helping customers but also for creating engagement with the brand. In 2020 we expect to have more efficient and “real” interactions with… whoever will be a know-it-all available under our thumb.

inclusive accessibility

WCAG is here for some time. There was a period when it froze the blood of designers, developers and clients – all forced to obey these mystified guidelines. We reached the point when it is quite common. When it is required to fill all checkboxes – we do so. For other cases – whatever we design we keep in mind that not everyone in this world is thrilled when given a fully animated, totally flashy, gesture-controlled app.

Yes, creating personas helps us to understand the targeted audience so we can adjust our product to them. And yes, if the chosen group requires some dedicated solutions, we make those a priority. BUT how often (and let’s be honest there) do we consider how diversified our target group can be in a matter of disabilities? Mary that has some problems with sight is in every way as good of a client for shopping app as is Hanna with her eagle eye and appreciation for smooth color gradients. It should not be an edge case.

Every source says that in 2020 the world will be even more concerned about social matters and inclusivity than it is now. And that is a good trend! So we, as designers should also feel a duty of making digital space more inclusive. We need to be more empathetic, maybe learn some more about sociology and behaviorism (been there, done that – totally recommend) and definitely stop running all the tests on our “perfect customers”. Be diversified, be bold. 

no more vacuum

You can call yourself a minimalist that does not need fancy smartphones and other smart gadgets. You can call yourself an old-fashioned person that is not really into this whole “smart” stuff. But I guess you get frustrated when your car doesn’t want to connect with your phone. And this super little convenience makes us all realize how much we appreciate IT. 

“It” is a mysterious thing. Outside the industry, I guess not many people understand how it actually works. But “it” enables your watch to notify you about upcoming check-in that was marked in your calendar the moment you got the confirmation email. The fact that every device of yours knows exactly what you need at the moment and you can freely manage all your data between them – be honest, you appreciate it and you like it.

So we, as designers, can no longer think about our products as stand-alone ones. Of course, the app should work well as it is, without any external “help”. And it will. The case is that there is no way that in 2020 the user will be fully satisfied with the app that creates onefold value and does not “speak” to other apps.

You can say “C’mon! It is already a standard!” but emphasizing a phenomenon is also a trend. Omnichannel experiences also made their way into customers’ hearts. So not only do we need to create applications that are well connected to others frequently used ones, but also are cohesive with the whole brand (including also all offline processes). You still can say that this is not a groundbreaking thing and it is a good practice for some time to link products and create consistent experiences, but we believe that in the nearest future those two aspects can prevail “to be or not to be” of every available service.

Kasia Ochocka, Senior Product Designer:

We want it to be beautiful! We want it to be useful! We want it to be different than everything we have seen so far! 

Product design is constantly thinking about business and an end-user while creating something visually pleasing and UI trends for the upcoming year are a great example of it. Here are some of them we thought are worth mentioning.

simply better animations

Well, it turns out that everything we’ve already said about animations is true – animations have become an integral part of UI design a few years ago and everything indicates that 2020 will not be different. This applies to both web design and smartphone design. In the first case, designers can afford a little more freedom – in fact, everything can be animated, of course, with the addition of common sense.

We already know that the animation says more than hundreds of words, but the huge role of the developer in the process of implementing this is worth mentioning. The speed of its charging, overall quality and smoothness, as well as the lowest possible load on the device – these are the goals that all teams working on creating products in 2020 will strive for.

being bolder

As you already know (while scrolling through beloved awwwards.com for instance) – UI designers allow themselves more and more courage in the design process. Broken grid, asymmetrical layouts, typography overlapping other page elements, split-screen – today’s wide desktop screens and full-screen smartphones allow you to implement these solutions without worrying about their illegibility.

Speaking of scrolling – using an empty space won’t be a problem either. A lot of comforting room and seemingly unused space on the page or in the application will allow you to maintain balance in places where the number of graphic elements will be much larger. And good balance and freedom is all we need these days, right?

mobile & gestures

Two years ago we’ve been electrified about the news that Cake raised $5 million for its swipeable browser. Now that it’s out we can tell it was worth it. Progressive web apps or PWAs are gaining momentum and it looks like there is no way a native mobile app can withstand this flurry. For us designers, it means that we have to focus more on designing something crafted for an end device that the user will use it on. Sounds easy but trust me – it’s not.

Since we’re stuck to our phones we need apps and webpages that will be even more intuitive to use and at the same time interesting and offering new value. The biggest mobile market giant like Apple is getting rid of the buttons for transitions and gestures we’ve gotten used to over the years. Farewell, “home” button, it was nice knowing you.

illustrations that are… different?

Oh, this one is quite important for us and we’re already rubbing our hands. It seems like in 2020 designers all over the world would have to come together to find another way of enhancing the design by illustrations in a new, more unique way. Everything was already created? We hope not.

Isometric is passé, don’t even mention monstera or any other plants… Gradients have been a steadfast feature of the illustration scene for the last year or so, and they’re not disappearing any time soon (well, maybe let’s make them a little more low-key). Thanks to virtual reality (and data visualization) renders are a big thing, too. Users want them so real you can almost touch it.

So to sum up – do whatever you want to enhance your UI design, but please do not put an isometric vibrant plant on the top section of your page. Or do – since 2020 is all about doing what you want.

don’t be a copycat

I know it sounds cheesy, but hear me out. We all love getting inspired while looking at Dribbble or Behance projects but at the end of the day, you don’t want to create something that looks like a combination of two most liked posts you saw earlier. It is very easy to fall into the vacuum of trends bombing us from all sides.

Creating your own design style that is your business card or simply designing products by following your own opinion and intuition is the shortest way to success. Even if it means passing several defeats along the way.

Now you know what our experts on UX & UI think about design trends for 2020. If you are planning to expand your business next year, let us know. We will use all our knowledge and experience to make your product modern, functional and eye-catching.

The Why and How of Stakeholders Mapping

In most cases, if you ask your client about the most important factor of his product’s success you will get the answer – “users”. And let’s be honest, this is a pretty good answer. More and more often the owners of a product are aware of the fact that they have to take under consideration the thoughts, needs and whims of their targeted users.

That comes down to the fact that almost every decision regarding the product’s final shape is based on USERS. Those can be real, selected, examined users. Those can also be just figures written down as user personas. Anyway – we know who they are, what they want and how to get it to them. Sounds good so far. But aren’t we missing something?

Important people in your product’s life

To be more precise – not something, but someone.  You are aware that the product is never created in a vacuum. It may sound cheesy but yes, even in product design, it is important to make everyone around happy (at least a bit). It means that although you should always focus on your end-users as prior, you should also take care of other relations. Those are:

  • Relations within your project team (every person who touches that project)
  • Relations with your clients (this one is obvious, isn’t it?)
  • Relations with investors (every person or company that is paying for your creation)
  • Relations with customers (every person who should consider interacting with your product)
  • Relations with competition (every person that will want to have the advantage of your product)
  • Relations on the product’s market (every person who enters the market that your product is hitting)

Yes, there is a lot to handle. Fortunately, there is a tool that helps lost souls in maneuvering between those listed above with grace.

Stakeholders mapping

To start with, let’s define who a stakeholder really is. It is a person who shares an interest or influence (or both) in your product. The level of engagement will also be important at some stage. But first, you have to realize who they are. There is an owner, a founder, a CEO, a designer, a researcher, a developer, a… whoever there might be. And every single one of them somehow has an impact on your product. Go bigger. Think about everything that might have an influence on it. Now match those things with people who stand behind them. Now – how do they affect your work? Or, on the contrary, do they even care? 

That’s where stakeholders mapping comes to help. Brainstorm everyone (and everything) that might impact your product. Do it with your whole team (remember, never go through a UX path alone!). Put it on the board. Yes, you can find Jim from your backend team there (I dare you to say that developers do not influence product) but also your investor’s lawyer (who explains what restrictions you have to follow). Group. Match. Link. Confront. Just get more comfortable with the knowledge of some Stakeholders existing there. 

The Who and What

Everyone you listed on board is somehow interested in your product. That means that they also somehow influence your product. Think about HOW they do it. Is it direct or not? Is it continuous or just temporary? If you managed to group your stakeholders, it would be easier to define them with some qualities. Now choose the most important qualities and make a scale of them. Then make another scale determining the impact. Place your groups on the matrix. And… that’s kind of it.

It all comes down to the question – who should I care about the most and how do I keep others satisfied? We cannot help you with the second part of this question, but at least now you know how to distribute your energy wisely. The matrix shows clearly that you should focus more on people that you defined as having the most important quality for your project and also the most impactful. The ones with weaker qualities and less impact you can now monitor. The only thing left now is to decide how you want to approach the other two extremes (strong quality-less impact/weaker quality-more impact). Keep them informed? Satisfied? Participating? Whatever fits you. But keep in mind – roles shift. Go back to your matrix every time you feel like a new player enters the game.

The Why and How

Everything mentioned above should make you think about the context of your product development process. For us, it is important to design responsibly and effectively, and we believe that being aware of relations around the product gives us an advantage from the start. Of course, this one does not cover the whole “context of product design” theme. Knowing who works for your project’s success or failure is a pretty good start. You may not know how to save the world, but at least you will know who you should ask for help here.

That is why stakeholders mapping canvas accompanies us from the beginning of most of our products. We decided to share our template with you, so you can try yourself what difference it makes. 

Click here to download FREE stakeholders mapping canvas!

Adjust it to your requirements, just as we do. Go local (internal) or more global (external) depending on your product’s character. Customize it with more definitions if needed. 

And if you have any concerns or questions – hit us with an email so we can talk it through 🙂

Top 10 Articles From Our Blog 2019

It’s almost the end of the year. We decided to overview the best articles on our blog based on the readership. In this rank, you can check them out again to refresh your knowledge. And if you are new here – we recommend reading them so you can gain a new perspective on different IT issues.

We’ve checked the statistics and here they are. Top 10 of your favorite articles in 2019:

1. The Story Of Our New Identity

This year we’ve updated our visual identification, including our logo and website. The article describes the idea behind it and the whole process of rebranding. Visuals included!

Thought-provoking quote from this piece: “Change is a must in the IT industry. It is also said, that if you don’t change, you don’t grow.”

2. How Office Space Impacts Our Workflow

2019 was the year of changes! After rebranding, we moved our headquarters to a bigger office. That was a chance to design this space to be our own. The goal was to support creativity and to find a balance between privacy and openness. How did we achieve that? Find out in the article.

Thought-provoking quote from this piece: “Our new workspace design positively influenced mostly our productivity and certainly benefited overall collaboration and communication.”

3. Flutter vs. React Native: A Comparison

Flutter framework became something very important at iteo. We really like this technology, so we wrote a bunch of articles about it. In this one we compare it to another tool for app development – React Native. Check out what we think about them both.

Thought-provoking quote from this piece: “The battle between React Native and Flutter is mostly a battle between stable, recognized framework versus an opponent that is new, dynamic and hungry for success.”

4. The Future of Flutter

As we mentioned, Flutter is dear to us. This article focuses on the predictions and expectations of this framework. We know that Flutter’s future is bright. Read the article if you want to know what exactly is our view on it.

Thought-provoking quote from this piece: “The state of the market might rapidly change when Google releases the new system, forcing all Android developers to become Flutter developers. That is where Flutter will shine the most.”

5. Game-Changing Impact of a Great Design Pitch

Design is a huge part of our work. That’s why we create a lot of articles on it. This one unveils the true impact of a well-prepared design pitch. Why is it so important? Well, if you are a designer and you want your idea to be picked by the client – this article is a must-read.

Thought-provoking quote from this piece: “The beloved ‘less is more’ principle and ubiquitous minimalism will not work for every project. Don’t forget about the client’s business goals – after all, their opinion will ultimately determine whether what you have prepared will be accepted and released for development.”

6. TestCamp − leveling up our QA skills

Detailed coverage of TestCamp conference and workshops. Our QA team took part in it and shared their experiences. We attend a lot of events and we always learn something new. Gaining new knowledge and skills is crucial to expand our work. Check out how our testing practices improved after TestCamp.

Thought-provoking quote from this piece: “All the issues that were discussed during presentations and while networking with other participants were a proof that our work model at iteo and our expansion plans are according to the newest technological trends of mobile and web app testing.”

7. Product Workshops Value Explained

Product Workshops are another significant part of our work at iteo. It’s a unique part of our offer, that’s why we use our blog to explain why we do it and how it is done. This one here is about the value that workshops can give to both sides – the client and our team.

Thought-provoking quote from this piece: “Only by joining forces we can create something that will fit your company’s, customers’ and market’s needs (and will also make us proud).”

8. Is .NET Core a Right Choice for Startups?

Working with startups is a big chunk of our everyday operations. As well as using .NET Core. We connect those two things in this article. Startupers often look for robust solutions for their IT projects – read this blog post to find out why .NET Core framework is worth giving it a try.

Thought-provoking quote from this piece: “Choosing the right technology for a digital product is not easy. And it’s the key when there is a limited budget and expectations for short delivery time.”

9. Why Choose Flutter? Pros & Cons

Yet another Flutter article. In this one, we list the advantages and disadvantages of the framework. If you wonder if this is a choice for your business – check out what’s in the article. Spoiler alert: we tell exactly who will benefit from using Flutter!

Thought-provoking quote from this piece: “Why is this a revolution? Because of its nature and capabilities, Flutter is not a framework but rather an SDK for applications designed for a touch screen. Its primary purpose is to work with iOS and Android devices but can run on other platforms as well.”

10. 8 Examples Proving Testing is Important

Testing is often underrated, but not at iteo. The uniqueness of this blog post is based on examples used in it. These are real situations from many different industries, where one little bug in code was a cause of the disaster. A bit scary but also eye-opening. Find out why good QA practices are crucial for every IT product.

Thought-provoking quote from this piece: “All those events could have been avoided if buggy software wouldn’t be authorized to use. Let’s face it – there is no way to know if there are any errors that can cause dangerous situations and malfunctions if there is no testing included.”

We hope you liked the rundown of our blog post we’ve prepared for you. 2019 was a year of big decisions, bold changes and learning new things. We still have a lot to share so expect even more knowledge on our blog in 2020. And if you want to collaborate with a seasoned digital agency – let’s do something extraordinary together. The first step is to contact us 🙂

Managing Work with Remote Teams and Clients

According to FlexJobs Annual Survey, 76% of employees seek for full-time remote job opportunities. 43% of them would also agree for partially remote work. Flexible schedules and part-time schedules are also preferred. This trend cannot be stopped. It is better for companies to start learning how to manage their remote teammates.

At iteo, we offer remote work opportunities to some extent. Usually, our employees work remotely once a week. Sometimes they work from home for longer periods of time if there’s a need for that.

But when you hire 130 people (and the number is growing), usually their schedules differ each week, if not each day. It might seem like there has to be a huge amount of planning and that it’s a though management project to take care of. Well, not necessarily.

Here are a couple of tools and methods we use at iteo to work together when some of us are in offices and some are working from home.

It all starts with scheduling

Don’t forget we have more than one office. Add international clients from every part of the globe. That is already an interesting twist to our everyday operations since we have to include time zones to our scheduling. How to manage a sales update meeting when one of us is in San Francisco and the rest work in Katowice?

Of course, we have to plan them accordingly. Fortunately, we live in the 21st century and we have many communication means we can use to organize our meetings and then to have calls wherever we are. This applies to our remote workers, teams located in different offices and scheduling work with our clients.

The first tool, a simple and rather obvious one, is a calendar. We use Google Calendar as it synchronizes perfectly and it is popular within the business environment. We book time and space for our meetings, calls and workshops. Even if we work with a remote team, it matters to book a proper space because sometimes when you have a couple of people on the call you will need someplace quiet. Also, our internal calendar says when someone from the team is working remotely, has sick-days or is on holiday. This way we always know what, where and when.

Communication is the key

Okay, so we have a call scheduled very soon. It’s time to use the whole arsenal of communication tools – accordingly to our needs and preferences. We don’t limit ourselves to one app or program, as they usually have different functionalities. Our favorites are:

  • Google Meet
  • Zoom
  • Skype

For us, it is important that the tool we use for conference calls allows also display sharing, presentation streaming, as well as sending textual messages, links and files. We also invest in hardware that makes the calls easier for our office workers. One of them is Jabra – it’s a wireless conference call set we can use in any room we need it. Lately, we also bought a camera that makes the experience of a call more “live”. It shows the whole room and zooms into the face of a currently speaking person. This way we can make all the call participants feel like if they were with us.

Not every matter requires audio and video connection. For information exchange, we use two simple tools that you have probably heard of before. They are called Email and Slack. The first one is great for sending files and messages that we want to keep around for longer. Slack is perfect for everyday communication. Its pinging function happens to be useful when you need to reach out to someone quickly and find out if they are available.

As you can see, thanks to the internet, we have many different means of communication we can use on a daily basis. This way we keep up with everything that is happening in the office and with projects, no matter where we work from.

Managing projects for great success

Each project needs to be managed properly so the work goes according to plan. Again, the online environment is perfect for project management as it offers many apps that make it easy. And they work wherever you are, synchronizing data so everyone is always up to date. Including remote employees.

At iteo we believe there is no need to complicate things. Keeping operations simple is important to tame the chaos that can often happen when we work on many different projects with various team members and clients.

We use BaseCamp to organize projects – it’s a space where we can invite our clients to see what we are doing. Their presence allows them to be an active part of the work. All to-dos, needed files and information exchanges are in BaseCamp.

Two tools that come from the same place – they are called Confluence and Jira – are also an important part of our everyday work. First one’s purpose is to internally organize all our operations. We keep all important processes in it, so we know clearly what to do in certain cases. Jira is one of the most important apps at iteo – it allows us to log our work time in it. We use it to create tasks and to know who does what and when. This way we always know what’s up.

Last but not least, there’s Google Drive. Simple and super convenient when it comes to file exchange, sharing documents and creating spreadsheets or presentations. Show us someone who DOESN’T use it. But at iteo we are also flexible and we always try to be convenient when it comes to exchanging information with clients – if they want us to use their resources, we gladly will. And if they need some shared space with us – we will prepare it for them.

Security is important when working remotely with many people. That’s why all the code and other internal pieces of work are stored on our own dedicated servers.

As you can see, our work is simply but thoroughly organized. Years of experience working with international clients, remote teams and employees hired in different locations pays off. We’ve created a system that uses online communication, management tools and deliberate processes to keep the work running every day. We are prepared for all the situations that can occur. If you are looking for a digital agency that values a good work organization and has the know-how of project management – let us know what you have in mind.