Type for the Web

While I’ve been in school I’ve come to realize that there are many different types of designers. Some love illustration. Some love to make logos.

I love type.

I know all about how to use type for print, what typefaces I prefer, techniques to make good font pairings. But I don’t know much about web safe fonts. Because of this, I was grateful to learn about type for the web in this past Web Design Basics class. Luckily, the gist of what I learned was that I’m doing web design at a much more fun time, because now it is much easier to use any font you want on the web! Hooray for beautiful type design, whether in print or digital.

A pattern a day

Right now there isn’t a lot of consistency in my life. I’m in school where my schedule changes drastically every 10 weeks, and honestly every single day my schedule could look different. I don’t have a job (needs to change soon, but thats another story), and really there is nothing I can say that I do every single day consistently.

I’ve decided this needs to change to give me something routine in my life, and also to force me back into a regular work ethic about something. Anything. And so, I’m going to draw a pattern every single day. This may not seem that noteworthy, because really, it’s not. A pattern can be anything where there are elements that repeat, so this is not rocket science. Most of these will likely be drawn in between class notes or brainstorming sessions. And I’ve decided that is ok. I’m just going to do it every day, in some capacity, to keep myself creating. And hopefully some of them might even be kind of cool. I will post them here in pretty raw form most likely, though maybe I will clean some up if I feel like it. Guess only time will tell!


This week in Web Design Basics we talked about User Experience and User Interface design. I took a UX class my 2nd quarter at the Circus so hypothetically, this should all be review for me. But, as with most learning, I discovered a lot of things I hadn’t known before, or at least heard them broken down in a new way.

I think the biggest breakthrough for me in this class was really understanding the difference between UX and UI. At first glance they kind of seem like the same thing, but actually they are different. UI (user interface) is all about asking how to make something easier to use. There are all sorts of elements/principles that can lead to good UI, but the end goal is always the same. Make it easy. Eliminate steps. Clarify.

On the other hand, UX (user experience) is, not surprisingly, all about the EXPERIENCE of the user. How does it make you feel? What is the message? Does the user experience line up with the concept?

Ultimately, to design a successful website/app, you need a marriage of both elements. People need to have whatever kind of experience is most appropriate for the product/company/demographic, EASILY. This requires great user interface design.

Hopefully going forward I will remember to put these things in the front of my mind when designing for the digital realm.

Style Tiles

This past week we had our midterm in Web Design Basics. After answering some test questions to make sure we actually listened in class, we basically had to design our own website quickly while in class. First, we had to design a style tile for our “site”. Hypothetically, this should have been majorly helpful in the later designing of our website. We had to design buttons, drop downs, navigation and hover states etc, so then we could later drop and drag them onto our website. However, I realized in my own work method that I tend to change my mind a lot. I don’t really know what I’m going to want and what is going to look right until I’m actually laying it out within the website itself. So in this instance, I spent a lot of time designing all my stylized elements, but then when I actually went to put them on my website I found myself wanting them to change. Because of this, it sort of took twice the time.

As far as this goes, I’m hoping that knowledge is power. Because I am now aware that I work this way, I’m hoping I can try to build a style tile as I go in designing the website, so I only end up doing it once? Things to think about, since I definitely need to keep working on speeding up my website design process.

Responding adapting flowing gelling.

This past week’s Web Design Basics class was by far the most complicated yet. Talking about adaptive and responsive design. I was surprised (although I shouldn’t have been) to discover how many different aspects there were to these types of design. I hear people say “look at this great website and the responsive design!” as they make the browser window bigger and smaller, waiting for my amazement. And I am impressed. But I didn’t realize there are many little differentiations to these sites that make them categorized as something different.

A website that has helped me to see this more this week is awwwards.com. It is a website used to award great web designers/developers for their work, but also acts as a great resource of good web design out there. Even more helpful, at least in relation to responsive/adaptive/fluid/static/etc/etc/etc design, is their “Structures Filter.” Amongst the many options, there is a “liquid layouts” filter and a “responsive design” filter. So helpful when trying to learn the differences between fluid and gel design. You can pick one or the other and see examples of great design using that “structure.” Pretty cool stuff.


Color lover.

color-emotion-guideThis week in Web Design Basics we talked a lot about the psychology of color and how it can impact our web designs. Now, I have taken a Color Theory class with Sylvia last quarter, however, it seemed as though we always had too many things to go over so our color lectures were sometimes a little too fast to remember. Because of this, I was more than happy to have a refresher.

Since my artistic background is in fine art and more specifically in painting, color is something near and dear to my heart. I understand how to create colors through actually mixing pigments together. But I don’t always remember some of the more subtle psychology behind them; colors have so much power!

For example, did you know that too much yellow can actually cause anxiety? That is why you would never see the inside of a hospital painted yellow, but rather more frequently in calming blues and greys.

I’m definitely going to pay much closer attention to the colors I choose in my work going forward, as they can add so much to your message without anyone even knowing it!

Knowledge is power.

Faster is better

This week in Web Design Basics we learned a lot of tricks of the trade to making the wireframing (and designing) process faster and easier. Many of these were mainly Photoshop tools we can use to cut out repetitive motions (hello….ACTIONS) or getting into best practices like creating style tiles for design elements/colors etc that we may need over and over again. Hugely valuable to learn! Still going to have to work on being in the habit of actually using these tools on the day to day, but I’m hopeful this will make designing websites/apps etc a much less tedious task so that I can focus on the actual design rather than on repetitive motions.

Fingers crossed this makes designing a website by Tuesday more doable…only time will tell!