Exercise 2

Slack Workspace Microsite

For this project you will be designing and branding our class, CSS Design. A logo (and workspace icon) will be requried, along with color scheme, typography and any other items to make our class stand out. Treat this as you would treat branding a company. You will also be required to translate your color scheme into a sidebar theme for Slack. A microsite will also be required to be designed and built. Content for the site can be found in Slack Exercise 2 channel.

Sidebar Theme
You can find more details on Slack sidebar themes here https://get.slack.help/hc/en-us/articles/205166337-Customize-your-Slack-theme. The ideal way to display the 8 hex codes is in an input field so that a user could just click and copy, rather than highlight then copy.

Workspace Icon
Your workspace icon dimensions is 300px square.

Notes from Slack:
Your workspace icon is a way for you to visually identify the Valencia Graphic Design - CSS Design workspace. It is used in the desktop and mobile apps. It’s most helpful when you’re on multiple Slack workspaces. Some tips on choosing a good icon:

Research & Planning

  • Inspiration
  • Wireframes
  • Site Map

  • Comprehensive Designs

    You do not need to turn in comps for this project. Once these initial steps have been completed, you are ready to mock up your site design. You may use Photoshop (or your design program of choice) to create your comprehensive designs. Your designs comps should closely resemble your plans for your final functional design. It should be work you'd be proud to show a client. You may design your comps for a monitor that is up to 1024px wide. However, when designing your comps, this time you MUST increase your canvas size to 1200px x 1000px so we can visualize your intentions for the background of the web page AND so we can see how you intent to use additional content. In other words, we DON'T just want to see a paragraph on each page. Be sure to keep in mind the top fold of your page. You must ftp your design comps by the project design comp due date. Keep in mind the following web design factors when designing your project:

    Technical Requirements

    You must demonstrate your proficiency with XHTML & CSS during this project. Keep in mind the following guidelines prior to uploading your projects:

    Design (50 pts)    

    Workspace Icon
    Color scheme
    Style & Use of imagery/graphics
    Top fold / Hero section
    Content Organization
    Target audience
    Concept - the "idea" behind your design.

    File Organization & Proper naming conventions (10 pts)    
    File organization (separate directories for assets, images, css, fonts) & File Optimization      
    Technical Considerations (50 pts)    

    Use of @font-face
    Functional links
    CSS navigation
    Form formatting
    Links to pictures (all pictures appear - no ? marks)
    Proper use of HTML/CSS syntax
    Proper use of CSS Positioning
    CSS formatting. Name all CSS rules.
    Page titles
    Alt tags applied to all images
    Validate your entire web site

    Presentation (10 pts)    

    FTP site (Do NOT FTP source files (photoshop, illustrator, flash)
    Comps should be removed
    Presented project in a professional manner
    Effectively communicated concepts
    Participated in class critique & assessment of projects

    Total: (120 pts)