DEV Community: Antony Kimani

Product Design and Intro into creating wire frames

Antony Kimani — Sun, 21 Aug 2022 07:32:03 +0000

Product design is the process of creating a product. It can be anything from a website to an app, video game, or even an entire product line.
Wireframes are a visual representation of your product that show how it will look and function on different devices, so that you can see where you need to make changes before you start building it out in code. They also help you see what parts of your product might work better together than they do separately, which is important when designing for mobile platforms such as smartphones or tablets."

I'm going to be talking about the basics of product design, which is one of the most important steps in the process of developing a new product or website.

The first step is wireframing, which is a step that involves creating a visual representation of your app or website before you build it out. This means that you can see where things will be placed in your app or website and what functionality they will have before getting started on coding. Wireframing will help you to see if there are any holes or opportunities for improvement in your idea.

There are several types of wireframes; going from low-fidelity wireframes,medium-fidelity-wireframes to High-fidelity-wireframes. The best way to determine what kind of wireframe works best for your project is by testing different kinds until you find something that fits perfectly with what you're trying to accomplish with your app or website.

Wireframe is a visual model of your website or app before you start coding. Wireframes are a collection of basic elements that show how the site or app will look and function, minus any content or functionality. Wireframes are usually created in the same style as a physical prototype, but they are not actually real products.

Wireframing can help you make sure your design goals are well-defined and set up before you start building. It also gives you a chance to test out different ideas and see which ones work best before diving into more expensive development work like programming or server setup.

Information Architecture in UX Design

Antony Kimani — Thu, 04 Aug 2022 02:47:54 +0000

In this 4-minute article is an introduction to Information Architecture.

Information architecture is the science of organizing information in digital products.

This is a crucial step in design , you don't want to give users a hard-time navigating your application or website, because there are studies showing most users bounce off a page in less than 10 seconds that don't seem relevant.

So what are the steps to better information architecture?

An Understanding in Cognitive psychology is a great foundation. Cognitive psychology studies the mental activities and perceptions that influence us.

A core factor information architects use to organize information within their products.

Simply put the mind is an information processor on its own and with cognitive psychology there are a lot of factors that to that influence what we do.

Here are a few factors:

Mental Models

Mental Models are assumptions people have in their minds before they interact with a product.A clear translation would be,Information Architects placing information where a user is likely to find it.

This proves useful especially for call to action buttons. Sometimes our designs can hinder a user from accessing information , no matter how pleasant the UI is.

Cognitive Load

What is 234 multiplied with 443? Yeah, That's cognitive load.

Some products have too much going on, information displayed in overloads, Bright and contrasting colors are used or four different sets of typography.

This is Cognitive load, the brainpower to be used to process
information. Having a minimalist design is powerful in communicating to users.

Using cognitive psychology information architects spend their time designing the content structure around users.

The Duties of an Information Architect includes:

Conducting User Interviews - to ask questions related to product designing, what the user likes and dislikes. A user is generally one of the many personas your building for.
Card sorting and tree testing sessions - seeing how different users are able to categorize information.
Contextual inquiries - UX architects observe how users interact with real life products.
Content inventory, content grouping and content audits - which is what a good understanding of the content that the product offers.
Taxonomies and Labeling - is classifying items based on similarities.
Prototyping - Information architects also create simple , low-fidelity prototypes to demonstrate the hierarchy of information and navigation.

Conclusion

A summary of Information Architecture is that it allows great content to be displayed in with easy accessibility, this is the backbone in any Application or Website.

Thinking in Design

Antony Kimani — Sat, 30 Jul 2022 05:02:33 +0000

In this 5-minute-read I share my thoughts on Design Thinking.

Design Thinking is a continual process in which we work to understand the user, have an open mind, and reframe problems.

This is human-centered, which means it takes into account how users engage with a good or service rather than how a company or individual thinks they will. It is a way of problem-solving that emphasizes solutions. It is both a way of thinking and acting and a collection of useful skills.

There are five stages in Design Thinking.

1) Emphasizing

A designer observes customers to gain a deeper understanding of how they engage with or are influenced by a product or issue. Empathy is required while making assumptions, which is abstaining from making preconceived notions about the needs of the customer and refraining from passing judgment.

2) Define

In this second step, you identify the issue you're trying to solve using your observations from the first stage. Think about the difficulties your consumers encounter, what they persistently struggle with, and what you've learnt from how the issue affects them. Once you've incorporated your results, you'll be able to determine the issue they're facing.

3) Idealization

Finding solutions to the issue you've discovered is the next step.Taking the information and coming up with ideas , solutions , matches, brainstorming

4) Prototyping

Taking the ideas you want to develop into something that can be tested.
Concepts are converted into workable solutions at this point. It's not necessary for prototypes to be perfect. A prototype is designed to be quickly created in order to test how well a notion is received by clients.

5) Test

At this point in the testing process, you receive comments on your work. Taking the prototype to real customers to test , get feedback from users, which gives you more ideas to refine the prototype,ideate then Test.

I believe Design is a never ending process , there will always be a way to improve a product,method .This is intrinsic to humans. We all get to contribute to the bonfire that is life.

What is UI/UX Design and why it matters.

Antony Kimani — Sun, 24 Jul 2022 06:20:48 +0000

Have you ever tried closing a pop-up ad but the button was too small ? Yes , unfortunately we've all been there.

User Experience Design is a subject that most of us know little about but makes all the difference in our tastes and preferences in Products.

In this 3-minute blog-post, we'll have a little chat about UI/UX Design. Although the words UI/UX are used commonly together UI or *User Interface is how a product looks * while UX , User Experience is how a product feels and functions. Both halves are at the core of any great product.

A U_I Designer is responsible for designing visually and aesthetically pleasing designs_ that communicate the style and vibe of a product , it does not make sense to have a video-game website with a cooperate themed style, while a UX Designer is responsible for the user's journey and experience in a Website or Mobile Application. What happens when a button is pressed , what is the first thing a user should see when the Application loads.To explore a more comprehensive dive into the two fields check this link.

In User Design , we have some laws of design that are collections of best practices designers consider when building user interfaces.For instance Fitt's law describes the time to acquire a target is a function of the distance to and size of the target.

This translates to how fast users can access and identify important features in your Application like the Call to action Button based on its size and colors and explains why I can't seem to find the unsubscribe button in most Websites. Here is a link to more on the Laws of UX Design.

We've covered the basic understanding of UI/UX ,differences between UI and UX Designers and as well as the laws of UX design. I'll be writing a series on UI/UX Design ,getting into more in-depth topics in the future. Have a Wonderful Day.

Immediately Invoked Function Expression

Antony Kimani — Sun, 12 Jun 2022 02:03:38 +0000

I was struggling to understand IIFE's so I wrote about it. Hopefully this article helps you understand IIFE's in a Jiffy.

Immediately Invoked Functions are Functions that execute as soon as it is defined.

Here is an Example:

(function(){
    console.log('This is an Immediately Invoked Function');
})();

It has two enclosing parenthesis , the First parenthesis makes the function an expression and the last parenthesis tells the JavaScript compiler to invoke or call the function Immediately.

The Expression evaluates itself to execute the function.

Is that it?

what are the uses of IIFE?

1. Avoid Calling Variables in the global scope and create closures

With IIFE being executed immediately it means variable names will not conflict.This is better in situations where we don't need to use the function again.

However, with the introduction of let and const variable keywords we can differentiate between global and block scope variables.

Hope this explained the concept in an easy , beginner-friendly manner.Cheers