05-8 Homework

Three homework assignments to be finished by week 8.

No additional homework will be given.

previous homework needs to be completed.

Be ready to present your work in class by week 8.

Midterm:

  • Portfolio is to have a minimum of five pages, the landing page, three product pages and a bio page.
  • Navigation does not have to extend beyond five pages but it’s a good idea to plan and develop the entire online portfolio. Having your information architecture and navigation in place saves on revision time.
  • Implement the HTML5 Boilerplate, build the navigation and code the remaining design.
  • Start simple with a responsive wireframe that works on all three types of devices, from phones to large computer screens, before developing the details of your design.
  • Post the wireframe

Build Political Website



  • You are to be inspired by a political cause and built a five page website highlighting some aspect of the political cause if your choice as a practice run to see how quickly you can build a convincing website. Use available content by searching the web. This is only an exercise in building a website, please take pictures and copy from other sources. State your case, back it up with facts and tell the world what it’s about.
  • The New School celebrated its centennial last Semester and I submitted a proposal and got two lectures happening, but that has passed. This semester they have the Climate Emergency Teach-In on March 2, a Monday, from 11:00 to 3:00. I will be there. Attend and do your website on the climate emergency.
  • Create a website highlighting what you learned and build a convincing argument. State your case, back it up with facts and tell the world what you are going to do about it. I do not expect you to write the material yourself. Google the information from whoever shares your options including copy, facts, and pictures.
  • The Website is due in Two Weeks along with the portfolio website. It should be built with the new flex box and css grid and use the new typographic tools we went over in class.
  • Other topics: Climate Change social justice , imperialism, or find your own. Does it have to be political. No, but it better be good.

Typography Poster

  • Typography Exersize: Watch the the Don’t be Afraid video on Web Typography by Jessica Hische and Russ Maschmeyer. It is only 11 minutes long. The first half explains font-family, font-weight, font-size, text-transform, letter-spacing, line-height and text-align. The second half goes through the creation of a menu in 11 steps with a link to the the starting file along with the steps mentioned in the video so you can follow along: step 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 and the final step 11. Take a look at the finished file. You’ll learn a lot and it is what I want your typography to look like, so please take the time to watch the video!
  • Know the rules in design and typography. Know when to break them. Be inspired to push or break the rules for typography in web design. David Carson on the end of print with William S. Burroughs reading from his own texts.

David Carson: The End of PRINT

  

 
  • David Carson speaking about his own work.

    David Carson: Ted Talk

      

    Chose a poem or statement or use the Cummings Poem l(a

    “l(a” is a poem by E. E. Cummings. It is the first poem in his 1958 collection 95 Poems

    “l(a” is arranged vertically in groups of one to five letters.

    l(a
    le
    af
    fa
    ll
    s)
    one
    l
    iness

    When the text is laid out horizontally, it either reads as l(a leaf falls)oneliness —in other words, a leaf fallsinserted between the first two letters of loneliness– or l(a le af fa ll s) one l iness, with a le af fa ll s between a l and one.

  • 05 Demonstration

    In-class Demo for both 9:00 and 12:00 classes. You can download them as well.

    The design of the demo was directed by students, exploring problem solving as we went along.

    Download HTML5 Boilerplate

    You are given a choice, to download the standard HTML5 Boilerplate, which is what we will do in class.

    The other option is to get a custom build template.

    If you decide on customizing it, get the Bootstrap version. Read all about it. Bootstrap has many goodies built in to make your site will look and work professionally.

    For the demo in class, we download the regular HTML5 Boilerplate.

    Adding Google Analytics and SEO

    Follow the instructions in Google Analytics to get a google analytics account number. Place that number in the index.html file.

    Building a standards compliant website with good content is best for search engine optimization. The problem many of you will face is that all your work is composed up of pictures. Search engines prefer words. Make sure that you describe your pictures will in accompanying text or use the alt tag to let the people who use search engines reach your pictures.

    Technical Note

    The HTML5 Boilerplate is shipped with a lot of things to make life better, but one thing trips the school server, and you need to take it out.

    You will not see this file on your computer, but once you have uploaded the files to the school server, you will see a file called “.htaccess.” This file contains the following line that needs to be taken out:

    # ----------------------------------------------------------------------
    # Prevent 404 errors for non-existing redirected folders
    # ----------------------------------------------------------------------
    
    # without -MultiViews, Apache will give a 404 for a rewrite if a folder of the
    # same name does not exist.
    # webmasterworld.com/apache/3808792.htm
    
    Options -MultiViews
    
    

    This trips up the server, and you will see a page for error 500.

    Server error!
    The server encountered an internal error and was unable to complete your request. Either the server is overloaded or there was an error in a CGI script.
    If you think this is a server error, please contact the webmaster.
    Error 500
    a.parsons.edu
    Apache/2.2.3 (CentOS)
    

    05 Information Architecture

    Information architecture for the web is the process for describing and classifying information used to help construct user experience paradigms. Just as a building is constructed by architects and finished by interior designers, so, the construction of a web site requires a taxonomy, that is, the science of classification and organization that makes the information work for the user experience, in addition to the design of the user experience, and the design of what it all looks like.

    Information Architecture — User Experience

    It sounds like they are intimately connected, and they are on the level in which you operate in this class. In the real world, for large sites, these are very separate skills. The Information architect comes to the web site from the side of the information, whereas the user experience designer looks at the information from the user point of view. The designer then cobbles together these two views into a coherent visual design that is marked up and styled using HTML, CSS and Javascript by the front end developer, who works in tandem with the back end developers that create the content management system (CMS), the databases and the server side scripts that make a modern web site work.

    There is overlap between information architect and the user experience designer. Information architecture involves planning the site, what information to include on what pages, how many levels in the hierarchy of pages, navigational menu design, what labels to use to name pages, sub-sections and headings, how information should be laid out on a page to make it easiest to find and understand. Much of this is often represented by a taxonomy that in the end results in a hierarchical site map.

    Taxonomies

    Taxonomy is the branch of science concerned with classification. I know what you are thinking. My portfolio site will only have a dozen pages. Isn’t thinking about a taxonomy overkill? Yes it is, but that does not preclude you from preparing yourself for more complicated projects.

    A web site, particularly when implemented on a content management system, where pages can be added with ease, can suffer because of a lack of information architectural planning. Other sites that would benefit from a carefully developed taxonomy are intranets, corporate web sites, e-commerce sites and the sites or large institutions like the New School web site.

    A few words on taxonomy. A taxonomy is usually thought of as the tree-type of hierarchy that classifies topics like the biological tree of life, for example, but it can also be an imposed order by type, like the Dewey Decimal System in use by libraries, which has a unique ontological classification that drills down to each particular manuscript in library science.

    The taxonomy terms are arranged so that more specific terms fall under more general categories. For your web site, for example, a specific print falls under the category prints, which falls under the category of illustration, which falls under the category of work.

    In more complicated sites, there are relationships types that may not be hierarchical, and can be based on location, products, services, membership, utilization or ownership and other relations that you probably have not yet thought about. In these cases, it’s important to clearly define the terms of the taxonomy that relates the types, for that will make for a more consistent user experience.

    Information Architecture

    In print, the information architecture is mostly linear, with a table of content and an index to provide access to the discrete parts, or in a newspaper, where articles start on the front page and continue on other pages.

    The hyperlinks on the web make for a much more hierarchical relationship, where the user can jump anywhere in the inverted tree-like hierarchies that make up most navigational systems. This makes overlapping taxonomies possible, as there can be a number of ways to approach the same information.

    The point to take away from this is that being clear about the taxonomy will help users find the information they are seeking.

    Whereas taxonomies focus on classifying the information beforehand, there is another movement that feels information should be classified by the people using it, called folksonomy

    The Information Architecture Process

    Information architecture works out the relation between the content and the navigation. It corresponds directly with the goal of the site, the objectives, the content and the needs of the user. The information architecture can be strictly hierarchical, more organic, or both, but the process starts by writing down and organizing the site objectives.

    The information architect lists the content requirements and determines the appropriate page hierarchy for the site, be it top down or bottoms up, and design the navigation to access this hierarchy. Note that the navigation does not need to mirror the hierarchy, and can take the form of a matrix, be organic, or even linear. A complete diagram of the information architecture is created by standardizing the navigation architecture with the organization of the content.

    Designing for the User’s Interaction

    The information architecture addresses all of the potential users whose interaction with the information is what the site is about. Knowing the target audience and what they need and are interested in can be made into scenarios that map out these ideal user interactions, through process flow charts, site-maps and wireframes can be constructed from that analysis that most represent the site’s objectives and strategy.

    You were required to develop a number of personas, and in the second assignment, to organize the website with a number of such personas in mind. Figuring out who the users are and addressing them is a common starting point when developing a website.

    Over a dozen distinctly targeted users with very different interests for a medical website has to be considered for which I did a user experience analyses. How to build an interface that meets the expectations of all of the users. The site objectives had to be applied to the different needs and interests of the multiple targeted users.

    To communicate this back to the client, a schematic for each user was created and superimposed to get a sense of how to best approach the information architecture. To accommodate everyone, a number of different strategies were implemented using both primary and secondary navigation.

    Process flow-charts not only allowed modeling an ideal user’s interaction to better comprehend their interests and needs, but combining all of the users allowed for a high-level overview of the web site’s requirements. This high-level approach, built up from the individual user assessments, is called the architectural approach, because it enables one to develop a comprehensive user interface for the system.

    Once a system architecture is completed, it is possible to establish a site-map from the process flows, and from there, a wireframe that is true to the site’s objectives and strategy.

    With the information architecture in place and user interactions determined, a complete user experience has been determined. That is when the structure of the information architecture, the layout of the information design, the interaction design concepts, and the desired brand identity come together in a responsive visual design.

    Implications

    Will you break out your first assignment into all of these steps? I would be surprised if you did, but they will be assumed nonetheless, so try to be as clear as possible in each of these activities, and write them down, insofar as you develop them behind the scenes, in your worksheet.

    05 404 Page

    404 Page

    The 404 or Not Found error message is a HTTP standard response code indicating that the browser was able to communicate with the server, but the server could not find what was requested.

    The web site hosting server will typically generate a “404 Not Found” web page when a user attempts to follow a broken or dead link; hence the 404 error is one of the most recognizable errors users can find on the web.

    Customize the 404 page, or file not found error message, so it is not generic, but reflects the identity of the website.

    Not found 🙁

    Sorry, but the page you were trying to view does not exist.

    It looks like this was the result of either:

    • a mistyped address
    • an out-of-date link



    <!doctype html>
    <title>Page Not Found</title>
    <style>
      body { text-align: center;}
      h1 { font-size: 50px; text-align: center }
      span[frown] { transform: rotate(90deg); display:inline-block; color: #bbb; }
      body { font: 20px Constantia, "Hoefler Text",  "Adobe Caslon Pro", Baskerville, Georgia, Times, serif; color: #999; text-shadow: 2px 2px 2px rgba(200, 200, 200, 0.5); }
      ::-moz-selection{ background:#FF5E99; color:#fff; }
      ::selection { background:#FF5E99; color:#fff; } 
      article {display:block; text-align: left; width: 500px; margin: 0 auto; }
      
      a { color: rgb(36, 109, 56); text-decoration:none; }
      a:hover { color: rgb(96, 73, 141) ; text-shadow: 2px 2px 2px rgba(36, 109, 56, 0.5); }
    </style>
    
    <article>
       <h1>Not found <span frown>:(</span></h1>
       <div>
           <p>Sorry, but the page you were trying to view does not exist.</p>
           <p>It looks like this was the result of either:</p>
           <ul>
               <li>a mistyped address</li>
               <li>an out-of-date link</li>
           </ul>
       </div>
        
        <script>
        var GOOG_FIXURL_LANG = (navigator.language || "").slice(0,2),
            GOOG_FIXURL_SITE = location.host;
        </script>
        <script src="http://linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js"></script>
    </article>
    

    01 Visual Literacy

    The web is a design language, and as some of you are not primarily Communication Design students, it becomes clear that there needs to be a reference that covers what Visual Design students take for granted.

    Parsons students can use these links as resources for researching their projects. Visual literacy goes beyond how something looks. It makes communication more effective.

    Visual literacy is used to solve problems in communication. This is a lot like structuring an argument in the academic essay, where reason supplants opinion. Instead of finding causes and reasons why, or a genealogy, bringing visually literate structuring to the communication makes the message more engaging, apparent and clear.

    To that end, I’ve assembled a number of links to help develop visual literacy.

    A Modernist design manual

    Designer Massimo Vignelli’s life’s work through his design philosophy with a wealth of examples in The Vignelli Canon. He distributed it free on his website for everyone to become better visually educated. That site no longer exists, so I put the book on my server. You can purchase it. The Vignelli Canon represents the status quo that David Carson opposed that we will cover in Week 6)

    Design Inspiration

    Use the following resources to explore your site design. Be inspired — copy, borrow, steal — but make sure that whatever you take, you make your own. The top priority is to effectively communicate the content.

    1. Design Inspiration
    2. Inspirational Sites
    3. Design History
    4. The Story of Art
    5. Rijks Studio
    6. Visual Literacy
    7. Adobe Behance

    Design Sandbox

    Canva is an online graphic design platform that lets nondesigners put together and play with designs till something clicks. You can use it instead of photoshop to prototype your design. Download it as a PDF and open it in Illustrator, and all of the elements are editable.

    1. Canva

    Web Design Sandbox

    Invision is a web and mobile device application design platform that allows you to create and user test your designs before you commit to them with code.

    1. InVision

    Typography

    Typography remains elusive for many, so I gleaned useful definitions, descriptions and links to explain the basics.

    1. typographic resource
    2. Fonts in Use

    Books on Design and code

    1. Casey Reas, Chandler McWilliams, and LUST, Form+Code in Design, Art, and Architecture

    2. Kimberly Elam, Geometry of Design
    3. Armin Hofmann, Graphic Design Manual
    4. Robert Bringhurst, The Elements of Typographic Style
    5. Frank Chimero, The Shape of Design
    6. Leah Buley, The User Experience Team of One
    7. Compiled by Laurel Schwulst, Very Interactive Library
    8. Paul Ford, What is Code?
    9. Emil Ruder, Typographie