Search the Community

Nicole Saidy Recently, I’ve been receiving similar questions from a lot of people: How can I get more into UI/UX? I’m a programmer/marketing manager/social media strategist and I want to know more about design. Where do I start? How do you know what is good design and bad design? What does it take to become a designer? “How do I start?” This question brings me back to when I first started my career. 7 years ago, I’m on my first day of my first design job. I’m sitting in front a blank Photoshop file on an iMac (I was a Windows user back then). I’m trying to grasp what my manager just briefed me about. I have no idea how to start. Blank. Before landing that job, I had just graduated from university with a Multimedia degree. So, why did I not know anything about design? Well, universities don’t teach us practical design. Most university courses only teach us theory and sometimes teach us how to use design tools like Adobe Suite. But that’s not enough — not even close. 7 years later of self-teaching, I’m now a Design Teacher and International Conference Speaker. We’re not some unicorn creatures that were meant to be designers and were just born artistic like that. Design is learned. Design is about solving problems. It’s a process of constantly finding problems and creating solutions for them. There are many areas of design: UI, UX, product designers, graphic designers, interaction designers, information architect, and the list goes on. Start by figuring out which specialty interest you more. For now, let’s focus on the most common type: a mix of interface and experience: UI/UX designer. 1. Familiarize yourself with UI principles. Before practicing design, the first thing you need to do is learn some design principles. From this, you’ll be able to enter the design world and start thinking “creatively”. You will learn the psychological aspects of design: why it can look good and why it can fail. Here are some basic principles you should know about. 1. Color Color vocabulary, fundamentals and the psychology of colors. Principles of design: Color 2. Balance Symmetry and assymetry. Principles of design: Balance 3. Contrast Using contrast to organize information, build hierarchy and create focus. Principles of design: contrast 4. Typography Choosing fonts and creating readable text on the web. 10 Principles Of Readability And Web Typography 5. Consistency The most important principle, creating intuitive and usable designs starts here. Design principle: Consistency Here are some great do’s and don’ts to design a good UI. 2. Learn the creative UX process. The next thing is to understand the creative process. UI/UX design is a process of specific phases that every creative person goes through. The creative process Divided into four distinct phases — Discover, Define, Develop and Deliver — the Double Diamond is a simple visual map of the design process. Discover This is the start of the project. Designers start researching, getting inspired, and gathering ideas. Define This is the definition stage, where designers define an idea extracted from the Discover phase. From this, a clear creative brief is created. Develop This is where solutions or concepts are created, prototyped, tested and iterated. This process of trial and error helps designers to improve and refine their ideas. Delivery The final phase is the delivery stage, where the final project is finalised, produced and launched. Check out my article How to streamline your UI/UX workflow with Figma. 3. Develop your eye for design Knowing design principles is great, but sometimes it’s not enough, you also have to train your eye to see good design and bad design and to identify strengths and weaknesses in designs. The most effective way to train your eye for design is through inspiration. Before opening a blank canvas and staring at it for half an hour, know that the only way to be creative is through research. Sometimes the mind can’t create ideas on its own, you have to first look at other designs to start creating your own, especially when you’re a beginner. Browse portfolio websites So look at what other designers are doing on Dribbble, and whenever you come across pretty designs or something relevant to your project, save it in your notes and mention what you like about it, you can also take screenshots. This way, you will have a collection of inspirational designs for you to start from. Here are my favorite websites for inspiration: onepagelove.com One Page website designs for your inspiration. awwwards.com Awards website that promotes design talent. dribbble.com A community of designers sharing their work. pttrns.com A collection of mobile design patterns. uimovement.com The best UI design inspiration, every day. 4. Read design articles everyday To make ourselves get familiar with design, the best way is to read a few articles each day. Make reading design news and blog an everyday habit. There are millions of articles available online for us to discover about new trends, use cases and tutorials. All we have to do is find them. There’s nothing better than learning from other people’s experiences. Make reading articles an everyday habit So start your day with a cup of coffee and a few inspirational articles on Medium or Smashing Magazine. Learning new things in the morning will broaden your mind and will make room for creativity during the day. Then, every now and then during your day, take a few breaks to read more. Taking breaks is very important for creativity, especially when you get stuck and feel unproductive. Bookmark the website you like as your browser homepage or subscribe to a design newsletter. Here are my favorite blog and news websites for design: blog.marvelapp.com medium.com/design smashingmagazine.com webdesignernews.com sitepoint.com/design-ux 5. Design fake projects. Practice makes perfect. And we all know we can’t get clients/jobs without experience. But without a job or projects, we can’t practice, right? But we can break this cycle by practicing on our own, by creating fake projects for fun! Dribbble is full of it. Facebook Material Design by Kevin McCarthy Make time to pick a website or app you already use and redesign it. It could be anything you think it can be better. You can also design your own app idea. From this, you’ll build your design portfolio and you’ll practice design. 6. Learn the latest web design tools. There are tons of design tools out there, but you don’t need to know all of them. Get to know the best ones out there, choose your favorites and stay updated with the newest features and trends. Here are the latest tools that I use in my design process: Sketch for interface design Figma for collaborative interface design Balsamiq for low fidelity wireframing Adobe XD for interface design and prototyping Marvel App for making mockups interactive Invision App for prototyping and collaboration 7. Mentor and get mentored. Another great way to learn design is to find a design mentor or designer friend who is willing to help. They will help you speed up your learning process. The designer would review your work and give their comments whenever possible. It’s like a shortcut. They would also give you tips and tricks they learned from their experience. So go ahead and e-mail a designer, ask questions and discuss your concerns. Also, from the few years that I taught design and front-end, I learned more than I taught. When you’re ready to start talking about design with people, you can mentor or educate someone about design. You will learn to see it from a different perspective and you will get feedback and questions that you might’ve never thought about. Whenever you’re talking about design with other people, your mind will be in “brainstorm” mode all the time and you will find yourself getting interested in design more and more.

Ever used an app and loved the way the functionalities flow together with the color, layout, photos, and arrangement of the different features? If you have, then it is certain that the app in this scenario has an upscale quality UI and UX design. Mobile app design is simply the cumulation of every process and component of the user interface (UI) and the user experience (UX) features of the application. Therefore, it encompasses details in color scheme, font, layout design, graphics, widgets, and buttons contained in the app. A UI designer is responsible for manipulating these components of mobile applications, either for android app design or iOS app design to give the user the most pleasurable view and comfortable interface for interacting with an application's functionality. The UI designer is responsible for the development of the mobile UI and UX model. Now, you may argue that the user interface and experience may not be as important as the backend functionality. However, be rest assured that how an application feels in the hands of a user will determine how best the features of the application are utilized. Mobile UI is key in translating codes and complicated functionalities into simple features a user can resonate with. What separates competing applications with similar features is the user experience and user interface. Users are more likely to go towards applications with a beautiful color scheme, easy-to-navigate widgets, and a layout that supports portrait and landscape modes in the best ways possible. As important as functionality is, the UI and UX of apps also matter too. Design of iOS and Android apps For mobile UI design, it is important to note that the android app design will differ from iOS app design. In totality, the design processes are the same, however, there are a lot of differences between the user interface and experience models for both apps. These differences are imperative to create applications that are most suited for app operators irrespective of what operating system in use. The first notable difference is the navigation. From the primary navigation to the secondary navigation buttons and the home buttons, mobile UI design for all apps are different from the iOS UI design. This can be attributed to the lack of Home-Menu-Back buttons at the bottom of the page, common to most android phones, and the middle buttons present in apple devices, i.e. until the removal in iPhone x. Navigating back and forth from each page in an application must be designed according to the operating system to essentially make it easier for users. Another major difference in design is the screen size. Although both Android and iOS majorly use an 8dp grid to build their screen structure, the size of icons is quite different. This is so space is for the best view. Android apps design varies in regards to icon size according to the range of the phone in use. For xxxhigh DPI phones, the icon size is usually 192 x 192px compared to 120 x 120 on iPhone 11 and 8. The font of both apps is also different. In iOS app design, Helvetica Neue font or San Francisco is chosen while in Android, Roboto is utilized. Of course, Android enables users to change their font, and is important to note this when designing your application. The space efficiency is dependent on what font is in use and chosen according to which operating system the UI design is for. Other differences include the control design, alerts, tabs, and layout which are important to note during the application design process. Designing an app that will have an iOS variant and an Android variant is quite tedious, especially since mistakes will not go unnoticed by users. Comparing the home screen side by side and making a wireframe from the specifications on the respective operating systems, taking absolute note of the differences which exist between the two, will help in building the design of the mobile application. If this is stressful and proves tedious, there are templates specifically made for iOS app design and android app design. Mobile app design templates It might be difficult to start building and developing a mobile UI design from scratch. Trying to figure out the intrinsic of the application from the typography features to the widgets, control design, amongst other important components of the application is hard and tedious. It could take weeks and even months, arranging and sorting the pages within the application one by one. So, for better-optimized use of time and resources, it is more advisable to go with a template. From a template, it is easier to reshape and rebuild them into your preferred style but the basic components and features have been created in advance, therefore the workload is exponentially reduced to a significant amount. At Working Geeks, we do not sell common templates with bland features but create templates that are best suited for your needs. Our team of competent UI designers transforms clients' requests using the business model to optimize the user interface and user experience to ensure the functionalities are interpreted properly and utilized in the best ways possible. Mobile app design and development Designing is the third step of mobile app development and creates a foundational template for the functionalities that are coded in the backend of your application. That is to say, messing up your application design will definitely adversely affect the application in production. It is important to have a laid down planned process for development to guarantee success and save time with resources. The first step in developing the design of a mobile application is critically taking time to define the "what", the "why" and "who". Why do you need to develop a mobile application? Who will the mobile app be best suited for? What are the necessary components that will satisfy both the purpose and fit in with the customer experience? When all these questions are answered, designing becomes easy. Tailor the answers in a simple prototype that'll fit into the user features. The focus of any UI and UX design is the user. No redundant information that'll take unnecessary space must be avoided. The language of the app should be developed for the demography the app is intended for. Creating a wireframe first outlining the specifics of the mobile app is the best and has received feedback from potential users is the next step after. This is the testing phase in the development stage. After getting clearance on the wireframe, the development and testing of the prototype follow. Testing the app UI and UX prototype will help identify the lapses in the design. Continuous testing and quality control will ensure that unnecessary cost is not spent on preventable updates. WorkingGeeks will develop your app design with all the features and components. We modify the design of your mobile application for optimized user experience. With the best technologies, our team of design experts provides the most appropriate design to fit in with the idea and purpose of your application. At every point in the design development, we carry our clients along with wireframes and prototypes sent for approval before the final is presented. Our development for both android and iOS UX design is timely and guarantees 100% success on customer experience. Mobile app design cost Like every other stage in app development, mobile application design comes at a cost. The cost of designing your mobile application is dependent on several factors. If you are choosing to go with native design, the cost will significantly decrease compared to having a custom design. Native designs are usually developed with UI and UX guidelines generic to the operating system of the application that is being developed. For example, they are specific features and components present in Android apps that are common to android devices alone. Going with native designs will not decrease the functionality of your application but will give it a bland visual appeal. If your budget on design is more robust, a custom design is ultimately more suitable for you. Custom designs are built from scratch and will take the expertise of a professional UIX designer with excellent graphic skills to pull off. The designs are not built specifically for any operating system, so it is easier to modify. Having a custom mobile app design is inherently costly and can range from $1000 - $10000. One other common variable in the pricing is the features contained within the design. Features like ad placement, app authorization, user accounts, multiple languages, layout for both tablet and mobile phones, search and filtering, will increase the cost of design development. Apart from the features, the location of the designer or design company also affects the pricing range. In all, choosing the best UI and UX design for your mobile application is vital to the success and reliability of the application on app stores across several mobile devices. You must always certify the necessity of the features of the design in advance to building the prototype.