O.k., I finished all the design teardowns, printed them out and reviewed them, then went over my project folder to make sure every necessary file was within, and now I'm working on uploading the entire project to github.
Here's the design teardowns, my apologies for the formatting issues from copying my OpenOffice docs into Blogger, what I actually turned in for the assignment looks nothing like this, format-wise:
Facebook
Design Teardown
About
Page
Go
to each of the links above and immediately squint your eyes so you
can't really see what they say.
Sketch
on a sheet of paper what the approximate visual hierarchy looks like
-- what areas are denser and what areas are more sparse?
The
graphics of the page are the dense parts, while the sparse areas
comprise the About section.
The
profile picture, while smaller than the cover photo, is placed so as
to appear that it is "on top" of the cover photo, so it
draws the user's attention first, with the cover photo becoming a
sort of background image for the profile picture. That said, because
of the cover photo's size, it does attract a lot of attention, taking
second place in the visual hierarchy. After the profile picture and
the cover photo, the eye is drawn to pictures on the right side of
the page, which are paid ads.
The
eye then goes to the bottom of the page, mostly white space, which
contains the background information about the person, scattered
within a lot of white space.
Open
your eyes and ask yourself "who is the most likely user of this
page?"
Someone
that wants to gather information about the person to whom the profile
belongs to.
What
is that user's critical goal on that page?
To
gather information about the owner of the profile.
Does
the visual hierarchy you sketched lead to that goal?
No,
it leads to the profile picture, then the cover photo, then the ads,
and only after than does it lead the user to the About section, so
the user's critical goal is not prioritized, the data the user is
looking for is last on the visual totem pole.
Do
the relationships between the elements lead you to that goal
(remember your CRAP principles)?
Not
directly, they do so in a roundabout fashion, which is not ideal.
Color is used in the images, which lead the user's eye to the images
first, instead of to the data the user is looking for. On the plus
side (but still not leading to the goal), repetition is used in that
the various sections of Facebook, and of this page in particular,
retain a similar visual style, creating trust between Facebook and
the user. This trust aids marketers who promote on Facebook, by
association, but again, in this particular page, does not lead
directly to the data the user wants. Alignment is used very well,
the page looks orderly, but the desired data is placed lower on the
page instead of being made more visible with more prominent
placement.
What
font families are most prominent on the page? (use the WhatFont
add-on or your browser's developer tools to inspect this).
Helvetica,
helvetica neue, arial, "lucida grande," and sans-serif.
How
do these font families contribute to or take away from the site's
flow?
They
contribute to the site's sense of consistency and order.
How
do the line spacings, sizes and weights contribute to or take away
from the site's flow?
This
is done well. The About heading is in a larger font than the
headings for the sections within it, and then the active section is
bolded, as opposed to the non-active sections, which are in a more
grey font. Text within the sub-sections of the About section is in a
smaller font than the actual sub-section headings, and this helps the
reader keep track of the flow of the page, from heading, to
sub-heading, to sub-heading content.
What
would you improve to achieve a better hierarchy or flow?
I
would do what Facebook did with the "Photos" page, which is
to automatically scroll the screen down right below the profile
picture and cover photo, so as to avoid both of those photos
distracting from the content the user is after, which is the "About"
section.
Facebook
Design Teardown
Home
Page (when logged out)
Go
to each of the links above and immediately squint your eyes so you
can't really see what they say.
Sketch
on a sheet of paper what the approximate visual hierarchy looks like
-- what areas are denser and what areas are more sparse?
The
densest area is the dark blue navigation bar across the top of the
page, so that is where the eye is drawn to first, in particular the
large bold Facebook logo, which works fine, this is the landing page,
so the user wants to know that they came to the correct page. After
that, moving right across the navigation bar, the user's eyes are
drawn to the login/password section, which the user will immediately
fill in if he has credentials and wishes to log in. If he does not
have credentials, his eyes will wander down to the third element in
the visual hierarchy, the Sign Up section, which takes up the right
half of the page.
Open
your eyes and ask yourself "who is the most likely user of this
page?"
Someone
wanting to log in to Facebook.
What
is that user's critical goal on that page?
Logging
in to Facebook.
Does
the visual hierarchy you sketched lead to that goal?
Yes.
The eyes first go to the Facebook logo in the upper left, assuring
the user that they arrived at the right page, and then the eye is
drawn to the login credentials area, which allows the user to do what
they came to this page to do, login.
Do
the relationships between the elements lead you to that goal
(remember your CRAP principles)?
Yes.
Foremost is color, which is used very well by making the navigation
bar, which holds both the logo and the login credentials area, a dark
blue, as opposed to the very light colors of the rest of the page.
This is a great use of color. Next is repetition, which is used by
keeping a consistent color scheme throughout the page, for example,
creating a look that makes sense. Next is alignment, which is used
very well. The logo is aligned to the left, while the login elements
are all aligned right, and aligned to each other, creating a straight
edge at the right side of the page. Finally, positioning is used
very well, in that the position of the elements of the page in
relation to the visual hierarchy parallels the critical goals of the
user, which are to verify that they are on the right page, and then
login, or if they do not have credentials, to sign up. CRAP
principles were used eloquently in the design of this page.
What
font families are most prominent on the page? (use the WhatFont
add-on or your browser's developer tools to inspect this).
"Freight
Sans Bold," "lucida grande," tahoma, verdana, arial,
and sans-serif.
How
do these font families contribute to or take away from the site's
flow?
They
contribute immensely to the site's flow by being consistent, thereby
not interrupting the flow.
How
do the line spacings, sizes and weights contribute to or take away
from the site's flow?
They
strongly contribute to the flow, for example, the Facebook logo is in
a font that looks heavy and official, but modern, creating trust in
the user, leading the user to continue with the flow of the page and
move on to the login credentials section of the navigation bar, where
the user will have enough trust to enter their login credentials.
What
would you improve to achieve a better hierarchy or flow?
Nothing,
I like the hierarchy and flow of this page, it puts the user at ease
and leads them along seamlessly.
Facebook
Design Teardown
News
Feed page (after logging in)
Go
to each of the links above and immediately squint your eyes so you
can't really see what they say.
Sketch
on a sheet of paper what the approximate visual hierarchy looks like
-- what areas are denser and what areas are more sparse?
The
densest area on the screenshot I went by was occupied by the image
for the latest post on the news feed. This was followed by the ads
on the right and then the dark blue navigation bar.
Open
your eyes and ask yourself "who is the most likely user of this
page?"
Someone
that wants to stay up to date on their friends' posts.
What
is that user's critical goal on that page?
To
consume content created by friends of the user (or by liked pages,
which also produce content).
Does
the visual hierarchy you sketched lead to that goal?
Yes.
Users' posts tend to have images attached, so this will draw the eye
to that area of the page. Also, the feed is centered so that the eye
naturally comes to rest on the newest post.
Do
the relationships between the elements lead you to that goal
(remember your CRAP principles)?
Yes.
Regarding color, the dark blue navigation bar helps to orient the
user, letting them know that the top part of the page is the more
important part, which correlates with the newest feed content.
Repetition is also used very well, with the elements in the page
sharing the same design scheme (blues, grays, and white in boxes
aligned to the grid). Regarding alignment, the page is aligned in a
three column grid, so that the news feed, which is what the user is
on this page to consume, takes up the center and larger portion of
the page. Position is also used very well, as the newer posts push
the older posts downward, emphasizing that the posts on top are more
important, which the user would find natural.
What
font families are most prominent on the page? (use the WhatFont
add-on or your browser's developer tools to inspect this).
Helvetica,
helvetica neue, arial, "lucida grande," and sans-serif.
How
do these font families contribute to or take away from the site's
flow?
They
contribute to the site's sense of consistency and order.
How
do the line spacings, sizes and weights contribute to or take away
from the site's flow?
They
make the page easy enough on the eyes. There's a lot of content on
this page, but by making the line spacings reasonable, the content
doesn't jumble up together (except perhaps in the "Trending"
area). The sizes and weights contribute to the visual hierarchy by
emphasizing areas that are more important or that offer additional
navigation options to the user.
What
would you improve to achieve a better hierarchy or flow?
The
line spacing in the "Trending" area could be enlarged a
little bit, that area feels cramped.
Facebook
Design Teardown
Photos
Page
Go
to each of the links above and immediately squint your eyes so you
can't really see what they say.
Sketch
on a sheet of paper what the approximate visual hierarchy looks like
-- what areas are denser and what areas are more sparse?
For
this page, Facebook, by default, scrolls the user below the profile
picture and cover photo, which is great, as those two images are very
prominent and will otherwise dominate the page, as they do in the
About page. Defaulting the user's view of the page to begin right
below them contributes greatly towards allowing the user to achieve
their critical goal and avoid distractions.
Open
your eyes and ask yourself "who is the most likely user of this
page?"
A
user wanting to look at photos posted by the owner of the profile.
What
is that user's critical goal on that page?
Looking
at photos posted by the owner of the profile, for example, photos in
albums.
Does
the visual hierarchy you sketched lead to that goal?
Absolutely.
The very first thing the user sees are photos, lots of them,
organized so that they take up the majority of the page. The second
thing the eye is drawn to are the ads on the side, and then the blue
navigation bar on top, but that's o.k., because they are a distant
second and third in regards to the attention they draw. The user
here is very likely to get an initial impression that is
satisfactory.
Do
the relationships between the elements lead you to that goal
(remember your CRAP principles)?
Yes.
First, the most color on the page belongs to the photos that take up
the majority of the page, attracting the user's eye to the desired
content. Next, repetition is used very well, with pictures being
repeated in a pleasing, orderly manner across the page, as well as
the layout of the page being consistent with other Facebook pages.
Alignment is used very well, with the entire page, as well as the
individual photos themselves, being carefully aligned. Finally
position is also used very well, with the photos being positioned
relative to each other in a way that is pleasing to the eye, there is
a symmetry to certain sections of the layout.
What
font families are most prominent on the page? (use the WhatFont
add-on or your browser's developer tools to inspect this).
Helvetica,
helvetica neue, arial, "lucida grande," and sans-serif.
How
do these font families contribute to or take away from the site's
flow?
They
contribute to the site's sense of consistency and order.
How
do the line spacings, sizes and weights contribute to or take away
from the site's flow?
This
is done well. The Photos heading is in a larger font than the
sections within it, and then the heading for the active section is in
a different color (black) than the heading for the non-active
sections, which are blue. In general, the text on this page is given
less importance than the photos, which is good, because that's what a
visitor to this page is primarily interested in.
What
would you improve to achieve a better hierarchy or flow?
I
would have the default sub-heading under the Photos section be
Albums, instead of Photos of You. I think the Albums section is more
organized, it allows the user to filter through photos from a
top-down manner instead of starting the tour of the photos section
with the random photos in the Photos of You section. That said, the
way the section is laid out now works fine, I like this page much
better than the About page.
Facebook
Design Teardown
Profile
Page
Go
to each of the links above and immediately squint your eyes so you
can't really see what they say.
Sketch
on a sheet of paper what the approximate visual hierarchy looks like
-- what areas are denser and what areas are more sparse?
The
profile picture is first in the visual hierarchy. While the cover
photo takes up more physical space than the profile picture, the
profile picture is positioned to so as to appear that it is "on
top" of the cover photo, relegating the cover photo to second
place in the visual hierarchy, followed by the user's latest status
post (if an image is a part of the post, if not, the ads on the right
may outrank the post in the visual hierarchy).
Open
your eyes and ask yourself "who is the most likely user of this
page?"
The
owner of the profile.
What
is that user's critical goal on that page?
To
make a post to their timeline.
Does
the visual hierarchy you sketched lead to that goal?
Somewhat.
The section used to make a post is 3rd-ish on the visual hierarchy,
but at least it does occupy the center of the screen, so that helps.
Do
the relationships between the elements lead you to that goal
(remember your CRAP principles)?
In
reference to color, no, it does not lead to the goal of adding a post
to the timeline. Color is used to emphasize the graphics, which
consist of the profile picture, the cover photo, and the ads, as well
as the dark blue navigation bar, but none of these lead to the goal
of making a post on the user's timeline. The section where the user
makes a post is in white and a very light blue, making that section
almost fade into the background. What does help is that is is
centered on the page.
Repetition
is used well in that the page does have a cohesive look to it, with
elements sharing the same color scheme/designs/fonts, etc., and this
builds trust within the user, which, on a site based on giving away
all of your personal information, is key.
Alignment
is used very well, the page gives off an orderly vibe.
Positioning
is also used well, the elements and their relationship to one another
make sense, they do add up to a cohesive whole, and they don't get in
each other's way.
What
font families are most prominent on the page? (use the WhatFont
add-on or your browser's developer tools to inspect this).
Helvetica,
helvetica neue, arial, "lucida grande," and sans-serif.
How
do these font families contribute to or take away from the site's
flow?
They
contribute to the site's sense of consistency and order.
How
do the line spacings, sizes and weights contribute to or take away
from the site's flow?
Even
though there's a lot of content on the page, because of the line
spacing, it manages to not seem too cluttered. The sizes and weights
of the typographical elements around the page do emphasize their rank
in regards to possible importance to the user, with headings having
larger font sizes, and that's good, as they allow the user to be
aware of his options as far as moving within the page and away from
the page to another section of the site.
What
would you improve to achieve a better hierarchy or flow? Perhaps I
would make the Status, Photo/Video, Life Event section above where
the user enters their new timeline post have a background of dark
blue, like the top of the screen, so as to draw a little more
attention to it.
So now I have to load my local folder into github. This was done by following the instructions on this page:
https://help.github.com/articles/adding-an-existing-project-to-github-using-the-command-line/
At first, because I did create a readme file (the instructions suggested not to do that, to prevent errors), I got an error when trying to do the git push origin master. Then I did a pull request, based a little stack exchange research on how to get past the error, tried to do the git push origin master again, and this time it worked!
Fantastic!
Next, I went over to the relevant repo on github for the Viking Code School:
https://github.com/vikingeducation/prep_design/blob/master/README.md
That's inside the actual readme file in the repo. I entered my name and the link to my work, then clicked on a link and this created a "patch," but not a pull request (I checked my open pull requests and there were none), so then i went back, looked around a while, and finally saw how to create the pull request and did so. I'm still getting the hang of github, but so far so good, the project is complete and the pull request is submitted.
Next, I went through the last three chapters in module 2, chapters 25, 26, and 27, which summarize and wrap up the module.
And that's that, moving on to Module 3!
SUMMARY OF CODING SKILLS
