So, please excuse the mess for the time being and be careful what you do. I may be watching you.

How does one teach someone … to be self taught?

It got me thinking about what it means to be self taught. Everyone learns in different ways. We do apprenticeships, we take courses, and we make mistakes. One of the most valuable things I learned while studying at The School of Visual Arts was self-discipline. I believe that the ability to want to learn or understand something can not be achieved without discipline. Therefore, how does one teach someone… to be self taught? I think the answer is through teaching discipline and instilling good habits.

The reason I find Patricia Phillips’ quote so interesting is because I think this is the exact struggle that creative people go through. Of course, practice is the common answer to getting better at any craft or skill. Discipline plays a big role in practice. What if the quote was changed to the following:

How does someone who wants to be self taught… be self taught?

Now the quote can be looked at from another perspective : A student. Many of the web designers that I admire are self taught. They learned a craft by way of trail and error. This can not be thought of being easy. However, trial and error does not need to always be done alone. Fellow designers should show compassion with each other because we are all on the same journey together.  If had to answer the changed quote it would be that we all learn from each other. Groups learn together and individual intuition grows. To me, being self taught comes from the discipline of listening to others and cultivating your own thoughts to share.

Three things I learned so far:

1. Begin with the Goal in Mind –  Targeting specific devices and screen sizes should be realized early on.

2. Importance of Brand – Identify a strong brand guidline or consistent look and feel that can be carried over to different devices and layouts.

3. Test and Ask others – Test on as many devices as you can. Ask others to test and give feedback.

This quick post will not get too much into the technical stuff about CSS preprocessing. However, it will focus on my personal experience and learning to use it in my workflow. I was inspired to write on this subject after reading this post by Chris Coyier.

For those unfamiliar, CSS preprocessing is basically a method that allows CSS authors to write CSS stylesheets in a new syntax and then compile it into regular CSS. The new syntax allows things like math, variables, mixin’s (similar to functions), nesting code, and a whole bunch of other helpful tools. It is all very powerful once you know how to use it! There are basically two different syntaxes one can use: SASS or SCSS.  The one that I am going to focus on is SCSS because it is most closely related to the CSS syntax. In fact, it is practically identical. So, when you write SCSS the main difference is you are writing your CSS code in a .scss file. By using a processor framework like Compass or similar, the .scss file gets processed into a nice clean .css file.

When used correctly SASS & SCSS can help speed up development and keep css code easy to manage. However, there are certain technical things that a person can caught up on. Below are some things I learned from my experiences so far:

1. Pick one syntax and stick to it – I was very indecisive about which syntax to learn. I started with SASS and then moved to SCSS. My suggestion is to start with SCSS. If you are already comfortable with CSS, SCSS will allow you to get right to all the benefits of CSS preprocessing.
2. Don’t use the terminal – While it can feel cool to use the terminal, if you are not used to using it in your workflow, it can get to be a headache. Since SASS & SCSS uses Ruby to process it’s code into CSS, a framework or processing program is necessary. My suggestion is to go right into using CodeKit which is currently a free GUI application. This will allow you to quickly start with writing SCSS. No installing Ruby, gems, etc…
3. Learn to use it on a real project – this I can not emphasize enough. I came to realize that trying to simply play around with SCSS on a Lorem Ipsum HTML document was not getting me anywhere. I needed to encounter real CSS development problems dealing with layout, type, etc… to really start digging into SCSS. Don’t be afraid to keep the documentation and references on hand while you are working on your project. Using a real project forced me to think about how I can use the new syntax effectively and write better code.

How content ties in with a web designers job

Most web designers are not writers. However, when thinking of content in the context of web design, one can’t help not to think about the hierarchy of information. Markup languages used to create the ground work for a web project rely on semantically correct tags and properly divided blocks of information. Thus, a web designer does not see content the same way that a writer or editor sees it. This is generally where niche web professionals like Content Strategists, Information Architects and SEO’s come in. These skilled professionals are well versed in many areas of the web but focus mostly on content while working with designers and developers. However, what if you are a freelance web designer who maybe works with smaller businesses and clients as a “one point of contact” ?. Maybe you wear all these hats to a certain extent?

In the DVD “Designing with CSS”, Andy Clarke gives a great behind the scene look at how a web designer working one on one with clients can produce content. He starts in a word document and looks at all the content. He then continues to add comments to blocks of content where he identifies each as different html tags. Perhaps attention to SEO and Social Media is also focused on during this time. This process allows for focus to be placed on just the content and solves a lot of problems before it is put into an HTML document and production. Seeing Andy’s process was a huge eye opener.

Recently, Jeffery Zeldman lead a discussion where he explained that “Web Design is Publishing”. Brilliantly stated, it hints to the importance of building content rich site with web standards.

What do you do to produce content? If you are a designer or developer wearing many hats, is there a particular process you go through with your clients?

Please feel free to share your experiences below!

Thanks for reading and keep a look out for a new Trial and Error next week!

Recently, I have been questioning the web design process. Looking back at some of the sites I have completed and experiences along the way – It occurred to me that creating web site design is better thought of in “layers”. By thinking of each layer as it’s own entity but also considering the whole, there is a chance to focus on the “DNA” of a web site. Much like setting the apature on a camera or looking though a magnify glass, things can be closely examined and potentially seen from various perspectives.

In my findings, these are some of the basic layers of web design:

1. Content Layer
2. Branding Layer
3. Design Layer
4. Experience Layer

In a series of upcoming blog posts, I will be writing down some thoughts on each layer. With experiences and references that I hope are useful to you.
Thanks so much for reading!

When I first started making web sites I never felt the need to know how to use a command line or non-GUI application. I saw it as old fashioned and thought that it would not be beneficial for me to take the time to understand it. As someone who comes from a design background, this was probably a rather natural feeling. Why does a web designer need to know computer science stuff ? My reasoning became clear when I realized that it was simply because I wanted to be a better web designer. My feeling being that – the more that you know about the the surrounding disciplines of a particular design practice, the better the design will be. On the same notion, being a web designer that can not only design but carry though on the development makes a more vital web professional.

With that being said, this will be the first in a series of posts containing useful Terminal commands in OSX for web development and sample cases when the Terminal can be useful. This is my first blog post on the subject, so please bear with me.

Basic Terminal

First things first – you need to know where the Terminal application is.
The Terminal application can be found at this directory address:

/Applications/Utilities

Hint: A quick way to open this location: From Finder use the “Go to Folder” short-cut command (command + shift G) and paste in the directory address above.

When the directory is open scroll down and find the Terminal application and open.

Congrats, you have accessed the command center for your computer. Don’t you feel like you are in the Matrix?

You should see an I beam blinking next to a dollar sign ($). This means that the Terminal is ready for you to make a command.

So let’s start doing some basic commands.

Basic Terminal Commands: A simple walk through

Where am I ?

When Terminal first opens, it automatically places you in your User directory. This is the name that you are currently logged in as. In finder this is your Home directory where all your Documents, music, etc. are stored.

For the first command, we are going to list all the files and folders in your Home directory. Simply type in the following:

ls

On the next line you should see a whole list of the folders/files in your Home directory. Pretty quick, right?

I know where I am. Let’s go somewhere else

First, find out where are again:

ls

Next, type in where you would like to go. For this example, we will go to the Desktop:

cd Desktop

Hit enter and it will move you to the Desktop. You can see that you have changed directories by looking at the command line and seeing the current directory before your username.

I want to go back home !

So you want to go back to your Home folder? Simply type in:

cd ~

Bring me back a directory level

You should be back in your Home folder, lets check:

ls

Now, say that you want to go up one directory. This is generally the Users folder when your are in the Home folder. Type the following:

cd ..

Notice the two dots? It is telling Terminal to move up two directory levels. Your current directory(Home) > Users

Let’s make something

First let’s go back to the home directory:

cd ~

Check our location:

ls

Go to the Desktop:

cd Desktop

Now that we are on the Desktop, let’s create a folder:

mkdir Test

You should now see the folder “Test” on your desktop.

Let’s go into the folder we just created:

cd Test

Finally, let’s make a file! We will use the “touch” command

touch index.html

On the desktop, open the test folder and inside you should find your new index.html file.

From this quick walk through, You can already begin to see the advantages of using the Terminal. In a single window we can navigate to your folders and create new projects.

Challenge: Try using the Terminal for one day to navigate though your computer and open files. No using the Finder !

If you get stuck, check out this website that has a great list of commands to keep you going:

An A-Z Index of the Apple OS X command line

Thanks so much for reading and please feel free to write about your experiences in the comments section!

More Trial & Error next week : Early experiences with Ruby and writing on the subject of Version Control.

I learned that what I enjoy about writing is the information seeking. Especially how it forces me to understand something so much that I can explain it comprehensively to someone else. This brings me to my goal for this blog. While it will be a “blog”, it will mostly focus on my learnings of things related to Web Design, Web Development and “other”. Really, the writing is an exercise for me to better understand something of interest and share my findings with others.

Topics that have come to interest recently are:

1. Subversion and Version control
2. Creating a WordPress theme for public release
3. Ruby and Ruby on Rails

In closing this post, I plan to investigate the three topics above in detail in upcoming posts. Providing useful resources, experiences and findings.

Thanks so much for reading and I hope you visit me again soon for my first real blog post!

His argument and article sparked up a lot of thoughts and questions in my own mind. For someone who feels like they have been training their brain to not feel overwhelmed by the internet, a lot of this writing helped me feel at ease. I very rarely sit at my computer and read an entire article on the web. I do subscribe to several RSS feeds and get daily newsletters in my inbox, but I do not read this information the way I read a book. I feel that one of the reason is the platform on which I am reading. For me a book is something that I can relax with on a beach and get lost in the writing. A desktop computer can have these associations with work, multi-tasking, and makes it hard to go “inside” your mind.

So how have designers responded to the issue of digesting content on the web?

IN TABLETS – I immediately thought of the iPad and the recent development of tablets. Aside from Apple making this new piece of technology to give tech geeks a new gadget to play with. The tablet platform is very different from the Desktop computer in that it is allowing a new experience for reading content and media on the internet. The size ( very close to a book), simple interface, and intuitive interface gives many suggestions that this device is perhaps aiming to take the place of a book. If that were not enough, advertisement is showing that it is a device that is something that you should relax with. While I think that it will be hard to take replace the connection and interaction a person has with a book, these tablets seem to be heading in a positive direction for taking in content on the web.

IN WEB DESIGN - Within the past several years we have seen many changes in the way content is designed in a web browser. There have been several advancements and scientific discoveries which have improved the way people interact with computers and web pages. A large part of these advancements and discoveries I think come from the study of a long list of umbrella terms such as Usability, Ergonomics, User Experience, Information Architecture, Graphic Design, HCI and the list continues. Moving forward in the “Digital Age” these practices are constantly looking at ways for humans to have more efficient experiences with technology, “More output then input”. Using traditional Graphic Design theories such as the use of grids, typography and information hierarchy, content for the web is transformed into more digestible and scannable content. This is of course in unison with User Experience, programming, and the underlying idea of creating applications that behave in a way a human can understand. Designers showed much of these things coming together at the advent of Web 2.0 .

The list goes on. For me, it is just a very exciting time for being a creator and designer of internet content. With new technologies such as Google Tv and tablets more people with have a chance to experience this content in new ways. I am really interested to see where it will take us and how we will make it apart of our lives.