Objectives

Working with a client is designed to have you create three to five pages either from scratch or as a revision of existing materials. This task will lead you to:

  • interact with another person and ask pertinent questions
  • ask for or look for appropriate materials to support the clients’ need: graphics, etc.
  • learn how to and practice quoting and/or sourcing materials
  • practice creating a new directory and uploading your work into that directory
    • and then sharing a working link to the web page you want your client to review
    • as well as creating navigation between the three-five pages that works and is consistent on every page
  • this task is a project which encompasses many of the skills you’ve been learning
  • the materials you make for your client should be able to be part of your portfolio unless you specifically agree with said client to not share what you’ve done outside of this course
Reading, Watching, Testing
  • Read up on materials you need to know based off of the conversations you are having with your client or the project you have set for yourself.
  • You should be spending 9-12 hours per week on this course.
  • Install or activate one or both of the web developer tools from the objectives. Test either or both out.
    • Watch Load Times — Underlying Code 00:01:45 movie
    • Learn about Chrome Developer Tools: Load Times, HTML, CSS, etcetera.

Minimalist web design: When less is more https://www.webdesignerdepot.com/2009/12/minimalist-web-design-when-less-is-more/

%

How far are we through the course?

%

310/500 points possible

You should be at the point where you can understand the benefits of good layout. It is time to put some of what you learned to use. Let’s make web pages that we can be proud to show off! Our focus this week is working with a client,  or your capstone project, and becoming more skilled at developing your own layout.

Week 10: Capstone I, Wireframes & More!

OVERVIEW

  • You MUST be working with your client and in contact with your professor about what you are doing. If you are doing Track B (versus A) your instructor needs to know the type of site you are building.
  • No late work is accepted unless you received permission via email to turn it in late.
  • What’s a wireframe diagram?
    • Becoming a sleuth part two: Chrome developer tools installed with the Chrome browser.

LECTURE

Using Wireframes

In order to draft a website one of the first best choices is to grab a sheet of paper and drawn what you’re thinking. Recommended reading:  https://www.orbitmedia.com/blog/7-reasons-to-wireframe.  See  several free wireframe tools  collected in a post by Slodive. Or visit Smashing Magazine for 30+ tools! http://www.smashingmagazine.com/2009/09/01/35-excellent-wireframing-resources/

a wireframe image of a company with two column layout

“The wireframe tools help us to show how the page layout or arrangement of the website’s content will look like before actually designing it, including interface elements and navigational systems, and how they work together.

It may not depicts the typographic style, color, or graphics, since the main focus lies in functionality, behavior, and priority of content. Aside from websites, wireframes are utilized for the prototyping of mobile sites, computer applications, or other screen-based products that involve human-computer interaction”  Slodive website

Why wireframe? It’s a QUICK way to save you A LOT OF TIME later. Just doodle. Let your brain click away; draw out a few things. Where should your navigation go? What pages will make up your site?

Track A: Working with a client

group work symbolService learning is a great way to create a product that will truly add to your portfolio.  Working with a client is an experience requiring students to focus on  layout, navigation, content, purpose, grouping materials, and communication.

Working with a client while taking a course is considered service or experiential learning. You may work  with one other student and a client on a total of three to five pages.  Share the following information  with your client; he or she may be a non-profit, a friend or colleague who has a business website or wants one, or your employer. He or she cannot be you.

i. Meet with client
ii. Determine scope
iii. Gather materials
iv. Begin draft
v. Write and collect content
vi. Prep graphics/check sources
vii. Upload to CITS server and review with client
viii. Revamp materials/layout
ix. Perform final edits and deliver materials electronically to client
x. Upload to CITS server for instructor grade/review

 

Bonus materials
Becoming a sleuth (part two)

Both Chrome Developer Tools and Firefox Firebug have multiple options — for example in Chrome Developer, the “Network” tab shows the load times and file sizes of html and image files and Firefox’s Firebug “Net” tab also shows load times but allows you to choose all items or a subset. There is so much you can DIG UP about a site with these types of tools. IF YOU ARE A SELF-STARTER/LEARNER, these will really come in handy!

Chrome Web Developer Tools

In week six you should have tried out Firebug. Here we have another recommended developer tool. Check your underlying code.. or check out someone else’s! In order to learn HTML and CSS, it is best to read your text, read materials at w3schools.com (and use the try it yourself elements they provide) AND look at sample code!

If you already use Chrome try out the following:

  • View the source
  • Turn on Developer tools (Go to View Menu choose Developer ==> Developer Tools)
  • Look at the Elements and Network Tabs (lower left)
    1. In the Elements tab you can see the underlying HTML and CSS
    2. In the Network tab you need to reload to see load times and all the parts that are brought in to make the page appear inside the browser

UsingGoogleChromeDeveloperTool-SeeCSSInline

Learn more:  How to use Chrome Developer Tools
Please follow the link above to learn about these tools.

The Chrome Developer Tools (DevTools for short), are a set of web authoring and debugging tools built into Google Chrome. The DevTools provide web developers deep access into the internals of the browser and their web application. Use the DevTools to efficiently track down layout issues, set JavaScript breakpoints, and get insights for code optimization.

Client: Submit Form A

Please  fill out this form  (link in case embed below does not show) at your first meeting when you agree to the scope of the project that you and the students determine.

 

 

 

Preparing to build a site

Have you been practicing what you are reading? Great! You are now ready to begin on a full fledged site!

  • Why are you making this site?
  • What do you hope to accomplish?
  • What is the purpose of the website?
  • Who is the customer?
  • How do they get there?
    • shopping (forms)
    • searching (interface with search from your blog)
    • education (reading)
    • interaction (forms, feedback)
    • what experience do you want them to have while they are on your site?

Okay, that may seem like a bit much, but you are much better prepared than you were during modules one and two. Get ready to use all that you know.

Questions to ask yourself

Spend one to two hours this week looking around  A List Apart  & Smashing Magazine. Do so with pen and paper in your hands while you also think about your final project. Keep a journal; leave several blank pages in between design ideas-you will go back and fill them up. If paper is not your thing, keep an electronic journal to contain all your materials. Inside this journal you will mark down information which is valuable for that particular site:

  • What fonts are you using?
  • What sizes?
  • What colors? (I recommend you put down the RGB values.)
ASSIGNMENT DETAILS

TRACK A: Client #01 — Draft Layout
15 points
Wait?! How can I do a draft layout for my client when I only just met with them? Exchange an email or two and do a layout prior to meeting with them. Send them screenshots of what you think you can improve or do, based  upon  what their needs are. Often, customers need to see what you’re talking about even before they can give you a clear idea of what they want. This type of rapid prototyping or rapid redevelopment is fairly common. Also, by looking around the client’s existing site with Firebug or Chrome Web Developer tools in order to get some content for your layout, you WILL have a better understanding of what they do or don’t have available to provide you even before you get started with them.

Please note: your client may have a website already or NOT.    IF    they do not, you would not be redesigning, you’d be drafting.

TRACK A: CLIENT #02 – SCOPE
Write-up of meeting to determine scope. You need to take good notes when you meet with your client. What does he or she want? What do they have to get you  started.
25 points

Include your three-five paragraph write-up of your experience inside of the Blackboard Discussion Board for this purpose. Your write up must include information on i. your meeting with the client and ii. what the scope of the project is.  INCLUDE a  link to one page you have  made that is both accessible  and the images are  sized/saved appropriately.

Scope: what does it look like? What do they have? Is it a portfolio? information piece? does it include forms? surveys? graphics? a shopping cart?

TRACK B: #01 – Draft Layout
15 points
Let’s see a wireframe  of one of your proposed pages. On either your wireframe  or your HTML page explain (three to five paragraphs) what your 3-5 page site will be.  a draft layout,  wireframe  and write up of what your project will encompass. Include a link to one page you have made that is accessible with properly sized images. Be sure to upload all your images and test your work.

TRACK B: #02 –  Compare WIX and Squarespace online website resources.
25 points

Write up a 300-500 word post  (this post is inside of Blackboard’s Discussion board)  comparing these two products. Quote and cite your sources. DO NOT spend money on either of these items. You should be able to evaluate them from videos posted online, help resources, free trials.