Alison Toothman Professor Ballentine English 303: Multimedia

advertisement
1
Alison Toothman
Professor Ballentine
English 303: Multimedia Writing
December 5, 2012
(Revised copy)
CRAP Websites
The Internet hemisphere uses CRAP through different media sites to appeal to the
web users. CRAP (Contrast, Repetition, Alignment, and Proximity) offers a set of
guidelines that helps web makers and people who work with print materials to formulate
a design layout that appeals to whomever will be looking at the material. Websites such
as: National Geographic, CNN, Facebook, Twitter, Advertising sites, and others all use
this set of guidelines. The apple.com website or Mac site, uses CRAP for their web set
up. Some of the design principles we have used in Photoshop during class time are design
principles used for web designs and print media.
First, the “C” in CRAP stands for contrast. The site scribd says, “First basic
principle is contrast. Contrast is the attribute of looking different from something else. If
the point is to look different then it should be really different” (Melindahernandez). When
looking at the Apple site you can see a difference between Apple and Dell by the
interactive aspects. Apple uses their resources to show visitors of the site the skill level
that people have; who work for them. One other computer site example is the Dell
website. They use quality website designs to keep their website up and for it to be
accessible to web users. The contrast with Apple is that the people who design these
website for Apple use several moving photos to feature on their website and they use a
2
3D effect to keep the eyes stimulated. This makes the look of the website noticeably
different from other computer sites. Dell does not use 3D effects as Apple does but Dell
uses descriptive wording to give the audience a more in depth insight into what their
machines have to offer.
The next part of CRAP is, “R” which refers to repetition. On the scribd site it
says, “The second basic principle of design is repetition. Repetition means using the same
element or attribute in more than one place in the design” (Melindahernandez). In the
context of this website they are referring to seeing the repetition on a poster. Repetition
on print media is easier to see than a website because with print media all of it is right in
front of your eyes. You don’t have to flip back and forth through web pages to see where
the repetition is between the web designs that you are looking through. In class, it was
discussed during Photoshop and in the Redish readings that to make things appealing for
the visitor of the website that you need to have consistency throughout the website such
as with: background, title fonts, coloring and spacing through the entire site. Apple does
this in a specific way compared to other websites. They always have their navigation bar
at the top of the screen, which we have been learning to do in Photoshop. Apple has
moving pictures of the latest projects for each specific electronic devises they create in
the center and top part of the website screen. The apple website has repetition of constant
stimulation with their moving pictures on all their new electronic devices on each of their
web pages. Also, they have the contact information; in the right, bottom portion of the
website, which is how students have based their web pages in class.
The third part of CRAP refers to the, “A” which is alignment. According to the
scribd website, “The third basic element of design is alignment. Alignment is the attribute
3
of arranging every element in a design to conform to some kind of horizontal and vertical
visual relationship with other elements in the design” (Melindahernandez). Apple uses a
fair amount of horizontal lines to keep each element on every page at a balanced distance
from each other. So the writings, pictures, and symbols do not get too bunched up, which
also is referring to proximity in the word, CRAP. Apple does not want to cause the
readers to not want to read about the product or not look through the entire page. Apple
uses white space to let the eyes adjust and not be strained while reading the texts. When
the Apple website uses vertical lines it is when they have numerous pictures to add in.
Each page has factors of vertical and horizontal. With our design principles for our own
pages, we have been taught that we can’t pull all of our design tools in different
placements and angles on the pages because that would confuse the readers. The web
design needs to have alignment and not thrown on the page. Apple is straightforward and
they use multiple lines to keep things separate accordingly. Apple keeps everything
organized with lines, which helps with keeping the eyes focused.
The fourth design principle to CRAP is, “P,” this is placement. The scribd website
says, “The fourth design principle of design is proximity. Proximity is the principle that
things must be placed close to the items they belong with” (Melindaherndez). Apple uses
proximity with their photos and text about each electronic item. When building our own
website this portion of CRAP doesn’t affect us as much. Most of the work we are doing
in Dream weaver is where we take links for our html from the web, then copy and paste
them into our html document for web use. We do not need to worry about losing the
codes or writings as we bring codes into Dream weaver because of just copying the codes
over into Dream weaver.
4
Through the CRAP design principles it is clear to see that Apple and Dell uses
these design principles we are learning in class. Apple doesn’t use every element of
CRAP throughout their design methods. However, the web user can see Apple’s specific
placements, alignments, repetitions, and contrasts throughout their web pages. Looking
through the Apple website it shows the students of Multimedia Writing what design
principles we have been using during our own website building. Researching what
websites use and applying it to our own web pages is a useful way to help us grow in our
web building and the technical writing field.
5
Works Cited:
“Create a One-Page Retro Web Design Layout in Photoshop.” Adobe Photoshop
Tutorials from Beginner to Advanced. Psdtuts, Mar.-Apr. 2012. Web. 02 Oct. 2012
Melindahernandez. “Contrasts, Repetition, Alignment, Proximity.” Scribd. N.p., 11 Dec.
2009. Web. 02 Oct. 2012.
“Welcome to the Apple Store.” Official Apple Store. N.p., n.d. Web. 02 Oct. 2012.
6
Alison Toothman
Professor Ballentine
English 303
October 2, 2012
(Original Copy)
CRAP Websites
The use of CRAP within the multifaceted media is quite apparent throughout the
internet hemisphere. CRAP (Contrast, Repetition, Alignment, and Placement) is a good
structure that not only do internet sites use as their set up but also many posters are made
with this idea in mind. There are multiple websites that base their structure on the CRAP
technique, however not all are professional sites. The Apple website or Mac site,
whichever is the most preferred terminology uses CRAP in their set up, plus some of the
design principles we used in our photoshop journey in class.
The first part of CRAP that is used is the, “C” which stands for contrast. The site
scribd says, “First basic principle is contrast. Contrast is the attribute of looking different
from something else. If the point is to look different then it should be really different”
(Melindahernandez). When looking at the Apple site you can really see a difference
between their site and others. Apple uses their resources to show visitors of the site the
skill level that people have; who work for them. One other computer example is the Dell
website. They use high quality website designs to keep their website up and functioning,
however not as well as Apple does. Additionally, the contrast with Apple is that they use
a lot of moving photos to feature on their website and they use a 3D effect to keep the
eyes stimulated. This makes the look very noticeably different from other websites, such
as the example of the Dell website that doesn’t use as much 3D effect as Apple but uses
more descriptive words for their product descriptions.
7
The next part of CRAP is, “R” which refers to Repetition. On the scribd site it
says, “The second basic principle of design is repetition. Repetition means using the same
element or attribute in more than one place in the design” (Melindahernandez). In the
context of this website they are referring to seeing the repetition on a poster. Repetition
on a poster is easier to see than a website because with a poster all of it is right in front of
your eyes. You don’t have to flip back and forth through web pages to see where the
repetition is between everything that you are looking at. In class, it was discussed during
photoshop and in the readings of Redish that to make things more appealing to the visitor
of the website that you need to have consistency throughout the website, meaning that
there should be such things that continuously are shown. Apple does this in a very
specific way compared to other websites. They always have their bar at the top of the
screen, which we have been learning to do in photoshop during class. Furthermore, they
always have moving pictures of the latest projects for each specific electronical device
they create in the center and top part of the website screen. That is the second part of
CRAP. The website shows the repetition of constant stimulation to the viewers on all the
latest electronics on each page. Furthermore, they always have the contact information
based on the right, bottom portion of the website, which is how most of the students
based their web pages in class.
The third part of CRAP refers to the, “A” which means alignment. According to
the scribd website, “The third basic element of design is alignment. Alignment is the
attribute of arranging every element in a design to conform to some kind of horizontal
and vertical visual relationship with other elements in the design” (Melindahernandez).
Apple uses a fair amount of horizontal lines to keep each element on every page at a
8
reasonable distance from each other. So the writings, pictures, and symbols do not get too
bunch up together to cause readers to not want to read about the product or not look
through the entire page. They use a fair amount of white space to let the eyes adjust and
not be strained while reading the texts. When the Apple website uses more vertical lines
and expresses it, that’s when they have numerous pictures to add in as well. Each page
has factors of vertical and horizontal looks to it, but if you want to see it as
straightforward lines it is shown very much so in their main page and store page. With
our design principles for our own pages, we have been taught that we can’t put all of our
stuff at different placements and angles on the pages because that would confuse the
readers. This can go into why Apple is straightforward and they use a lot of lines to keep
things separate accordingly. Apple keeps everything organized with lines, which helps
with keeping the eyes focused correctly.
The fourth design principle to CRAP is, “P” which refers to placement. When
looking at the scribd website it says, “The fourth design principle of design is proximity.
Proximity is the principle that things must be placed close to the items they belong with”
(Melindahernandez). Apple uses this with the photos and text about the item. They don’t
leave much room between the two parts because if they did the readers might get lost in
where specifically things are and what goes with what. When building our own website
this portion of CRAP doesn’t affect us as much. Most of our works are linked on the page
to where we don’t have to worry about our writings being misplaced.
Through all these design principles it is clear to see that even a huge multicorporation uses the CRAP technique with building their website. Apple doesn’t use
exact ones with all of the design methods. However, you can see their specific
9
placements, alignments, repetitions, and contrasts throughout their different pages.
Furthermore, researching the Apple website showed us exactly what design principles we
have been using with our own websites. Seeing what other websites use and applying it
to our own web pages is quite fascinating and helps us in growing our technique as a
technical writer.
10
Work Cited:

"Create a One-Page Retro Web Design Layout in Photoshop." Adobe Photoshop
Tutorials from Beginner to Advanced. Psdtuts, Mar.- Apr. 2012. Web. 02 Oct. 2012.
<http://psd.tutsplus.com/tutorials/interface-tutorials/retro-web-design-layout/>.

Melindahernandez. "Contrast, Repetition, Alignment, Proximity." Scribd. N.p., 11 Dec.
2009. Web. 02 Oct. 2012. <http://www.scribd.com/doc/23940707/ContrastRepetition-Alignment-Proximity>.

"Welcome to the Apple Store." Official Apple Store. N.p., n.d. Web. 02 Oct. 2012.
<http://store.apple.com/us>.
Download