Serendipitous & Sweet

heart cookies
I made a trip to IKEA on a quest to organize my closet and discovered these magical heart cookies. Serendipity at its finest.

Learn HTML & CSS with Firebug

Firebug has been an invaluable resource to me as a web designer & developer. It makes troubleshooting issues easier and it has also served as an invaluable learning tool. The best thing about Firebug is that it can not only be used as a diagnostic tool, but as a learning tool. In the past, I would learn how a website was built by clicking view source. Now, all you have to do is install the Firebug plugin, right click and object on a website and select “Inspect Element with Firebug”.

In this example, We’ll explore how we can use Firebug to learn how Frank Chimero’s Alantis World Fair page was built. With Firebug we can explore HTML structure, CSS values, fonts and hex color codes.

HTML Structure and CSS Values

The main feature of Alantis World Fair is the capsule that moves throughout the layers of the sea. But how do they do that? If you inspect the capsule using Firebug, you’ll see the HTML on the left and the corresponding CSS on the right.

CSS properties in Firebug

After right clicking and inspecting the capsule, you’ll see it is a div container named “tube_dude”. How does it seem to travel through the page? On the right you’ll see a CSS value named “position:fixed;”. This tells “Tube_dude” to always stay in the same position of the page while you scroll through the page. Try disabling “position:fixed;” in Firebug and see what happens.

Fonts

Have you ever seen a font being used on a website and wondered what it was? If the type is a webfont, you can easily check by inspecting it!

firebug

In this example we can see they’re using Hellenic Wide. Try changing the size of the font or change the font to something like “Arial”.

Hex Color Codes

Firebug is also an easy way to find out what color is being used on a site. In this example, they’ve set all of the type as #FFFFFF on the body tag. Try changing it on a set of type by double clicking a CSS value on the right and adding “color: #ff0000”.

firebug

 

This is just a small fraction of the things you can do with a plugin like Firebug. I use Firebug because I’m used to its functionality but there are tons of other ways you can inspect and play with the elements on a page. Many browsers come with their own “Inspect” tools which makes it even easier to right click and learn how a site was built.

Crafty Art with a Message

Hyperbolic Crochet Coral Reef Hyperbolic Crochet Coral Reef

Hyperbolic Crochet Coral Reef was an exhibit I visited at the National Museum of Natural History in Washington, D.C. The D.C. exhibition has ended but versions of it continue to be showcased in museums around the world. The Hyperbolic Crochet Coral Reef exhibitions call attention to the disappearing coral reef and how pollution and plastic waste have harmed our oceans. This particular coral reef exhibition was created by 800 innovative crafters who incorporated everything from yarn, sporks & plastic bags into their crochet work.

Recently, I have been scouring the web for unique art like this to share on Pinterest. I’m curating Alt Summit’s Artful Art board. Feel free to follow it or any of my other boards on Pinterest.

Rethinking Brainstorming

If you’re on a creative team, chances are you’re used to brainstorming ideas for new projects. But the process can end up feeling broken and not as thought out as it should be. This leaves creative teams with ideas that are not as revolutionary as they could be. I began thinking of better ways to cultivate ideas and initiate brainstorms after I read Quiet by Susan Cain.
Cain also wrote a great piece in the New York Times titled The Rise of the New Groupthink. She points out that throughout history we have seen amazing ideas created by research and creative problem solving from individuals rather than group brainstorms. In order to prevent brainstorms from becoming vaults for groupthink and mediocre ideas, I feel like brainstorms should be treated as positive sharing sessions where each team member can contribute and build on ideas that each member has thought of.

Here are some tips to think about while organizing a brainstorm for a project:

Explain the Project in Advance

This is the most important step. Either explain the project or send out a project brief at least a day before the brainstorm meeting. This gives everyone a chance to think it over and research any ideas they may have about the project before the actually meeting.

Know Your Team

Assemble a diverse team to be a part of the brainstorm. Pay more attention to each individual’s interests rather than their title or position in the company. Most importantly, get to know your team. This is important because when a project comes up that aligns with a team member’s interest, they can provide a wealth of knowledge and insight on that subject.

Give the Team Time to Research & Think

Team members should be encouraged to research and think about ideas before the brainstorm. Encourage everyone to bring any printouts, sketches, sites or anything that inspires thought. Some people think of ideas better spontaneously, so written out ideas or elaborate sketches shouldn’t be mandatory.

Haters to the Left

There is a huge difference between providing thoughtful consideration to an idea and completely bashing it. If someone on the team has been drinking a little too much hatorade they may need to step out. Discussion should be encouraged but bashing ideas because of meaningless assumptions only discourages others from sharing their ideas.

Asterisk Ideas that Need More Research

Write down all ideas. If an idea may not be possible based on technical considerations, place an asterisk next to it and ask a developer to research it further. Also place an asterisk next to any idea that may insult the intelligence of the audience or attack a demographic group. This happens more often than it should (just take a look at some of the Super Bowl ads). If an idea is based on negative stereotypes it either needs to be scrapped or approached in a more open minded way. Write down these ideas, but make note that they need to be researched and thought out more before presenting a final idea list.