Skip to content

Latest commit

 

History

History
 
 

class-08

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
Eye-120.png
Eye-120.png
 
 
Eye-180.png
Eye-180.png
 
 
Eye-60.png
Eye-60.png
 
 
README.md
README.md
 
 
eyecon.svg
eyecon.svg
 
 
icons-scale.html
icons-scale.html
 
 

README.md

Front-end-Web-Class-8

Objectives

  • Analyze work of peers
  • Apply feedback to your work
  • Sketch intro

Schedule

Time Activity Description
1 5 min 5 TT Intro to review
2 40 min 45 Work Review the work of your peers
3 10 min 50 Break Take a break
4 5 min 55 TT Sketch Drawing tools
5 20 min 75 Work Make an Icon
6 5 min 80 TT Export from Sketch
7 10 min 90 Work Export your icons
8 5 min 95 TT SVG Images
9 10 min 105 Work Export your icon as SVG
10 5 min 110 Wrap up Challenges and projects

1 - Post your work for review

Reviewing work is a great way for you to develop your own work. Reviewing other projects you can develop an insight into your own work. Collaboration and clear communication are qualities that employers look for. These are not natural innate qualities these are qualities that must be practiced and devlopped. Use this exercise to develop these skills.

Communication is also a skill that needs to be devloped. Use this exercise to practice communication. When writing a description of your project be clear, and make no assumptions. When providing feedback be very clear what your comments apply to, describe what you see as good bad or other, and provide any improvements or ideas suggestions.

Your web site should be hosted on the web, with the source code in a repository on Github. The read me for this repository should contain a link to your work on the web, a short description of what the project is, and a list of things you are interested in getting feedback on.

It's important to be very clear what the work and what feedback you are seeking and what others should look at.

Post a link to your project on Github as an issue here:

https://github.com/soggybag/Front-end-Web-Class-8/issues

2 - Review work

When all of the work is posted find your name on the list and provide feedback for the 4 projects that appear below your name. If your name appears at the bottom wrap around and get your remaining reviews from the top of the list.
Completion Incomplete Missing some info Very complete
Design Looks rough Looks good Looks profesional
Technical Not functional Mostly works Works flawlessly
U/X User experience is confusing The user experience is good but there are may be some confusion Great user experience

3 - Break

...

4 - Sketch Intro

Sketch is a vector drawing tool. Vectors describe shapes as points in space connected by straight or curved lines. Lines can be have a stroke, and closed shapes can have a fill.

!important: Vector drawings can be scaled to any size without loss of resolution.

This is in constrast to bit map images which are a collection of pixels. For computers pixel data is easy to draw less processor intensive. Vector drawings on the other hand are more processor intensive. Pixels data take up more memory and storage. While vectors are usually much smaller.

Sketch Drawing tools

Insert > Shape

  • Line
  • Rectangle
  • Oval
  • Star
  • Polygon
  • Triangle
  • Text

Use the keyboard short cuts.

Set the stroke and fill.

Size, Scale, and Rotate.

Align objects with the align options.

Group shapes.

--Bool Operations__

Make complex shapes with

  • Union
  • Subtract
  • Intersection
  • Difference

5 - Work

Use the drawing tools to create an icon. Use simple graphic shapes to create an icon. This can be an icon for an app you have created or an icon that can be used for your web site, or try and recreate an existing icon here are a few you can try:

Here are a few tips:

  • Stick with a single color
  • Use simple shapes
  • Text should be large and legible

6 - Export from Sketch

Export PNG for icons for your apps.

Group shapes together before exporting, or use a Slice to define the area to export.

Set the size of the image to export.

7 - Export your icons as SVG

...

8 - SVG

SVG = Scalable Vector Graphics.

You can use these in your HTML.

9 - Export your SVG

Export your SVG and open it in your text editor.

You can copy and paste this into an HTML file.

You can link to SVG files using the img tag.

Challenges projects

Review the feed back your recieved on your project. Keep an open mind. Think about reviews as comming from potential customers. In this light you should see the this feedback as essential to making a product that is as successful as it can be.

  • Apply the Feedback you received to your work
    • Reply to issues/comments to clarify if needed
  • Review more projects.
    • Challenge yourself to provide feedback to more work
    • Improve your code skills by cloning a project making changes and posting a pull request.
      • This is a great wya to develop your skills:
        • Improve your HTML/CSS/JavaScript skills by working on someone else project
        • Improve your Github skills by making pull requests
        • Improve your collaboration skills

Resources

SVG Resources

Simple easy to follow basic concepts