· Discussion #3 - De-constructing Design
· Description
In the 'assignments' app, take a look at the write up for assignment #3 (design / mockups). There, you'll find a YouTube video
https://www.youtube.com/watch?v=dsZ9LytmsEM
that I created to explain the assignment, share design best practices, and the tools you need to use. In the video, I also talk about the fact that user experience design is a combination of shapes, text, images, and symbols. All of those have their own different colors and patterns to give them more style.
What I'd like you to do is to take a screenshot of an app on your phone (a different app than the one you previously chose) and deconstruct the design in words.
.................
i.e. The top is a long blue rectangle with 3 stacked white rectangles on the left side which represents the menu. In the middle of that blue rectangle, there's text that reads "Setup". On the right side of the blue rectangle, there's an envelope symbol which represents the messenger feature of the app.
Under the blue rectangle is an even bigger white rectangle with the body of the app inside of it. From the body of the app, you can see an image of a person and right under that image is text of their name. Under that, it's an orange rectangle with text inside of it that reads 'edit profile'.
.................
You get the picture.
Examples:
he app I have selected to deconstruct is the Fight Camp app that runs on IOS and Android.
Having now obtained a greater appreciation for design concepts the first aspect of the app design that grabs my attention is the black backdrop. The black is meant to be a void to allow each of the screens squares, that represent video workouts, to stand out prominently. Another important idea in the design structure is that the app is purposefully minimalist so that the user is allowed to immediately engage with the content.
The app's introduction screen is always broken into thirds. The topmost section is the most prominently displayed as this is the workout sequence section (the sequence is a series of workouts that is meant to maximize end-user content engagement). The section is a large rectangle and in that section is an image of a trainer in an action pose.
The next section is the “Recently Added” workouts section. The approach with the second and third sections of the home screen is to always show the user two videos to give the sense of choice. One video will always be kickboxing-related, the second video will always be boxing-related. Another interesting part of the design is that the app developer has mixed-in physiological concepts as one selection will always be 4 rounds or 15 minutes and the other will always be 8 rounds of 30 minutes. Each video is isolated in its own square. Each square will contain an image of a trainer in an action pose, as well as a number representing the time commitment for this given workout, and a color sequence to show the difficulty rating of the selection. The Recently Added section is also the only section of the app where you can click to Show All available workouts.
The third section of the app screen will be the “Workouts of the day” section which is structured in the same method as the second section.
Lastly, at the bottom of the screen is the typical app navigation bar which shows Home, Activity, Profile, Downloads, and more. A nice touch with the navigation bar is that the currently selected screen is displayed as Red whereas the other options are white.
@font-face {font-family:Mangal; panose-1:2 4 5 3 5 2 3 3 2 2; mso-font-charset:1; mso-generic-font-family:roman; mso-font-pitch:variable; mso-font-signature:40963 0 0 0 1 0;}@font-face {font-family:"Cambria Math"; panose-1:2 4 5 3 5 4 6 3 2 4; mso-font-charset:0; mso-generic-font-family:roman; mso-font-pitch:variable; mso-font-signature:-536870145 1107305727 0 0 415 0;}@font-face {font-family:Calibri; panose-1:2 15 5 2 2 2 4 3 2 4; mso-font-charset:0; mso-generic-font-family:swiss; mso-font-pitch:variable; mso-font-signature:-536859905 -1073732485 9 0 511 0;}p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-unhide:no; mso-style-qformat:yes; mso-style-parent:""; margin:0in; mso-pagination:widow-orphan; font-size:12.0pt; font-family:"Calibri",sans-serif; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:Calibri; mso-fareast-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:Mangal; mso-bidi-theme-font:minor-bidi; mso-bidi-language:AR-SA;}a:link, span.MsoHyperlink {mso-style-priority:99; color:#0563C1; mso-themecolor:hyperlink; text-decoration:underline; text-underline:single;}a:visited, span.MsoHyperlinkFollowed {mso-style-noshow:yes; mso-style-priority:99; color:#954F72; mso-themecolor:followedhyperlink; text-decoration:underline; text-underline:single;}.MsoChpDefault {mso-style-type:export-only; mso-default-props:yes; mso-bidi-font-size:12.0pt; font-family:"Calibri",sans-serif; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:Calibri; mso-fareast-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:Mangal; mso-bidi-theme-font:minor-bidi; mso-bidi-language:AR-SA;}div.WordSection1 {page:WordSection1;}