How to Design a Website Using Style Tiles: Web Assignment

One of the challenges teaching Web Design is finding the balance between teaching HTML/CSS/JS and teaching students how to approach visual design and layout for web design.

One resource I’ve found helpful is using Samantha Warren’s Style Tiles. (Show her some love by following her here! @samanthatoy Thanks Samantha!)

Style Tiles work for me. Designers all have different challenges. I am sharing my process to contribute back a solution to a problem that I have encountered. Samantha Warren

WHEN TO USE STYLE TILES

Style Tiles are for when a moodboard is too vague and a comp is too literal.

Beginning designers are challenged by the “empty page.” How do you start to design?

I’ve found Style Tiles allow design students to break the design process into steps. I encourage students to approach the Style Tile in the order below. (Only if it’s helpful — they can follow any order or process of their own!)

You may want to suggest the following order to your students:

Adjectives

Start with the descriptive adjectives. Start creating Style Tiles after the student has completed research and a competitive analysis for the project. The student should have some idea for basic adjectives to describe the business. I’ve found it helpful to look at several websites and discuss possible adjectives to describe the brand or website so students get a feel for what descriptive adjectives are.

Style Tile Example

Fonts

What fonts represent the general tone of the site? Again, beginner web designers may not know how to choose a typeface. Consider assigning a reading about this. I’ve provided resources in this download for you.

Download Style Tiles – Web Design Assignment for Beginning to Intermediate students. Click below for instant access to this assignment!

Web Assignment- Style Tiles download

Color

For many design students, choosing color is very difficult. Ask students to step beyond white, black and red (the most common “fallback” color palette) to working with color in an interesting way. Adobe Color CC (formerly Adobe Kuler) is very helpful for this and can help students select a color palette. Or, you can have the student draw inspiration for a color palette from another website using Stylify Me.

Tip: Encouraging students to recreate or draw inspiration from another designer’s work is not a bad idea. In fact, recreating someone else’s work is good practice: they’ll learn a lot about what makes for “good design” by trying to recreate a design. It’s nearly impossible to copy someone’s work exactly. Think of how other beginners “copy” the style of an artist or director in order to find their own style and voice.

Textures

I like to change this section to “imagery” and ask students to find examples of the style of images they may want to incorporate into the site. Please feel free to share the free image resources located in the download.

Logo

The logo section is the most difficult because logo and branding for the site is an entire project or class on its own! I encourage students to create the logo (for now) as a wordmark and use type only. Some design students may feel more comfortable with branding and may want to spend more time designing or redesigning a logo. Don’t let students get distracted by this! Giving the logo the constraint (wordmark only!) will keep students focused on what’s most important for this assignment.

Design a website using Style Tiles

Design a website using style tiles. Free download!
Web Design Assignment - Style Tiles

STYLE TILES PRESENTATION AND CRITIQUE

Require the students to present their Style Tiles in class. The students should be required to talk about the visual direction of the work and justify their design decisions – all great practice! This will also give the students an opportunity to iterate based on the feedback from you and fellow classmates.

Why is this assignment beneficial to you and your web design students?

  • Breaks the visual design into smaller pieces so students can experiment and play around with design before committing to it. I suggest assigning the creation of two different Style Tiles. Style Tiles are much easier to work with and quicker than doing two different versions of design comps.
  • You may be able to intervene earlier in the design process and help students who are struggling with this assignment. If they have trouble with the Style Tiles, they will most likely be at a loss when it comes to creating a design comp.
  • Keep students focused on the bigger picture and give students an opportunity to receive feedback and iterate before moving towards a final design.

STYLE TILES: WHAT COULD GO WRONG?

Here’s what to keep your eye on:

  • Some students won’t spend enough time and thought on this step because they want to jump into the final design. Encourage students to complete a Style Tile and iterate before starting final design.
  • Students may not know how to “translate” their research and what they know about the client and target audience to a visual style. How does a specific font or a color palette communicate a style, such as “formal, established, professional,” etc.?
  • I recommend spending some time looking at websites together in class and breaking the visual design into these components. Look at multiple websites and discuss the following questions:
  • What does the color palette for this site communicate about the brand or business? Show resources that help designers pick color palettes.
  • In what ways does the logo represent this brand? Style, color, tone?
  • Why did the designer(s) choose those particular fonts for the site?
  • How are the other elements, images, buttons, graphics consistent with the other design elements of the site?

Download Style Tiles – Web Design Assignment for Beginning to Intermediate students. Click below for instant access to this assignment!

Web Assignment- Style Tiles download

That’s it for now!

I hope you find this beginner to intermediate web design assignment helpful.

Let me know how it goes!

Leave a comment — let’s chat!


UX/IXD CAREER RESOURCES NEWSLETTER
Sign up to receive our newsletter of career resources for UX/IxD designers!

Leave a Comment

Your email address will not be published. Required fields are marked *