OUGD603 - Research Brief - Wire Frames

OUGD603

Research Brief

Wire Frames

Homepage and profile

Connections

Chat

Maps

Maps

chat

Chat

Chat

I really wanted to create the wireframe in Adobe XD, however, my computer does not have the capacity to run this programme. Instead, I have resorted to creating the wireframes in Illustrator. This does not allow me to test the functions but I feel I have done enough in-depth sketches on paper to have a good understanding of how the app will function.
I will now add colour and make it look more appealing.

Adding Details

OUGD603 - Research Brief - Icon Development

OUGD603

Research Brief

Icon Development

OUGD603 - Research Brief - Human Interface Guidelines

OUGD603

Research Brief 

Human Interface Guidelines - Apple

Aesthetic Integrity

Aesthetic integrity represents how well an app’s appearance and behavior integrate with its function. For example, an app that helps people perform a serious task can keep them focused by using subtle, unobtrusive graphics, standard controls, and predictable behaviors. On the other hand, an immersive app, such as a game, can deliver a captivating appearance that promises fun and excitement, while encouraging discovery.

Consistency

A consistent app implements familiar standards and paradigms by using system-provided interface elements, well-known icons, standard text styles, and uniform terminology. The app incorporates features and behaviors in ways people expect.

Direct Manipulation

The direct manipulation of onscreen content engages people and facilitates understanding. Users experience direct manipulation when they rotate the device or use gestures to affect onscreen content. Through direct manipulation, they can see the immediate, visible results of their actions.

Metaphors

People learn more quickly when an app’s virtual objects and actions are metaphors for familiar experiences—whether rooted in the real or digital world. Metaphors work well in iOS because people physically interact with the screen. They move views out of the way to expose content beneath. They drag and swipe content. They toggle switches, move sliders, and scroll through picker values. They even flick through pages of books and magazines.

Interface Essentials

Bars. Tell people where they are in your app, provide navigation, and may contain buttons or other elements for initiating actions and communicating information.

Views. Contain the primary content people see in your app, such as text, graphics, animations, and interactive elements. Views can enable behaviors such as scrolling, insertion, deletion, and arrangement.

Controls. Initiate actions and convey information. Buttons, switches, text fields, and progress indicators are examples of controls.

Loading

Make it clear when loading, so the user doesn’t think the app has crashed.

Show content as soon as possible. Use placeholder text, graphics or animations to identify where content isn’t available yet.

Modality

Modality creates focus by preventing people from doing other things until they complete a task or dismiss a message or view.

Minimize the use of modality. Generally, people prefer to interact with apps in nonlinear ways. Consider creating a modal context only when it’s critical to get someone’s attention, when a task must be completed or abandoned to continue using the app, or to save important data.

Don’t display a modal view above a popover. With the possible exception of an alert, nothing should appear over a popover. In rare cases when you need to present a modal view after action is taken in a popover, close the popover before displaying the modal view.

Navigation

Navigation should feel natural and familiar, and shouldn’t dominate the interface or draw focus away from content.

Hierarchical Navigation

Make one choice per screen until you reach a destination. To go to another destination, you must retrace your steps or start over from the beginning and make different choices. Settings and Mail use this navigation style. 

Flat Navigation

Switch between multiple content categories. Music and App Store use this navigation style.

Content-Driven or Experience-Driven Navigation

Move freely through content, or the content itself defines the navigation. Games, books, and other immersive apps generally use this navigation style.

Navigation must be logical, predictable, and easy to follow.

Design an information structure that makes it fast and easy to get to content. Organize your information structure in a way that requires a minimum number of taps, swipes, and screens.

Use a navigation bar to traverse a hierarchy of data. The navigation bar’s title can show the current position in the hierarchy, and the back button makes it easy to return to the previous location. 

Onboarding

Onboard new users and reconnect with returning ones.

Provide a launch screen – gives the impression your app is fast and responsive.

Stick to the essentials in tutorials. It’s fine to provide guidance for beginners, but education isn’t a substitute for great app design. First and foremost, make your app intuitive. If too much guidance is needed, revisit the design of your app.

Make learning fun and discoverable. Learning by doing is a lot more fun and effective than reading a list of instructions. Use animation and interactivity to teach gradually and in context. Avoid displaying screenshots that appear interactive.

General Layout Considerations

Ensure that primary content is clear at its default size.

Maintain an overall consistent appearance throughout your app. In general, elements with similar functions should look similar.

Use visual weight and balance to convey importance.

Use alignment to ease scanning and to communicate organization and hierarchy. Alignment makes an app look neat and organized, helps people focus while scrolling, and makes it easier to find information. Indentation and alignment can also indicate how groups of content are related.

Animation

Use animation and motion effects judiciously. Don’t use animation for the sake of using animation. Excessive or gratuitous animation can make people feel disconnected or distracted, especially in apps that don’t provide an immersive experience. 

Strive for realism and credibility.

Use consistent animation.

Branding

Successful branding involves more than just adding brand assets to your app. Great apps express unique brand identity through smart font, color, and image decisions. Provide enough branding to give people context in your app, but not so much that it becomes a distraction.

Incorporate refined, unobtrusive branding.

 For the best experience, subtly incorporate your brand through your app’s design. Using colors from your app icon throughout your interface is one great way to provide context in your app.

Don’t let branding get in the way of great app design. Above all, make your app feel like an iOS app. Ensure that it's intuitive, easy to navigate, easy to use, and focuses on content. Even if your app is available on other platforms, avoid diluting your design by focusing too much on consistent branding.

Resist the temptation to display your logo throughout your app. 

Colour

Use color judiciously for communication. The power of color to call attention to important information is heightened when used sparingly. For example, a red triangle that warns people of a critical problem becomes less effective when red is used elsewhere in an app for noncritical reasons.

Use complementary colors throughout your app. 

In general, choose a limited color palette that coordinates with your app logo. Subtle use of color is a great way to communicate your brand.

Consider choosing a key color to indicate interactivity throughout your app.

Avoid using the same color for interactive and noninteractive elements. 

Test your app’s color scheme under a variety of lighting conditions.

Consider how your use of color might be perceived in other countries and cultures. In some cultures, for example, red communicates danger. In others, red has positive connotations. Make sure the colors in your app send the appropriate message.

Typography

Emphasize important information. Use font weight, size, and color to highlight the most important information in your app.

If possible, use a single typeface. Mixing several different typefaces can make your app seem fragmented and sloppy. Consider using one typeface and just a few font variants and sizes.

Make sure custom fonts are legible.

Image Sze and Resolution

Designing High-Resolution Artwork

Use an 8px-by-8px grid. A grid keeps lines sharp and ensures that content is as crisp as possible at all sizes, requiring less retouching and sharpening. Snap the image boundaries to the grid to minimize half pixels and blurry details that can occur when scaling down.

Produce artwork in the appropriate format. In general, use de-interlaced PNG files for bitmap/raster artwork. PNG supports transparency and, because it's lossless, compression artifacts don't blur important details or alter colors. It's a good choice for intricate artwork that requires effects like shading, textures, and highlights. Use JPEG for photos. Its compression algorithm usually produces smaller sizes than lossless formats and artifacts are harder to discern in photos. Photo-realistic app icons, however, look best as PNGs. Use PDF for glyphs and other flat, vector artwork that requires high-resolution scaling.

Use the 8-bit color palette for PNG graphics that don’t require full 24-bit color. Using an 8-bit color palette reduces file size without reducing image quality. This palette is not appropriate for photos.

Optimize JPEG files to find a balance between size and quality. Most JPEG files can be compressed without noticeable degradation of the resulting image. Even a small amount of compression can save significant disk space. Experiment with compression settings on each image to find the optimal value that yields an acceptable result.

Provide alternative text labels for images and icons. Alternative text labels aren’t visible onscreen, but they let VoiceOver audibly describe what's onscreen, making navigation easier for people with visual impairments.

App Icon

Embrace simplicity. Find a single element that captures the essence of your app and express that element in a simple, unique shape. Add details cautiously. If an icon’s content or shape is overly complex, the details can be hard to discern, especially at smaller sizes.

Provide a single focus point. Design an icon with a single, centered point that immediately captures attention and clearly identifies your app.

Design a recognizable icon. 

Keep the background simple and avoid transparency. 

Use words only when they’re essential or part of a logo.

Don’t include photos, screenshots, or interface elements.

Test your icon against different wallpapers. You can’t predict which wallpaper people will choose for their Home screen, so don’t just test your app against a light or dark color. See how it looks over different photos. Try it on an actual device with a dynamic background that changes perspective as the device moves.

Custom Icons

Create recognizable, highly-simplified designs. Too many details can make an icon confusing or unreadable. Strive for a simple, universal design that most people will recognize quickly and won’t find offensive.

Design icons as glyphs. A glyph, also known as a template image, is a monochromatic image with transparency, anti-aliasing, and no drop shadow that uses a mask to define its shape. Glyphs automatically receive the appropriate appearance—including coloring, highlighting, and vibrancy—based on the context and user interactions. A variety of standard interface elements support glyphs, including navigation bars, tab bars, toolbars, and Home screen quick actions.

Prepare glyphs with a scale factor of @2x and save them as PDFs. Because PDF is a vector format that allows for high-resolution scaling, it's typically sufficient to provide a single @2x version in your app and allow it to scale for other resolutions.

Keep your icons consistent. Whether you use only custom icons or mix custom and system icons, all icons in your app should be the same in terms of level of detail, optical weight, stroke weight, position, and perspective.

Make sure icons are legible. In general, solid icons tend to be clearer than outlined icons. If an icon must includes lines, coordinate the weight with other icons and your app's typography.

Use color to communicate selected and deselected states. Avoid toggling between two different icon designs, like a solid version and an outlined version.

Avoid including text in an icon. If you need text, display a label beneath the icon and adjust its placement accordingly.

Navigation Bars

A navigation bar appears at the top of an app screen, below the status bar, and enables navigation through a series of hierarchical screens. When a new screen is displayed, a back button, often labeled with the title of the previous screen, appears on the left side of the bar. Sometimes, the right side of a navigation bar contains a control, like an Edit or a Done button, for managing the content within the active view. In a split view, a navigation bar may appear in a single pane of the split view. Navigation bars are translucent, may have a background tint, and can be configured to hide when the keyboard is onscreen, a gesture occurs, or a view resizes.

Navigation Bar Titles

Consider showing the title of the current view in the navigation bar. In most cases, a title helps people understand what they’re looking at. However, if titling a navigation bar seems redundant, you can leave the title empty. For example, Notes doesn’t title the current note because the first line of content supplies all the context needed.

Navigation Bar Controls

Avoid crowding a navigation bar with too many controls. In general, a navigation bar should contain no more than the view’s current title, a back button, and one control that manages the view’s contents. If you use a segmented control in the navigation bar, the bar shouldn’t include a title or any controls other than the segmented control.

Use the standard back button.

Status Bars

The status bar appears along the upper edge of the screen and displays useful information about the device’s current state, like the time, cellular carrier, network status, and battery level. The actual information shown in the status bar varies depending on the device and system configuration.

Consider temporarily hiding the status bar when displaying full-screen media.

Avoid permanently hiding the status bar.

Tab Bars

A tab bar appears at the bottom of an app screen and provides the ability to quickly switch between different sections of an app. Tab bars are translucent, may have a background tint, maintain the same height in all screen orientations, and are hidden when a keyboard is displayed. A tab bar may contain any number of tabs, but the number of visible tabs varies based on the device size and orientation. If some tabs can’t be displayed due to limited horizontal space, the final visible tab becomes a More tab, which reveals the additional tabs in a list on a separate screen.