Sean Meehan's Design Blog

When I started out designing super ugly websites for fun, I didn't have much guidance, and so it took me a while to find grid systems at all. My designs had a sort of grid, but they took extra long because I wasn't working off of a grid system. Obviously, discovering grid systems on which to build mockups was a big help to me, but as I began to look more, I found that it doesn't stop there. The coolest grid systems I've found are on ProfoundGrid which has all kinds of different grids, from basic fixed-widths ones to some really complex fluid layouts that include multiple grid widths. The most interesting one to me, though, is the fluid-responsive grid, which I tried to blog about previously but was thwarted by an ill-timed computer crash. Here's how it works: most of the time, the layout is fluid, meaning that it adjusts as you change the width of your window. However, at specific points, it reformats so that all of your content doesn't end up getting squished. This system is super cool for building sites that will work on computers, tablets, and smartphones without having to make drastic design changes. The Profound grid fluid-responsive grid adapts at two different places, so it has 3 layouts (perfect for desktop, tablet, and smartphone) but in theory, you can build a grid that will adjust at whatever widths you specify. Below are 3 screen shots of the 3 different width adjustments on the Profound Grid, and above is a link to their website where you can check out this and their other neat grids. 

One of the coolest new things with CSS3 is the ability to do animations, which, in the context of css, are defined as transitions from one (or more) style properties to another. This W3schools page gives a pretty good explanation about how to incorporate some basic css animation into your designs. There are a few essentials for CSS3 animation:

1) Whatever you are animating needs to have a "animation" element. So if you're trying to animate a div, you need to put animation: ___ under that div in the CSS. The values are typically the name of the specific animation (I'll explain next), and the duration of the animation.

It took my mom approximately 12 years of repeated instruction before I even started to grasp the idea of matching clothes. I still get nervous about clashing colors, which is why most of my pants are black or gray... it's hard to go wrong. Unfortunately, with web design, it's pretty easy to go wrong with just black and gray. I don't know if having an eye for complimentary colors and color schemes is instinctual or if you just have to work at it until you get it. I do know that I don't have it. My first few Style Tiles looked like garrish Mardi Gras floats the colors were clashing so much. So it was by complete dumb luck that I stumbled upon Dribble a site where digital and print designers can post what they're working on. It's a lot of fun to just browse around in, but the feature I found the coolest was the search by color feature. Here's how it went: 

I started with this picture of my author's book cover. It has this nice red/orange color, which happens to be hex code #df4f23. I like the color, but I'd been having trouble matching it. I vaguely felt like it would look nice with a teal, a pink, and/or a green, but every time I tried to find the right color, it ended up looking garrish.

So, I searched the hex code on Dribble. Dribble lets you specify the color variance, so that colors that are similar but not identical to the one I searched will show up as well. It also lets you specify color minimum, which is the minimum amount of the project/picture that has to be in the specified color. Here's what I found: 

This first one, from user Carlijn Evanboer, stood out to me because the off-white colors contrast really well against the red/orange whereas plain white looks kind of jarring. As you can see, Dribble gives me the color palette on the right, so I can find those off-whites and incorporate them into my design.

This is another understated one. Normally I would be too afraid to use colors so close to each other, but this design from user Jensen Warner really highlights the elegant possibilities with similar colors. I don't know if I'll be using this exact shade in my design, but it is a lesson I'll take with me as I move on.

At last, the teal of my dreams, which I could not find on my own on Photoshop, comes to me from user Rory Harms, who also includes a beautiful yellow. This palette ended up being the most helpful to me as I worked on my author site. 

Hi, I'm Sean Meehan. I'm currently a junior at American University and this blog is a place where I will post cool web design-related things I find and eventually, things I make. Before that, though, here's a little more information about who I am:

My favorite things, in no particular order are family, cookies, coffee, Cher, Lou Reed, and the internet. I also like skateboarding, minimalist art, stream-of-consciousness novels, free jazz, punk rock, southern hip-hop, absurdist plays, and imagist poetry. On campus, I'm involved in the student radio station WVAU and the student newspaper The Eagle. When I'm not at work, class, or one of those organizations, I like to go hiking, visit art galleries, read, and/or listen to music. Aside from food and rent, I spend most of my money at thrift stores, used book stores, and record stores. 

Feel free to contact me or just creep on me via Facebook or Twitter. As this is a design blog, I anticipate that I will be sharing many pictures, and though this isn't graphic design related, this collection of pictures highlights a person who inspires me in all aspects of life: FloJo.