Practice—Web Design

Blog 7—Chapter 7

Summary & Response

Chapter Seven of Graphic Design School: The Principles and Practice of Graphic Design, by David Dabner, Sandra Stewart, Abbie Vickress, is apart of Part 2, the Practice portion of the text, titled “Tools and Technologies.” Chapter Seven is titled “Web Design,” and is an introduction to website design and development, a large field made up of a wide variety of projects and processes to tackle the specificities of each. This chapter includes sections discussing: project development process overview, project structures, web tools, initial consultations, information architecture, flowcharts and wireframes, common elements of a web layout, designing for the web, mobile application design, working with content management systems, banner ad designs, search engine optimization, and online portfolios.

I learned that the most crucial part of a website development project is the planning, as it serves to define the process for the entire rest of the project. This Planning Process includes: reviewing the client’s goals/target audience/desired functionality; gathering all content for the site; creating a flowchart to define the navigational structure; identify the programming format, including software, technology, and resources; potential training requirements for the client to maintain their own website; make a successful contract; design 2–4 varied layouts; wireframing; define the dimensions of the site; design mock-ups; final compositional layouts; and documentation of the specifications of the project.

The second phase is the Development Phase which consists primarily of the programming work and includes: image preparations; coding (often HTML and CSS); further programming allowing for additional functionality; integration of content; and testing and verification.

The third phase is the Launch Phase, the purpose being to prepare the site for public viewing, including: uploading to the client’s web server; buying domain names; adjusting the code; and usability testing.

The fourth phase is the Post-Launch Phase, the final step in which the designer provides a hand-off to the client, a closing of the contract and meeting all last-minute obligations. This phase includes: packaging source files, documentation and training for the client to be able to maintain the site, and a satisfaction check a few weeks after the launch.

Further Research

For my further research, I looked into portfolio websites that are fresh, modern, and pushing the boundaries of the current norm.

The first site I explored is Nikhil Nair, whose portfolio really caught my eye right from the get-go. This is the opening page, big text with moving animated squiggly lines, that outlines exactly what they are about.

Once you enter the site, it is similar to some other very-Squarespace-portolios I’ve looked through, but I appreciated Nikhil’s use of that foundation to push his design a bit further and have animated GIFs, simple typography with tons of white space, and no color palette other than the designs. I feel that all of these allow for Nikhil’s work to shine at the center of attention, for the type to be read and received easily, and for viewers to get a strong sense of Nikhil’s abilities and aesthetic from the site itself, in addition to the work on view.

The second portfolio site I perused is Marija Erjavec’s.

When you open the page, it is pure white with a hamburger symbol in the top right corner and the words “Marija Erjavec” front and center. But as soon as your curser interacts with the page at all, these rainbow, triangular shapes begin to appear and leave a trail where your cursor has explored. It is a fun surprise and an interactive art project for the viewer!

When you click the hamburger with your curser, a pull-left menu is released, allowing users to view a list of projects and links to an “about” and “contact” page — great simple navigation that is easy to comprehend.

When you click on the “about” page, you are brought to a simple page with simple black and pink type, similar to the drop-left menu. The navigation, interaction and simplicity of this site allows it to work so well.

The third portfolio site I looked through is Greensagers by Tom Green, a black blank slate with white typography and bright work. This is another very-Square-space-esque site, but taken to a little bit higher level with its bright work presented in GIFs and in a great, easy to follow format.

The fourth and final website I explored is my personal favorite, This one is not a portfolio site like the others, but is:

a yearly tradition started by Richard Perez and Eric R. Mortensen. Every December, a group of designers, illustrators, and artists countdown their top ten favorite albums of the year through reimagined cover art, all working within a fixed color system. To view last year’s project, click here.

When you open the site, line-by-line, the text is displayed, a welcoming introduction that explains exactly what the site is about before it opens to the main page.

This is the main page that immediately outlines navigation, a carousel that counts down from 10–1; a hamburger drop down on the top right; and if you click on the 10–16 infinity symbol, an “about” drop-down will appear. When you hover the cursor over the “Ten” image, the image enlarges and there is subtle animation as well as the type “view albums” appears, and invites users to click for more.

Upon clicking the “Ten” image, the image explodes and fills the page:

The cut off image invites us to scroll down to see more, and the blue background subtly changes to green, and then pink, and then changes to other colors as you continue to scroll. This is an awesome way to add variety while keeping the type and organization constistent throughout the page.

The last page I will show in this review is the “Artist” page, a very simple typographic heavy layout that outlines all contributors to the project.

This website is unlike any other I have seen before, but is simultaneously easy to understand with very little learning curve because it follows current basic website format and navigation but pushes it to be more creative and outside the box than most others.

Works Cited

“10x16.” 10x16. N.p., n.d. Web. 19 May 2017.

“The Art of Choosing the Right Paper.” Design & Illustration Envato Tuts+. N.p., n.d. Web. 19 May 2017.

Dabner, David, Sandra Stewart, and Abbie Vickress. Graphic Design School: The Principles and Practice of Graphic Design. Hoboken, NJ: John Wiley, 2017. Print.

Erjavec, Marija. “Visual Designer.” Marija Erjavec. N.p., n.d. Web. 19 May 2017.

“Nikhil N.” Nikhil N. N.p., n.d. Web. 19 May 2017.

“Projects.” GREENSAGERS. N.p., n.d. Web. 19 May 2017.