This was the first Portfolio Day I was able to attend the whole time I have been enrolled at this school. It was actually very cool. I’m glad I got to go before I transferred to the AI of Portland. I visited the Graphic Design room and the Game Art and Design room. I had a couple of friends graduating this quarter to it was nice to see them being successful and happy with what they are about to do for the remainder of their lives. Congrats guys!
In Starter’s guide to iOS Design, it talks about how you need to know your medium and which device you are designing for.
In Designing a Mobile App? Don’t Make These 10 Mistakes, here are the 10 things you need to follow:
1. Don’t Begin Wireframes or Designs Without a Flowmap
The app needs to be well thought our first, skipping this could flaw your app design and take you back to square one if you get far along and it doesn’t work out.
2. Don’t Disregard the Development Budget
It should be a high quality design, don’t skimp on details because of a low budget. This could ruin the whole out come of the app.
3. Don’t Start With Low Resolutions & Avoid Bitmaps
Always design for high quality displays.
4. Don’t Undersize The Hit Area
Take into consideration the size of a finger and how easy it should be to click on something.
5. Don’t Gratuitously Use Intro Animations
A still image can be just as nice as an animation when starting up an app. going over board can cost you.
6. Don’t Leave Users Hanging
Use a progress bar when the app is loading so they know the app is loading and still working, not malfunctioning.
7. Don’t Blindly Copy Style From Other Operating Systems
Don’t make every app look like it was built by the operating system.
8. Don’t Overstuff Pixel-Dense Screens
This can cause difficulty in navigating and cluttered screens.
9. Don’t Assume Everyone Will Use Your App The Same Way You Do
Every user is different, that’s why user testing is so important.
10. Don’t Forget About Gestures, But Don’t Abuse Them Either
Use easy short cuts like a delete button, but don’t over use it.
I like the fonts used, they are easy to read throughout. The type could be a few sizes bigger. Viewing from my Mac book it seems a little small in the nav bar on the portfolio site. I really like the set up of the studio site and the animations within it.
Tantri, Martin martintantri.com
I like the continuous flow of the site and how simple it is. The fonts are easy to read and the color scheme is nice and not overly distracting. You might be able to get away with a rollover effect when you put your cursor over the portfolio pieces though so it isn’t as static. When you expand and condense the window your page gets stretched and scaled out of proportion.
Dickey, Jacob dickeysdesign.net
The logo in the upper left hand corner seems to small. The bar at the bottom of each page is a nice touch with the resume and about and contact. I think the color scheme is clean and subtle. The site is very simple and clean which is good, with the continuous scroll and three tab options.
Macpherson, Gavin gavinmacpherson.com
The continuous scroll is a nice touch and the colors aren’t too overwhelming, but I think you shouldn’t use the yellow. It gets a little hard to read on the purple and brown. On the experience page i do not like how the skills are shown through bars. It seems that you should add percentages or something and elaborate on how well you know programs and such. The site has so much going on, towards the bottom I just get lost and do not want to keep going. On the contact part, the message box could be centered instead of left aligned. Some stuff (process book) seems to be unfinished.
Quail, Chad chadquail.com
The logo in the upper left hand corner seems a bit blurry, same with the nave bar. In the nav bar I don’t like the black opaque box behind it. You should get rid of all the excess room at the bottom of the page. I like the continuous scroll though and how simple it is. The background texture is subtle enough that it doesn’t distract from the content.
Callahan, Jacquelyn jacqiethedesigner.us
There is a lot of white space at the bottom of the portfolio page and an add? It looks really tacky. The galaxy image at the top could be stretched all the way out on the pages. Some of your portfolio pieces cannot be clicked on which is upsetting, because I wanted to see some of the portfolio work.
Bargreen, Chandler chandlerbargreen.com
I like the continuous scroll of the site, but when first visiting I do not know to scroll down. And when you are on a page it does not show it in the nav bar. I really like the animation in the background. It makes it so the site isn’t so plain.
Pfeiffer, Amanda apfeiffercreative.com
This site needs a lot of work, the nav bar links do not work. You can only view the portfolio page. You can only click on a couple of of pieces. The color scheme is boring and so is the font. You need a logo maybe to spice it up rather than just your name in the upper left hand corner. Your site is also no responsive and when I scroll down I can also scroll side to side which is pointless.
Vinson, Gregory gregvinson.net
The site is unresponsive. I don’t like the green you used. I like how simple it is though with the continuous scroll. The second nave bar for the types of work makes it easier to find a specific project. I think you should rethink how the pieces pull up when clicked on, I kept scrolling down and it was just the rest of the site it the back ground which was unnecessary.
In Tale of a Top- 10 App, Part 1: Idea and Design, the author starts talking about his app, Grades. It didn’t make much money, but it was a big success. There were some competitors in the app store, but that is the nice thing about the app store – you can easily browse apps and find what you’re looking for by price and ratings. The very important thing is user experience and how the user can easily use the app. These were the three steps the author took to make sure the app was easy to navigate:
- Analyze users’ daily experience without the app — i.e. identify the problems they currently face.
- Brainstorm ways that an ideal app could solve those problems.
- Choose which problems to focus on, and decide which features were feasible for the first release.
Then he took actual steps to build the app, Step 1: Define Personas, Step 2: Map the Personas’ Experience Without the App, Step 3: Brainstorm the Ideal Assistance, and Step 4: Kill the Baby. Not literally killing a baby, just getting rid of most ideas and creating new ones, because most of your first designs are going to be worthless in the beginning. Then you find your concept statement or definition. After that you need a theme and details and people to test your app design and etc. These things will help it all to come together. The most important thing is testing. This will help you to debug any problems you come across.
In Tale of a Top- 10 App, Part 2: Marketing and Launch, the best thing to do after all of the hard work of brainstorming and testing is to market the app. It starts from day 1. You can do it yourself if you are broke or build a team. The author of the article followed these steps to make it happen:
- List influential people.
- Actively monitor.
- Go where they are.
- Do cool stuff.
- Cultivate long-term friendships.
Most importantly is creating buzz on social media like Twitter. You need to pitch the idea to people as well. After all of that you may or may not have a successful app.
Chapter 10, “Mobile: It’s not just a city in Alabama anymore,” is essentially about “tiny, time-wasting overlords.” The cellphone era, the author is referring too, has practically brainwashed our world and especially generation Z and some of gen Y. At the time cell phones gave you access to the internet and the battery lasted all day. Now your battery might last a couple hours depending on how my apps you are using. For people in other countries, the cell phone bi-passed the land line and actual computer.
There is barley a difference in designing for usability in cellphones compared to desktop. But there are some specific differences like things you can and cannot do on mobile. It has to be a tinier version. The bigger the phone though, the higher resolution and it’s easier to click on links and tiny bits on the app or site. And the idea of “one-design-fits-all-screen-sizes” is a field of lost dreams. It is a lot of work to scale it up or down and keep the responsiveness and good design. Three suggestions for a good app: allow zooming, clicking on a link and it taking you to the exact thing, allowing a link to the full site.
Apps need to be learn-able and memorable. It should be straight forward and easy to navigate through. Once you learn how to use an app you will know how to use it later on. Memorability is a huge factor in whether people use it for daily use. Make it cheap too, like $0.99 or free.
“Top Ten Tips for Naming Your App”
“That first impression on someone is sometimes all you have. Does it convey how amazing your product is? Is it easy to pronounce? Is it even accurate to what your app does? All those questions, and many more, are considered in those split-second moments when someone’s browsing the App Store or some other marketplace.” Some good tips are: don’t duplicate, be original, be clear, one or two-part name, pronounce-ability, 11 characters or less, name generators, and do your homework.
“99% Invisible podcast episode – Title TK”
My partner for this project will be Andrew A. We will be designing for the iPhone 6. We decided to use Marvel for the prototype. My app design ideas are the following:
- Horoscope dating app – matches you with your compatible horoscope sign
- Group: Group Messaging app – you can create a group (family, school, etc.) and message and send documents, PDFs, photos, videos and music.
- Snow Bunny: Snowboarding/Skiing app – Choose a state or country, and you can see the different areas to ski and snowboard whether the mountain is open for the season, as well as weather, live feed video, pricing and times.
Andrew’s App Ideas:
- Family tracker – Helps you keep in contact with kids and parents and know where they are.
- Find Bands/Shows – Choose a city, state and see who is coming to you and buy tickets.
- How to make mixed drinks – Little cook book for mixed drinks and shopping list for what you need.
Application Definition Statement: (EDM app)
This app is intended to bring the rave audience closer to EDM music. It scans their music library on their phone, based on the artists and genres normally played at raves and festivals the app will find those events close to you with dates. You can purchase tickets and even choose a location and date if you are looking for a specific event. You can also find artists and music on iTunes.
Features Users Might Like:
Type in your location and date or price range. Easy to navigate.
Ages 18-35. For Young adults who love the rave life and EDM music.
Features Audience will like:
Shows events and festivals near you. Can upload music from iTunes.
Designing for iOS embodies the following three themes, “Deference, The UI helps people understand and interact with the content, but never competes with it, Clarity, Text is legible at every size, icons are precise and lucid, adornments are subtle and appropriate, and a sharpened focus on functionality motivates the design, and Depth, Visual layers and realistic motion impart vitality and heighten people’s delight and understanding.” If you’re redesigning an older app or creating a new one you need to approach the job in this way, First, look past the UI to the app’s core functionality and affirm its relevance. Next, use the themes of iOS to inform the design of the UI and the user experience. Add details and embellishments with care and never gratuitously. Finally, be sure to design your UI to adapt to various devices and modes so that users can enjoy your app in as many contexts as possible.
Here are some ways iOS defers to the user’s content, with a focus on functionality, using the whole screen, the weather app is a great example, reconsider visual indicators of physicality and realism, bezels, gradients, and drop shadows sometimes lead to heavier UI elements that can overpower or compete with the content so instead, focus on the content and let the UI play a supporting role, and translucent elements, the pull down on the iPhone which shows content, but shows what is also behind it.
Providing clarity is another way to make the important things stand out in an app, like using negative space, let color simplify the UI, legibility of fonts, and border-less buttons. You should use depth to communicate by creating a hierarchy on certain pages. “On a device that supports 3D Touch, peek, pop, and quick actions give users access to important functionality without losing their context. By using a translucent background and appearing to float above the Home screen, folders separate their content from the rest of the screen. Reminders displays lists in layers, as shown here. When users work with one list, the other lists are collected together at the bottom of the screen. Calendar uses enhanced transitions to give users a sense of hierarchy and depth as they move between viewing years, months, and days. In the scrolling year view shown here, users can instantly see today’s date and perform other calendar tasks. When users select a month, the year view zooms in and reveals the month view. Today’s date remains highlighted and the year appears in the back button, so users know exactly where they are, where they came from, and how to get back. A similar transition happens when users select a day: The month view appears to split apart, pushing the current week to the top of the screen and revealing the hourly view of the selected day. With each transition, Calendar reinforces the hierarchical relationship between years, months, and days.”
In “The Flat Design Era”“Flat design is a graphic style that aims to avoid any graphic element providing no significant value to the structure of a template.” With this, any gradients, volumes, or realistic forms are taken out and only the simplest objects are used. It is a minimalist approach to design. “Skeuomorphism is basically the way designs often borrow a particular feature from the past, even when the functional need for it is gone. Its a physical ornament or design on an object copied from a form of the object when made from another material or by other techniques.” Most designs are moving away from skeuomorphism, but Apple has adopted it for iOS and since then it has become popular again. There is not a huge difference when it comes to flat design and skeuomorphism. Flat design is skeuomorphic.
Chapter 8, “The Farmer and the Cowman Should be Friends,” talks about arguments about usability. The author calls them “religious debates” solely because they have a lot in common with most discussions about religion and politics; two topics people have strong personal beliefs on, but cannot be proven. Same with websites, no one is going to have the same opinion or preference as to what goes into the site when working with a team. An important thing within this chapter is that there is no average user. The myth that users are like the designers is busted. Web users are all unique as well as web designers, so making a site that appeals to everyone is just not going to happen. Asking a question like “should this be a pull down menu?” is something you wont get a good answer from. Instead you should ask “does this pull down menu, with these items and this wording, with this context and layout create a good experience for users?” And no one can really answer that question, besides a lot of testing.
Chapter 9, “Usability Testing on 10 cents a day,” talks more on usability testing and the tests. Focus groups are much different than usability testing. Focus groups are small groups of people you would ask for an opinion or feelings about something, while usability tests are for one person at a time trying to do typical tasks on a webpage or prototype so you can debug and fix things.
If you want a great site you need to know a couple of things. You have to test the site, even if you can only get one user to test it. And testing one user early in the project is better than testing 50 near the end of the project. If you have no time and/ or money you can test it yourself. You can even find a friend to do it, which is what I have done personally in some of my classes. In the book, he states you should test at least once a month. This makes sense since you should keep your site updated and new. If you set a date and invite people and tell them to save the date, chances are they will show up every time to help out. You should have at least 3 participants for testing and they don’t need to find ALL the problems. It is virtually impossible.
Where do you test? Who should observe? Who should do the testing? What do you test, and when do you test it? How do you choose the tasks to test? What happens during the test? – These are all important questions when doing usability testing. To conduct the test you should be in a quiet place where there are no interruptions. The person who does the testing is the facilitator. They keep the testing on track and take notes. Anyone and everyone should observe. It might be helpful to have a second opinion. The facilitator will guide you through what you are testing. You will have a few tasks like create an account or login. You can even test a prototype before the site is even built. During the test you should have a script, and it might take around an hour.
Typical problems that occur can be that the user is unclear on the concept, the words they are looking for aren’t there, and there is just too much going on. Then when you find the problems, you need to decide what to fix. You need to fix the biggest problems first and make a list of them.
Seattle Usability Testing: http://www.customerexperiencelabs.com/seattle-usability-testing/
Dominic Capcino and Andrew Alimbuyuguen
- The Iceland by Sakutaro Hagiwara (48 pages)
- Audience is poet enthusiasts into Japanese Literature (age range 18-40)
Client/Audience and Feedback:
- Audience 18-35 (young women)
- Put video for war history page
- Make author picture smaller
- Keep the circle going
- Use fonts from book cover as well as colors