Part 3: Research

OK. OK. So, it’s not really a “responsive” layout challenge.

It was only a few lines of flex-box property: values for the most part. What we’re REALLY gearing up for is the idea of “Theming.”

Your personal websites are a little too open-ended to really give us enough specifics for “theming.” Now that we all have some code review and comparable code, we can all “theme” them differently. (FUN!)

Key
concept

Theme

Maybe you went to a high school dance once. They probably had a theme. Was it “Starry Night,” “Carnival Celebration,” “The Great Gatsby,” or the classic “Confused Teenagers in a smelly Gym?”

Things get themed with holiday ornaments, the seasons, or historical eras. You’ve likely been to a “theme park.” Here’s the Wikipedia for Theme and more specifically the page for Theme (computing). Our work is about story-telling and that involves words and images and sometimes sound and video. By choosing a ‘theme,’ you can unify the look and feel of your project. It’s really just “making clear decisions” for the most part.

A theme is the set of decisions. To theme something is to actively design or implement those decisions.

In our case, we’re talking about CSS mostly. You can take the same HTML (content/markup) and style it in any way you choose. Many larger web systems are built with “themes” in mind and allow you to further customize the CSS of a premade website.

For this project, we will all take the same base code and dress it up completely differently.

Even a little square can have a theme

Check out these AOL menu item “themes.”

Each one has a different visual style, color scheme, use of typography, and conveys a mood. They prepare you for what to expect when you push them. This isn’t unlike a magazine cover or a book – or poster. Everything has some angle / or – it would still have the angle of no angle. Each button is technically the same. It’s a hyperlink. It’s an HTML element. It’s a rectangle/box – but it can be dressed up differently based on the purpose.

This is just like our “alpha-net” of websites. We use our personal site styles from the style tiles to dress up our portal entry point to start telling the story right away.

Take a look at these

You’ve surely seen this font website by now.

It’s a collection of nice pairs of fonts (headings/body copy) and they are each displayed within their own section’s theme.

This one has some old linen or a painting of some sort as a background.

Go check them all out on the site.

The key idea is that they are the same

The armature (The HTML) (and the base CSS) – are all the same. They just layer on a few more things to make it custom or to give it a theme.

If you do enough front-end stuff, you’ll start to see the patterns quickly.

Quick sketch

Most layouts can be drawn on a napkin at a bar in less than 30 seconds. It’s the details and the way you dress it up that really makes it “look professional.”

BTW here's the actual code for that layout

What do you think about that?

(we think it’s super confusing) (side project?)

Derek ranting about "themes"

Check out The CSS Zen Garden.

And here’s the CodePen in the video – but with the (new as of 2024) :has() selector

Choosing what type of site to emulate

Here’s a way to categorize themes with different levels of specificity:

General Category
- Example: Clothing, Travel, Food, Technology, Education
- Purpose: Broadly defines the area of interest.
Subcategory
- Example: Formal Wear, Resorts, Restaurants, Gadgets, Online Courses
- Purpose: Narrows down the focus within the general category.
Target Audience/Market
- Example: Upscale dresses for conservative middle-aged women, Blue collar family beach vacation, Vegan restaurants for young professionals, High-end smart home devices, Interactive coding courses for beginners
- Purpose: Specifies the intended audience or market segment, adding focus to the project.
Contextual/Stylistic Angle (Optional)
- Example: Sustainable materials, All-inclusive packages, Farm-to-table dining, Minimalist design, Project-based learning
- Purpose: Adds another layer of detail by defining a unique approach, style, or value proposition.

Some examples using that framework

General Category: Clothing
- Subcategory: Casual Wear
- Target Audience: Sustainable casual wear for eco-conscious millennials
- Contextual/Stylistic Angle: Minimalist designs with organic fabrics
General Category: Travel
- Subcategory: Adventure Tourism
- Target Audience: Extreme sports vacations for adrenaline-seeking young adults
- Contextual/Stylistic Angle: Off-the-beaten-path destinations with local guides
General Category: Food
- Subcategory: Fast Casual Dining
- Target Audience: Healthy fast food for busy urban professionals
- Contextual/Stylistic Angle: Farm-to-table ingredients with quick service
General Category: Technology
- Subcategory: Wearable Devices
- Target Audience: Fitness trackers for seniors focused on health monitoring
- Contextual/Stylistic Angle: Easy-to-use interfaces with large displays
General Category: Education
- Subcategory: Online Learning
- Target Audience: Coding bootcamps for career-switching professionals
- Contextual/Stylistic Angle: Project-based learning with real-world scenarios
General Category: Home Goods
- Subcategory: Furniture
- Target Audience: Customizable modular furniture for urban apartments
- Contextual/Stylistic Angle: Space-saving designs with modern aesthetics
General Category: Health & Wellness
- Subcategory: Skincare Products
- Target Audience: Anti-aging skincare for mature women
- Contextual/Stylistic Angle: Natural ingredients with luxurious packaging
General Category: Entertainment
- Subcategory: Streaming Services
- Target Audience: Niche documentaries for history enthusiasts
- Contextual/Stylistic Angle: Curated collections with expert commentary
General Category: Sports & Recreation
- Subcategory: Outdoor Gear
- Target Audience: High-performance camping gear for long-distance hikers
- Contextual/Stylistic Angle: Lightweight and durable with weather-resistant features
General Category: Retail

Subcategory: E-commerce
Target Audience: Ethical fashion marketplace for socially-conscious consumers
Contextual/Stylistic Angle: Fair trade products with transparent supply chains

Today’s goal

Get a sense of how this industry tells its story through a website. There is no copy to write for this final project (use what is provided in the template) – so keep in mind there will be no clues as to what the business site is or who you created it for.

Your font choice will matter very much – as well as any graphics you may create or colors that you utilize, images, etc… as these are the components that we will be using to help with the storytelling.

Consider these visual components as you are researching around and write down what you see in terms of…

What parts of the visual language are working (why?)
What isn’t (why?)
What keywords or phrases keep coming up?
What is hitting you on the head?

Write it all down, as it will be a large part of your case study. Takes lots of screenshots.

This is a new client, and they want to know that you understand their industry and how you reached your conclusions.

Use any tools you have to organize your thoughts and gather as much as you can in the time frame. Maybe 3 sittings of 1 hour each?

Research

Today is about research and writing down your thought process only – (not a day to choose the exact font you are going to pick or to choose colors)

Openly share what kind of client you’re thinking about with the group so that we can help you narrow it down. After researching, did you come away with any surprises?

xoxo

Ivy

You can look at non-digital things too

Today!

We’re doing this for a reason, right? Let’s refocus. This is about stepping up your game, getting things 100% polished, and raising your resolution.

Also:

You don’t need to change any of the text — we should be able to get the tone of these companies with CSS alone

Lesson Intro