Mr. March Mistler Art + Design
  • Blog
  • Web Design
  • Dig Pub
  • Fashion
  • Photo
  • Graphic Design
  • Fashion 2
  • Student Gallery
  • About

Web Design

Web Design is a full year class open to all students. Students learn about the fundamentals of web design coding and layout while researching and applying the usability principles.
Course Expectations

Wireframes & Sitemaps

10/19/2015

1 Comment

 
Picture
A WIREFRAME is an outline of a website. It is the first step of the creation of a site. Good web designers start out with a wireframe sketch in order to visualize their ideas on paper. 

Tips for drawing wireframes:
  • If you are drawing it out, use a ruler and graph paper.
  • Some common elements of a site include: header, content, and a footer.
  • Decide how many columns the site has.
  • Use boxes and lines to separate content.
  • To illustrate an image, you may use an X. 
  • To illustrate a video, draw a rectangle and place a "play" button inside of it.
  • To illustrate a slideshow, draw a rectangle with an x, and put arrows on either side. 
  • Align the elements of the site.
  • ​Alignment!!!

Wireframe Slideshow


A SITEMAP is a visual map of the navigation of a website. The more pages your site has, the more complicated your site map will be. A sitemap for Apple will be GIANT, but a sitemap for my site will be rather small. Most large sites have the sitemap accessible as a page so that users don't have to navigate throughout a large site. 
  • A sketch of a sitemap is different from a sitemap on an actual site.

Visit the Apple sitemap page for an example. 

Sitemap Slideshow

Picture
Download Adobe Mockup to create your wireframes/sitemaps
Picture
This image shows how a user's eye moves throughout a website. Notice how it moves in an F pattern
1 Comment
web designers vs web developers link
1/15/2019 11:29:57 pm

Intriguing post. I Have Been pondering about this issue, so a debt of gratitude is in order for posting. Entirely cool post.It 's extremely exceptionally decent and Useful post.Thanks.

Reply



Leave a Reply.

    DAILY AGENDA

    Google Classroom

    How do I print?!

    Links:

    Weebly


    DaFont

    Lost Type

    Free Images

    Unsplash.com


    74 Free Stock Sites from Canva

Powered by Create your own unique website with customizable templates.
  • Blog
  • Web Design
  • Dig Pub
  • Fashion
  • Photo
  • Graphic Design
  • Fashion 2
  • Student Gallery
  • About