Prototype

Prototyping is essential for the design process, and comes in various forms and methods. Although there are a vast amount of methods and ways to build a prototype, there are a handful of ways that stand out as very essential and key methods that make a prototype great. It is very important to take a look at some very key aspects such as, the people, the objects, location, and interactions. Sketching is a wonderful opportunity and a great way to begin the prototype process. By bottling your ideas and keeping them in your mind it can leave room for you to forget, where sketching is a great way to put your concepts down on paper and getting a look at what your potential design looks like. Making a prototype should not be a process in which you take a ton of your time doing. It is smart to make a quick design and get your ideas down, then keep moving forward in the timeline process. A easy way to make sure that you move quick during the process is to use tools that you are familiar with, and tools that are easy and fast. This will speed up your design and prototyping process and allow you to get your ideas down easier and in a more efficient manor. Make sure to only use tools and features that are needed. Understanding the flow is a great way to keep the time, efficiency and energy at a complete 100%. By understanding this aspect of the design process we can focus on exactly what the user wants and what we need to provide them as the creator. If there is a need to check and possibly re-order the flow of the prototype you should probably do so, in order to make the efficiency and user interface easy and smooth. It is stressed that creating a design is a “chipping away process” in which you take your time and complete a design in steps to make up the entire thing. Minimalistic design is huge in prototyping and follows the “less is more” approach when looking at design as a whole. Rizki used the “simple design” approach which consisted of simple research and understanding the user interface of the design and how it can affect the users mood/feelings. What this means exactly, is that certain types of color schemes and interfaces can make the mood and feelings of a user happy, sad, relaxed and give a more positive outlook on your application and design. Overall, the prototype is a simple, easy way to convey your ideas down on paper, or in a visual aspect to allow both the user, and creator understand the motive and goal of your design. By creating a prototype, the user can make their ideas come alive in a sense that allows the flow, and understandability of the user lead the creative process of the user interface. This is a quick, but also very important way to convey the purpose and methods of the project, in a step by step process.

Here is a link to my prototype for my Metro-North train app: https://projects.invisionapp.com/prototype/ck7wmfm2400o1q301s2m20y1o/play

Visual Design for UI

Interface Inventory is an awesome way to ensure that the designers concert is consistent and displays a comprehensive and thoughtful frame of work. By doing this, it will make the designer have less work in the long run, and have a way to keep the project up to date. Brad Frost defines the term “User Interface” as a synonym to content inventory, but using the information to categorize and organize the interface. The first step in this process is to systematically take snippets of what you worked on and designed. It is very important to consider, typography, image and media, and forms. Building a pattern library helps you organize and rebuild your user interface, for the efficiency of your audience. The benefits that come along with pattern building are consistency in your design and efficiency over time as your design develops. Remember to have a system in place when designing an interface, keep things consistent and make things easy for the user. 

When creating an user interface it is essential as the developer to keep the UI very clean organized and efficient. Doing this could be hard, but there could also be some rules that you can follow. The seven are listed as, Light comes from the sky, Black and white first, Double your whitespace, Learn the methods of overlaying text on images, Only use good fonts, and Steal like an artist. Some of the more important ones include Black and white first, which deals with the interface of the mobile users. Black and white means “simple” which is very appealing to the user. Having too many colors in too many places is a really easy way to mess up an user interface. Although this is just one of the seven rules, I think this stands out as one of the more important ones. 

Visual aesthetics are next, which deal with the image rather than the functionality of the user interface. One way of seven, of how to get better at visual and UI design is to learn by copying the designs of top designers. By copying the work of other designers who have has success, it will not only train your eye to see new and great designs, but also mimic the work of someone who is very successful. It is said that every idea is a “mashup” of someone else’s ideas and concepts. This is still considered practice rather than plagiarism. Even though this is a method that isn’t new or old, but rather just a natural process, it is the best way to see new designs from people as a beginner in the design world. This takes two variables, which are applying what you have learned, with what you have seen before. Recreating others work along with implementing what you have learned, is the best way to create a successful user interface.

All of these tactics are perfect ways to creating an aesthetically pleasing user interface and keeping a clean, organized and neat representation of your user interface. 

Wireframes

Wireframes are a key component to creating an idea for a digital project. Wireframes perform three specific services, one is to present information displayed on a page/screen, another is to give a layout of that specific page, and lastly, convey the direction and description of the page you are creating. A wireframe is an awesome way to present information of a specific project and give the user an overview of the project. This is also another tool used to give the audience an idea by more than just pen and paper. A recommended tool by invision is to use “Wirify” to create wireframes from websites by just the click of a button. Wireframes are subject to change as more information about the project is presented. User interface is a large aspect of the wireframe, the audience will look for details of the wireframes functionality rather than the visual representation of the frame. Wireframes are wonderful opportunities to have a middle ground between the user, the designer and any stakeholders that may be present during the process. It is a good way to present information by not having to use too much detail and wordy paragraphs. 

Important things to consider when designing a wireframe are to keep a grayscale color scheme, which usually includes a black, white and gray mixture. Try and stay between two basic fonts and a simplistic display of writing. Keep your images small, clean and avoid very flashy images. 

The next steps in the process is to make some sketches and try and design further to begin the end of the design process. This is when you begin to add the muscle to the skeleton of the design. This means that next is the “high-fidelity mockup”, which is where you begin to add full characteristics to the wireframe and start to give the audience an idea of what exactly you are trying to present. Next is the prototype, where the designer develops a mockup for the public. Although this is not a final version of the design, this is basically the final draft and is very acceptable to show other people. The only difference between this and the final design is little tweaks made here and there, until the design is complete. 

In the timeline of a prototype, the wireframe is simply only just the first or maybe even the second step in the entire design. This is a great way to focus in and display to the audience exactly where you stand in the process, and how you are going to approach the final design in the future of the projects timeline. Wireframes can be made and approached in plenty of different ways. Some people like to use drawings and sketches, where others like to use online tools and resources. This isn’t anything that is specific to code or specifications, but rather to the preference of the actual designer themselves. 

Always ask yourself as the designer of this wireframe, what is the purpose of this project and why you are doing it. What is your vision for this project, and what do you want to see it look like as the final design and prototype comes to a close. The overall goal/mission of this is to make it easy for the user to achieve their goals.

2nd Blog Post

Biographies are an awesome way to express yourself in a professional manor, at the same time, letting the audience know a little bit about yourself. This is a wonderful opportunity to give the reader a better understanding of who you are asa person and gives them a chance to connect with you on a more personal level. Explain to the audience some basic early life backgrounds that tell them where you come from, where u grow up, and most importantly you name. It is essential that you don’t tell the audience your age, unless you are 90 of course, because then it is a look back on the past and becomes a reflection. It is also very important that you include educational, military, internships, volunteering and any other outstanding skill/work experiences. Similarly to the resume, it is very key to keep the non-important information out of the bio, because it isn’t smart to make the reader uninterested In your bio, because then you can’t relate. Bio’s aren’t too long, and can usually get the point across in about one to two paragraphs. Always close strong, leave the reader with a bang, and get a strong point across to let them know your mission statement, and what you are here to do.

Chapter 1,2,3, & 5

As a college student the most important part to getting a head start on your post college career is with a resume. The resume, or also known as the “appetizer” is the most essential part to getting your foot in the door for your future job experiences. In order to impress and entice your future client/employer it is important to include the most eye-grabbing and significant information on your resume. This is the first impression you have to the employer so there is a lot to consider. Little things like abbreviations, dates, and bullet points all have specific ways to how they are presented. Stay away from things like high school accomplishments, because at the end of the day they are irrelevant. 

Maintaining your resume is a large portion of the cake as well. By maintaining you resume, it allows you to use it for events, presentations, and possibly new job opportunities. Always include important information such as collaborative projects and any skills that you have. Employers love volunteering, so take that into consideration when drafting your resume. Try and stay away from references, and other non important information that can take up space. 

It is always a large plus if your resume is aesthetically pleasing, and catches the eye of the reader. By having a resume that stands out and looks good, it shows qualities like organization and sophistication. 

What’s a Wireframe or Informational Architecture?

A wireframe is a very bare bones and simplified version of what you would like your website or app to be. An informational architecture sets up the layout of how you would like the flow of the website or app.

UX Designers use wireframing as a tool to help them to organize and plan a layout of information that will be easy for the customer or client to navigate for their website, app, or product; based off user research. Also this helps the UX Designer make the bare bones of how to code the website so it would be easier and would be a basic template for them to start. Wireframes do not have any colors, an actual picture/ image, body text, typeface (font), or anything that has to do with aesthetics of how the website looks. Many people like drawing out their wireframes on paper instead of software program like Invision, Balsamiq, Adobe Illustrator, or Adobe InDesign because it is easy to quickly erase or redo a drawing but could cost money depending on the program you choose. However, I like using Invision because I am faster and typing making straighter shapes on a computer because it gives you shapes. Also if you are as messy as I am and do not the pencil smudging on the paper I would recommend making your wireframe in a software. Eventually you will have to create the wireframe in a software and you could click a button to go to the other pages and see if it is user friendly. A wireframe should look like a very rough diagram of all the pages of the website or app:
• Header & Footer: Label “Header” at the very top and “Footer” at the very bottom usually the “privacy policy” and “social media links” are in the footer of the website or app.
• Logo’s: Write “Logo” where the Logo would be/ do not draw the logo
• Image: Draw a box with an x and label what it image
• Headers/ Titles: Title and Header could have a name of what you want or “Title”
• Body Text: should be lines
• Social Media: Should be circles but do not label each social media logo/ make a bracket and label
very general as “social media”
• Special Functions: sliding images could be labeled

When making your wireframes you want to do your research on who your users are and ask yourself who are you targeting? or what type of people will being using this app?. It would be helpful to make two to three different personas of the people who you might think would use your app or website. Base on your research and the personas keep those in made when making the prototypes. When making the wireframe you would want to make it easy to navigate with your flow from page to page and this is when the “informational architecture” (IA) comes in handy because it organizes the flow map of where each screen/ page is going to or interlocked. Then the next step it to add more detail to your wireframes and then start to test it out (make a prototype). Your wireframes have to be clear, user friendly, and keep it minimalistic so its not to much for your user with redirecting links. 

IA Sketch

2a_levine_information_architecture-1Download

Informational architecture is a method of figuring out how to organize the pieces of information to be understood from a visual stand point. Richard Saul Wurman, an American architect and graphic designer, was main founder of the IA field. 

Week 2

We had to watch a video. We had make a a doodle and give it to our partner and build off of it to see a different perspective. We sketch 50 different personal logos for us.

Week 1

Week one we did a review of the syllabus and what we need to do and tasks to check off. Had to come up with ideas for logos so we went around the room and did a rapid fire game and say what we thought about the person and what we associate them with.

Testing App’s for User Research

This week we had to pick poorly designed mobile app and list things that we didn’t like and would change. I chose to do the MTA Metro-North Train Time app. I use this app fairly frequently and I know that all age ranges and people use it as well. The design of the app isn’t very ascetically pleasing and the app in general is not that user friendly. It has be a repeating comment from people that people think the logo is childish or bad. People say that the app is very frustrating to use because there are 6 different apps for 1 company so it brings you to another app or a web browser. The app was not designed well and needs a big face lift to fix problems in this app. Their competitors are AmTrak and New Jersey Transit. Both of these companies apps are easy to use and user friendly to all ages and is ascetically pleasing. It is easy to navigate through the app unlike MTA Metro-North Train Time app because they put unnecessary stuff at the top and the things people want at the bottom. Overall, Metro-North Train Time app is very disorganized and does not work in favor for the consumer and is difficult for them.

My user research I grabbed screenshots of both on my app and their competitors app. Thanks to this research, I can see how important it is to reach the application or product as much as possible, not only its functionality, but also how users feel, how they felt earlier and what they expect in the future of the app. In addition, understanding from competitors and other similar apps or products has helped find an overlap between what the application is missing and what others have already offered and are doing better.

• 

• 

Empathy Maps

In my Empathy Map everyone said very similar things. This will help you get feedback on what needs to change, how someone uses the app, how the user feels when using the app, the problems that people come across, what they would do to change and fix it. I had people who have used the app before tell me how they feel before they go back on the app and they said it was good and convenient, however when I had them go back on the app there was a lot of things that annoyed them or things that they did not notice that they would want to change because it is inconvenient for them. Everyone had a common comment to make everything into 1 app and that they did not like the logo, and also they did not notice the hamburger menu this whole time.

Persona

For my persona I choose a younger adult that commutes into the city. In creating a persona for the app, I chose to create a user that is need a source of transportation from suburbs into the city or town to town. She would have to take the train in every day so we has to use this app very often. Kids out of college do not always move into the big city because they would like to save up and live near home or live at home. Also she is young and has a lot of friends that live in the city and the majority of them live there so she is in the city 6 days a week. This would be helpful towards teens from 15 to 55 years old because a lot of people don’t want to drive or don’t have a car.

What is “UX” and “UI” Design and How do we use it Today?

To start off first, what does “UX” and “UI” stand for? Is there a big difference between UX and UI Design? If so what are the differences? What is so important about both of “UX” and “UI” Design and how will  “UX” and “UI” Design help you be a better graphic designer?

Well “UX” design stands for User Experience Design and “UI” design stands for User Interface Design , even though they mean two different things, they work hand in hand with each other. 

USER EXPERIENCE (UX):

Donald Norman was the creator of the term User Experience when he used it in the 1900s and now we use it today but now we use it in all the new technological innovations that have been created. User Experience Designers (UX) do the bare bones and back end of the experience, website, or app to be put in place so user interface Designers (UI) could design and make the layout on how they want things to look. The UX designer will help make the user experience on how to navigate through the website or app easy for them. By doing that the UX designer will have to make the wireframes, prototypes, informational architecture, user research (personas) the type of users that will be using the website, journey maps, coding and scenarios. 

Being a UX Designer for a company is very important because they help navigate/ guide the customers to a company and help make it easier for both parties.

USER INTERFACE (UI):

User Interface Designers (UI) do the cosmetic and design layout on how they want things to look. In order for the UX Designer to do their job they need a UI Designer to design what they want the app or website to look like. UI Designers job is to do the visual designs, color palette, graphic designs or work with a graphic designer, design the layout and typography. 

How UX and UI Designer’s  work together:

“UX designers work closely with UI designers, UX researchers, marketers, and product teams to understand their users through research and experimentation. They use the insights gained to continually iterate and improve experiences, based on both quantitative and qualitative user research.” 

There is a distinct difference between the user interface and the user experience, along with a pleather of similarities and correlations. The user interface is the interaction the user has with the site, and how the design, and efficiency of a site makes the quality of the website aesthetically pleasing. This includes everything from screens, to buttons, to even sounds on the website. The user experience comes directly from the user interface , what this means is that the reaction the audience has to the user interface directly plays a role in the improvement of the user experience. The reaction, whether negative or positive all contribute to the fixes that are made in order to make the user experience enjoyable and impact the user in a positive light. This is exactly what a UX designer does, they make the design of a interactive sight or application enjoyable and accessible for human interaction. The client always comes first when being a UX designer. By putting the user first, you tend to their needs and design based on what they want, making your application or design popular to a specified audience. Although User interface and user experience design are similar, there are differences. UX covers everything from Digital applications or websites, the physical site as a whole. UI is the buttons and sounds that make up the website or application. These are the cosmetics of the design and the UX is the feeling the user experiences while using those cosmetics. User Interface designers design every little screen, layout, spacing of elements, color schemes, and aesthetics, where a user experience designer does research on what makes their audience feel happy, enjoyable, and pleased, then transforming that into a design with the incorporation of the UI features. Quality is large for UX and aesthetics is big for UI designers. Many people have different opinions on whether user interface design is different or similar in comparison to user experience design, and the answer is that there is no true answer. Although both have their separate roles in the design process, the two processes make up the over user experience. Both interface and experience help the design speak to the user in a indirect way, enticing their feelings to interact with the design in a more positive way. For example, a user interface on a clothing website could have big bulky and bothering buttons to get to the next page, and if the user is not fond of the design, they simply may not purchase a product from the website due to a lack of quality interface. In this same scenario, the user could love the color scheme of the website and it may entice them to purchase more clothing and spend more money and time on the website. This aspect of the site would be the user experience, which is the ultimate goal to creating a design, pleasing the client. There is three areas when looking at user experience, those areas are research, experience design interaction, and visual design. Plenty of a UX designers job is to research and understand the needs of their users, who act as the client in this situation. By understanding the users needs and wants, the efficiency, enjoyability and experience of the audience while interacting with your design is a positive impact.