01 Homework

Posted on by

Assignment #1: Create a Website Profile

Choose a professional website that represents your aspirations. If you are a photo major, pick a photographer, for example. It should be a website that represents the kind of website you want to build for yourself.

Analyze the website. This analysis will be the starting point for thinking about your own portfolio.

Who is the primary target audience?What is the content strategy? How does the navigation work? The visual design? Answering these kinds of questions will make you aware of all the elements that go into your website.

Elements of a Style Guide.

Check out the example by Kathryn Lawrence.

  • Intent: What is the intent of the website? Use the intent to inform all of the other qualities. This should be a short and concise statement, as in to sell skills.
  • Voice: What is the voice of the website? Is the site’s voice impassioned, assured, energetic, or conversational? Pick a number of descriptive adjectives that capture the experience that whoever had the site built attempted to convey the intent.
  • Tone: Whereas voice is consistent for the site as a whole, tone is a contextual refinement that helps convey the content. An about page may have a different quality about it than the home page or a page in the shopping cart.
  • Brand: How does the website establish its brand? Is it consistent? Is it upscale, casual, youthful, objective?
  • Persona: Think of the many different users this website is addressing. If we were to write down the characteristics of any of these users and the label them, we would create a persona. Personas are composite sketches that reflect real world behaviors, attributes and attitudes of end users.

    You can start with yourself, as you are one of the audience targeted by the website. Take, for example, Naoto Fukasawa‘s website, a Japanese industrial designer. The audience can be personas representing museums, corporate clients, architects that may use his products in their work, end users, students doing assignments for a web basics class, and the list goes on.

  • Create 3 Personas: Personas are composite sketches that reflect real world behaviors, attributes, and attitudes. Create a character sketch for at least three personas.

    Go into the details why they would be attracted to the site, how the site informs them, and what can they do with this information. Would each of these people come back and be a repeat customer? Show how the site addresses these concerns.

    Tell a story, assign each of these personas a name and personal details. By making them real, you can visualize the audience and walk them through the website. Stories activate many areas in the target audience’s brain, facts do not.

    wireframe

  • Wireframe: Draw a wireframe for the main pages.
  • Copy Deck: In developing a website for a client, the content is often done by different people and the designer requires that all the copy for the web site be assembled into a copy deck. Copy the content of the first page, break it down and label it as if it were part of a copydeck. Take a look at the SAMOCA copydeck for guidance.
  • Competition: How does this website stack up against the competition? What does it have that competitor web sites do not, in terms of voice, tone, brand, style, design and so on? Can anything be learned from the competition?

    This exercise is meant to get you inside the development process of building a website — your portfolio!

    You will mark up your answer and create an index.HTML page with links and linked images that you will bring to class next week.

    Posting the Assignment on your Domain

    Ideally, you can post the assignment on the b.parsons.edu server. Some of you may not gain access to this server. In that case you will need to purchase a domain name and server space.

    Turn to the Tools of the Trade article for instructions of how to set up your website.

    Use Fetch to upload your files.

    Put a “parsons” folder inside the public_html folder.

    Fetch acts like a finder window, so when you drag files into the window, they end up on your server. Unlike your finder, you replace the file when the names are the same. This is how you update files with a newer version.

    Within the “parsons” folder, create a folder called “assignment-1”. The title of your web site profile should be “index.html”. It should end up in the “assignment-1” folder.

    Review Writing HTML article to help you create the HTML file. I have an old assignment as a homework sample.

    Watch Video Series Do Not Fear the Internet

    These videos are much more fun and direct than the Lynda.com videos. The Lynda.com videos are more complete.

    Fun introduction to the basics of HTML and CSS.

    1. Don’t Fear the Internet

        

          

    2. Don’t Fear the Browser

        

          

    3. Starting from Scratch: HTML

        

          

    4. Starting from Scratch: CSS

        

          

    5. Don’t Fear Specificity

        

          
    6. A great series of mostly more advanced how to videos can be found at CSS Tricks. Here is one on the very basics.

      The very Basics from CSS Tricks

        

          
        

    Grading Rubric

    I realize that English is not everyone’s first language. It is my second language. I am not going to ask the impossible, and I will take such difficulties into consideration. That said, persuasive content is crucial to a successful website.

    1. At bare minimum, I expect a couple of paragraphs marked up for each part of the assignment, pictures sized correctly and placed on the page using HTML5.
    2. Ideally, I expect the writing to be coherent and informative. This assignment will morph into your midterm portfolio, and I expect you to have some respect for your own work, and show that.
    3. I will be pleasantly surprised if you are able to create a story that is engaging and fun to read, and not just coherent and informative.

    Facts sit. Stories dance. That’s why about and bio pages come to life when they shape facts using the framework of a familiar, cherished story line.  Appealing narratives include:

    • Underdog succeeds.  Since the days of the Bible, we love to root for David against Goliath, the unknown who overtakes from behind, the unglamorous tortoise who beats the boastful hare.
    • Metamorphosis.  A caterpillar turning into a butterfly fascinates us.  Just beware of too many transformations in your story.  The butterfly then turning into a bird and then a monkey becomes bewildering.
    • Discovery.  How did you invent, find or formulate what you’re now known for?
    • Triumph.  A goal reached, obstacles defeated, the quest completed.
    • Righting a wrong.  As long as the injustice remedied was uncontroversial to your audience, this makes a stirring tale.
    • Unexpected joy.  Describe a surprising fun result from one of your efforts.