Week 4

6 Comments

Adobe Kuler

Session 1: This week we will begin our discussions about the World Project. I will also be assigning the Markup Exercise and demonstrating the start of the build process for the World Project template.

World Project Milestone #1
Due: Week 4, Session 2 (before class starts)
1. Be prepare to discuss your layout and design concept
2. Prepare a minimum of three sketches to illustrate your ideas
3. Prepare a color scheme using kuler.adobe.com

Relevant Resources:
CSS Reset
CSS Normalize

Commodore 64 Image from Wikipedia

Session 2: Today we will continue demos regarding the World Project. Be prepared to demonstrate the points listed last session for the milestone. This milestone is required for the approval of your design concept. Also, we will discuss the requirements for the Markup exercise.

Relevant Resources:
Viewport Sized Typography
Can I use Viewport Units (vw, vh, vmin, vmax)?
Using vw and vh Measurements In Modern Site Design

Technical Exercise 2: Markup
Due: Session 2, Week 5 (4 points)

Description:
Build a single page that profiles the first computer or gaming console you remember using. If you cannot remember the exact model choose from something around the same time period. Browse VintageComputing.com, Wikipedia, or other sites to collect the content and resources for the page. You must cite the resources that you use in the page as links. Your layout must include page-jumps for navigating to specific content areas. It must also include a header, header images, content images, an aside, and a footer. Focus on the markup. Styling will be added later during the styling exercise.

Requirements:
1. Create a profiling the first computer or gaming console you remember using
2. Use available web resources to find the content for the page
3. Cite each image and source that you use inline, in the footer, or the aside
4. Use page jumps to navigate to content areas within the page
5. Break up the page into a header, main content, aside, and footer
6. Add the files and folders to your environment and upload to student webspace
7. Test the it loads correctly from your project portal by session 2 of week 5

Points Breakdown:
2 points will be awarded for organizing the content for the page
2 points will be awarded for properly coding the markup in html5 format

6 thoughts on “Week 4”

  4. An important aspect to any website is color, it helps bring it alive. When choosing a color there is always a few questions that will pop up. What scheme should I have? Are my colors web safe? And lastly what is that pesky Hex code again? Well fear no more because the link below can answer all of your questions. Color schemer Online is a quick fast and easy to use program where you can select your color and get the hex code in a matter of seconds. Another great feature is you can download that program for offline use and in the downloaded version it also includes a color wheel to help make themes.
    http://www.colorschemer.com/online.html

    This web page is a quick and easy way to remember how to make different colored fonts and typefaces it has it all laid out in a nice and easy to read format.
    http://www.w3schools.com/tags/tag_font.asp

    Lastly for a new project that we will be starting. This website is exactly what the URL says it is. It is a video game console library. This website literally has it all when it comes to consoles. With an easy to navigate layout all you have to do is select the decade and you will see a list of the entire gaming console that came out in that decade.
    http://www.videogameconsolelibrary.com/

  5. I thought that this site could be helpful on our Technical Exercise 2. This website gives history, models, games, specs, and more about almost every gaming system since the 1970’s.

    http://www.videogameconsolelibrary.com/pg70-2600.htm#page=reviews

    This is a great source if one wants to use Photoshop to create a website layout. It is filled with tutorials that show how to create different designs. Also is great for consuming a plethora of ideas on designing websites.

    http://www.vandelaydesign.com/website-layout-photoshop-tutorials/

    This link is just an informative page on effective use of typography for the Web. Along with links and ideas to use fonts, spacing, and colors within text for specific intent.

    http://designmodo.com/web-typography/

  6. This first link is a collection of tools for picking color schemes for any design project. There are 28 listed here so there are plenty of choices! My personal favorite has been COLOURlovers (number 12 on the list) because you can create your own palette or look through a whole directory of other user-created palettes.

    http://www.creativebloq.com/colour/tools-colour-schemes-12121430

    Since web design is a competitive field, it’s smart to stay on top of the trends and utilizing them in your own way. This next link is an article from the Huffington Post about some web design layout trends becoming popular in 2015.

    http://www.huffingtonpost.com/larry-alton/7-web-design-trends-youll_b_6933974.html

    Finally, the last link is an online tool for wireframing. It can come in handy for projects such as designing a furniture layout for a room, but I thought it might be useful in designing preliminary wireframes for website layouts.

    http://gridpapr.com/

Comments are closed.