Make this soup for a web designer and you will have a friend for life!

As a chef turned web designer (I am still a food lover first and foremost – that will never change) I know that the promise of a tasty lunch or dinner can make a day in front of the computer pass much easier.

I wanted to interview a friend and fellow Vancouver blog writer, Malgosia Krol. She has many talents, but for Robot Salmon I wanted to pick her mind about her skills as a Landscape Architect, a photographer, a chef and a blogger for Like Mama Said.

Robot Salmon: What motivates you to blog about food?
Like Mama Said: Cooking is my first love. Amidst all the things I’ve pursued in my life, all the interests I’ve chased down, I have never tired of the kitchen, learning about nutrition and feeding my gluttony for cookbooks. It also satisfies a deep appreciation I have for creativity, sharing and bringing people together, whether in our home or via the blog. I learned all my culinary tricks from my Mom who was very health conscious and had a talent for whipping up an amazing meal out of what looked to be an empty fridge. I liken that a lot too being limited to certain constrains, desires or dislikes of a client who you’re designing for and then just working with it and coming up with something “delicious.”

Robot Salmon: If you were to make lunch for a web designer what would you make?
Like Mama Said: I would definitely go with my Carrot Apple & Celery soup a.k.a “Sunshine Soup.” It’s incredibly refreshing and gives you that zing of energy when you need it most. As we all know, carrots improve the health of our eyes and skin and working long hours in front of the computer can certainly take it’s toll on our sight and naturally, how well we look to others. Celery has properties that soothe our digestive system and apples are a great source of fiber. This soup is also surprisingly satisfying, so it will do the trick if you’re putting in long hours at the office. For dessert (let’s be honest, what’s a meal without it?), I would make Raw Walnut Truffles. There’s no sugar and it’s made with raw cacao powder. It won’t leave you hanging after your blood glucose takes a nosedive, as it would with any other dessert riddled with ingredients that agitate your body and often cannot be digested efficiently, or at all.

Robot Salmon: You just recently launched a new website for your garden design business – was there any special foods that you bribed your web designer with?
Like Mama Said: Definitely! My husband is the graphic designer of my website and my guinea pig for new recipes, so he was on board to be wine and dined in return for his hard work. He’s a big lover of my vegan gluten and sugar-free muffins, his favorite being the “Huggybear Pumpkin Pear Muffins.” It took me a few tries to perfect the texture, but I finally managed to find that certain mix of ingredients for a tender and moist muffin. Sometimes tricky when using alternatives to regular wheat flours.

Robot Salmon: Are there any of your design skills and esthetics that you draw on and carry over when you are creating a new recipe?
Like Mama Said: I’m a very visual person so getting creative with recipes makes me feel like a kid in a candy store. I get so excited and inspired and feel that the possibilities are endless. Presentation is very important to me. Often, without even realizing it, I think I draw from my studies in Landscape Architecture to make it happen, from choosing colour, quality and texture to the pairing of ingredients and the assembly. I never follow a recipe, I think it’s part rebellion and that my creativity just takes over and I have at it in a way that just feels right intuitively and is satisfactory to my senses, which I think designers and creative people definitely rely a lot on naturally.

Robot Salmon: Do you find that your talents as a photographer help with Like Mama Said?
Like Mama Said: Oh yes, that’s a biggie. I’m absolutely ecstatic that I get to use all my creative loves to bring the blog together. It takes me no time to eat what I’ve made, but I think that I enjoy photographing it just as much as I do eating it. The first things I look for when I’m riffling through new cookbooks are images. A cookbook doesn’t come home with me if there’s no eye-candy of the recipe. I picked-up a lot of photography skills from Journalism School, so to get to write about my time in the kitchen and satisfy that too is just the icing on the cake for me. It really comes full circle.

Robot Salmon: Do you use other social media to get the awesome recipes from Like Mama Said out there to more readers (like Digg, Twitter, Stumble upon etc)
Like Mama Said: I use Facebook to get the word out about Like Mama Said and created a group that is available for anyone to join. And of course I
tag the hell out of the new recipes I post so that the blog appears on search engines like Google etc. I’ll definitely expand my horizons to more social networks in the near future, but I’m a little gun-shy to spread myself to thin at the moment and not be able to catch up. It does take maintaining to keep the social momentum going, so I want to make sure I have time for that.

Check out more from Malgosia likemamasaid.wordpress.com

Join the Like Mama Said Facebook Fan page so that you can start cooking for all the web designers in your life!

A Web Designer special recipe from likemamasaid.wordpress.com
Carrot Apple & Celery Soup

Living in Vancouver has its pros and cons, like any city of course (I’m referring to the rain in this case). So when I feel I need a bit of zing added to my gumboot step, I make myself a little bowl of sunshine soup.
3 tblsp. agave
2 tsp.cinnamon
pinch of salt and pepper to taste
juice of 1 lime
2 tblsp. tomato paste
3 celery stalks, 10 medium carrots, both chopped
1 small onion, 1 garlic clove, both chopped
3 apples (2 peeled, cored and chopped & 1 cored, thinly sliced, skin on)

In a large pot cover the chopped carrot, celery, onion and garlic with water and bring to a boil, let simmer for 10 minutes on low heat. In a saucepan, sautee the 2 chopped apples with the agave and tomato paste, add a splash of water, stir and let simmer until the apples are slightly soft. Add this to the pot with the carrot and celery, stir in the cinnamon, lime juice, salt and pepper and transfer to a large mixing bowl for cooling before blending in a blender or food processor. Core and thinly slice the last apple and let the pieces brown in a frying pan with a splash of water on high heat. The pureed soup may be slightly thick, so stir in some water to your liking, garnish with the sliced apples, pepper and a drizzle of limejuice.

Wacom is the main offender in the tablet world, all they do is tablets and tablet accessories. Wacom offers a full range of tablets with a wide range of prices starting with the Bamboo (less than $100 for the base model) series which is for casual use and ending with the monstrous Cintiq 21UX ($2000+ for the top model) which is a full backlit LCD monitor that you can draw directly on to. The Intous 4 series falls right in the middle of Cintiq and Bamboo and for me, it is perfect.

I got my Intous 4 Medium for around $450 CND, and so far I think it was well worth the investment. Before I purchased mine I asked around to see what other tablet users thought about tablet size. I found a wide range of answers, everything from “ get a small one because you have to move your wrist less” to “get the large one because it feels like a real canvas”. I bought the medium one because it was exactly the same size as my 17” Mac Book Pro so the tablet just slides into my laptop case for easy transport. I am stoked on the size of the tablet. I find that I have enough room to not feel cramped while designing and not so much room that my arm tires out from moving around to much.

The Good:

The pen (or stylus) that comes with the Intous 4 is really comfortable to use, and a number of extra tips are included to give the pen multiple different feelings. My favourite tip is the felt tip – makes it feel just like a skinny sharpie! Of course at the professional level of tablets multiple levels of sensitivity are expected this model offers 2048. The multiple levels allow you to pick a brush size say 50px and stroke from soft to firm and have the stroke start at 5px and end at 50px – much the same as stroking a felt pen on a sheet of paper. I’d say for my standards this pen functions as intutively as a real pen right down to if I make a mistake my first reaction is to flip the pen over and start erasing, which is exactly what happens. The pen automatically swaps your tools from pen or pencil tool to the eraser tool. Again the levels of sensitivity work great, except instead of going from skinny to fat, the erasers opacity levels change – press softly and it barely erases press hard and it will erase with a sharp edge.

The mouse is exactly what you’d expect from Wacom. It feels good, and is always reliable. I really enjoy not having to worry about batteries with this mouse – as long as it is on the tablet pad with in the working area, the mouse works.  I often use the mouse more than I use the pen because I feel like I have better control with it.

The OLED screen is amazing. It was one of the reasons I went for the medium over the small size Intous 4. You can program the 8 buttons and 4 scroll wheel functions on the side of the tablet to do almost whatever you want. You have the ability in the settings panel to specify what each button does depending on what program you are using. Based on the program selected the windows on the tablet will display the function, for example I can set the button to be “Command S” for Photoshop and have the OLED screen display “SAVE”. It might not seem like a huge deal at first but you can get pretty creative if you are always making use of different hot keys all the time.

The Bad:

I have to say that over all I have been extremely satisfied with my purchase. However, that being said, there are a few glitchy things that happen from time to time that I feel obligated to mention.

My first complaint is if you close your laptop and open it again the OLED doesn’t come back on. Really its not a huge deal the tablet still works, but you can’t make use of the OLED screen. It only becomes annoying if you have a bunch of different settings for a bunch of programs. Which brings me to my second complaint about the Intous 4.

Remember the OLED screen I was talking about… the one that I paid the extra cash for? Well I have found that it rarely works as advertised. I don’t think it has anything to do with the screen its self, but is more of a software issue with the settings. When the tablet was brand new I spent the better part of a day opening each application I regularly use, identifying all the hot keys and common features I use and then setting up the buttons on the tablet to match. About a week later, for whatever reason, the settings were all deleted. At first I was pretty annoyed, I went through and re-set all my settings and continued to work with the tablet. Again, my setting files were deleted. This time I just went and re-set the hot keys for Photoshop. Next time I used the tablet… Deleted. I am tired of re-setting my settings every time I use the tablet. Those 8 keys are supposed to improve my workflow not cause me to waste what I am sure must be 8 hours at this point setting up the dang tablet. I am confident that this issue I am having is not a user error, but if anyone has advice for this I’d love to hear it.

The Verdict:

Over all this tablet for me is totally worth it. Despite having a few issues, this tablet improves my work flow (granted not as much as it could) and it allows me the use of a pen which for certain applications can not be beat. I would feel comfortable recommending it to anyone who is serious about design, at $450 CND it’s really probably overkill for casual users.

If you like the sounds of using a fancy tablet but lack the skills to necessitate a tablet, get the skills in the
Interactive Design program @ Capilano University in North Vancouver

A web designers favorite tool: free usability testing software

Usabilla is a usability design application that us web design students up here at Capilano University often use in the early stages of development. You can use the software for free, or you can pay which will unlock some extra features.

Usabilla allows you to sign up for an account and then take up to 5 screen shots for one free usability test. You upload the screen shots, and then specify the questions you want to ask your user group. There are standard usability questions provided or you have the option to create custom questions. Once you have created your test,  you simply send it off to a maximum of 25 users (free account), and wait for the feed back.

Usabilla offers clearly outlined usability test results

As the users complete the usability test the results filter back to you in real time. As a web design student and a usability enthusiast I must admit that for me, this was the most exciting part of the process.

I am currently working on an unofficial Craigslist redesign. I was interested to see how the users would answer my questions, and if my original assumptions were correct. The information I got back was extremely valuable because I was able to get direct feedback from 14 people within 1 day of posting the test. Under normal circumstances that would have cost me 14 conversations and a ton of time in carrying out each survey individually.

The results of the test show hotspot areas where the users clicked – highest amount of clicks are indicated in red and the lowest are blue. This gives you a direct idea of what the users found important or unimportant on the webpage. In the context of this craigslist re-deign it allowed me to see which items should receive more attention and which items should be completely removed from the main page.

Highlighted hotspots help web designers understand their users flow around the page

This software is simple and easy to use. I found it to be the perfect solution to my minor usability re-design questions. I recommend you give it a try the next time you are interested in testing some designs before coding, or before conducting a full re-design on an existing site… the results may surprise you!

Check out http://www.usabilla.com for more information. Don’t forget to check out the INTE Labs website http://www.capilanou.ca/programs/interactive-design.html for more information on Vancouver’s best Interactive Design program at Capilano University in North Vancouver.

One of the websites I follow on a daily basis is called Design Milk

Design Milk is an online magazine focused on modern design.  They cover it all on this site.  Architecture, technology, furniture, Interior design and even fashion.  Their perspective on design is wonderfully fresh, and their taste is impeccable. I like to be surprised, and every time I look at Design Milk I see something that blows my mind.

Here are some examples of modern design that they showcase on their website:

Mehrzeller, the Multicellular caravan.  The tent trailer just got WAY cooler in my book.

Hallstand by Oliver Tilbury

A coat rack/hat stand, umbrella holder and bench in one. I also love the combination of the woodsy, natural coatrack, and the geometric, and sharp bench.

I Make My Case a really fun interactive site that allows you to customize your own designs while using base designs from Artists.

I choose to believe that Scabetti made this absolutely stunning glass shoal in honor of Robot Salmon

While this isn’t your typical web designers(i.e. Smashing Magazine or A List Apart) place for inspiration, I love how tt takes my mind out of the flat screen mode and into the three dimensional world.

The next website that comes to mind is Tutorial9

The name says a lot, this website focuses a lot on Photoshop tutorials, web/browser tutorials and Photography tutorials. They are also a great resource for freebies and such! I think that a huge part of being inspired is feeling capable.  So, thats why I included a tutorial website.  Maybe you won’t use that crazy cartoon bunny that they taught you to make in your next website, but it allows you to hone your graphical skills and therefore inspires you to try new and different things!

Here are a few examples of featured content/resources on Tutorial9:

Resources!

Photoshop Tutorials!

Web Tutorials!

My final choice for inspiration is CSSloaf!

CSSloaf displays beautiful websites every day.  It is special because it draws content from 35 other websites that show beautiful websites, and mashes it all in to one site. brilliance. I love website sandwiches. You can view the entire list of websites in the sidebar on their homepage.

Sometimes, I just want to curb my design hunger with a MASSIVE amount of websites. I don’t want to search for them, I want them to come to me.. and CSSloaf does that.

Here are a few examples of the websites they’ve posted:

ecoki

dave brookes

MyBrandHQ

There you have it.  These are just a few of the places that I draw my inspiration from.  There is SO much on the web, and it can be easy to get overwhelmed by all of it. A good way to keep from being overloaded is to use an RSS reader to keep track of the sites that you’ve looked at.

The tool that I use and has been essential for me in keeping track of all of these great sites is Google Reader.  I used to try and memorize all of my favorite sites, and every day I’d go out look at each of them.  This became tiring as the number of sites that I visited grew.  sooooo much to remember!  Then I discovered Google Reader a couple of years ago, and I was blown away.  Google Reader keeps track of all of your favorite sites. All you need to do is go to the website and subscribe to their RSS feed. It will then give you the option to use Google Reader and away you go!!

Here is my Google Reader page.

If you are interested, feel free to follow me on Google Reader.  I have ALL of my favorite websites on there.

Also, if you have a favorite website that inspires you, I’d love you to post the URL in the comments section below. Have a great day!

<3

We want our designs to be current and on track with the rest of the design industry trends. Of course we also have to consider future trends, web design is poised to start making a big impact as companies and businesses shift their presence and their marketing online.

The thinking part: using our brains!

The initial phase of a web design project focuses in on varying design research methods. Our number one priority is to make sure that we are following a user centered design process. We want to get to know your clients, the end users of your new website, your target market if you will. We want to get inside their heads and figure out what will speak to your users, and then we will design to support that message.

Branding Strategy: building an identity

Another important product that results from the research and design methods that we follow is determining your brand or your identity. If you or your company does not have a strongly defined brand, or an identity that is currently represented by your graphics and logos, as web designers we can create one for you. A successful website should help you launch your online presence in general. Having a clear branding strategy is one of the keys to success.

The fun stuff: color palettes & mood boards

Okay, at this point in the design process your web designers have used their brains, they understand the design research, they know who you or your company are speaking to and what your users will respond to. It is time to do the next phase of research and determine how best to graphically speak to your audience.

We create mood boards, visual collages from all the information that has been gathered. We put together color palettes that we think your audience and users will respond to.

In the Interactive Design program at Capilano University we use several awesome resources online when brainstorming for color palettes.

Check out Adobe’s site Kuler

Another great spot to satisfy your inner art nerd is this color palette generator at DeGraeve

Online color palette generator: design geek heaven

Here in Vancouver the 2010 Olympics are a part of everything these days, so I have to mention some interesting affects that I think the games are having on our local Vancouver design industry. As I was surfing the net the other day looking for color palette resources I found this inspiring online forum encouraging designers to interact and upload to a collection of color palettes inspired by the 2010 Winter Olympics Colour Lovers, Olympic love

2010 Vancouver Winter Olympics inspire designers all over

Another window into the design process is this video.

It walks you through the design process behind creating the 2010 Winter Olympics graphics and brand. Everything that I have laid out in this post happened on that project, and I have to say that I think they did a fantastic job.

The graphics keep up with many of the design trends that we are seeing online so far in 2010. A blend of organic images, hand drawn illustrations and retro graphics. They speak to the Canadian audience, balancing our love of nature and our outdoor lifestyle with our beautiful cities. The graphics stand out on all of the websites, the print materials the buildings and the flags, the athletes outfits even.

It seems as though the design process was thorough, the design research methods were successful, and the chosen color palette suits Vancouver perfectly.

D.O.G. decided to sit down and spend some quality time with his amazing sister and see if  she had any words of wisdom to share with The readers of Robot Salmon.

D.O.G : Can you briefly describe your work and what you do?

Jessica Stockholder: I explore the relationship between picture making and three dimensional material. Towards this end I explore the phenomenal experience of color next to its evocative potential. In relation to the materials I use I am interested in the myriad of ways they can be understood – in the gap between the words we hang on them and how they fill up space. I create sites for me and my audience’s to reify internal experience.

D.O.G : The one thing all creatives have in common is that in order to become successful you have to become an expert at self marketing. Do you have any tips for getting yourself out there and seen?

Jessica Stockholder: Know what you care about and take advantage of opportunity. Be aware that in some cases you have the power to alter situations to suit you – to let the world know what you have to offer.

D.O.G : Unlike many contemporary artists,  you seem less interested in creating an elaborate story with your work. Designers are also always trying to achieve visual coolness over whatever conceptual problem the are charged with solving. Can you shed some light on your process? Where do you start? How do decide when you are finished? What is the goal of your art?

Jessica Stockholder: I am not interested in story telling in my work – though I do love stories! I’m more interested in how form is meaningful in relationship to how and why we live than I am in coolness. Though on those rare occasions that I manage to be cool it’s not so bad!

My process – I start with ideas and things lying around the studio, or spaces I’ve been offered to work in. I try to have some bit of fantasy idea I have laced together with things in the world. I’m finished when the work oscillates between stasis and motion – in terms of the eye and the brain.

The goal is to make sense of life.

If you have read my previous post and express the above sentiment, you are in the right place. If you were looking for fish taco recipes please go here: FISH TACOS.

So now that you are sure that you want to be a web ninja you need to learn the structure of the web itself.

*Disclaimer*: This will be very basic and targeted at those who know nothing

The Internet is not literally a series of tubes that connect people the way that some *cough “politicians” have portrayed it. It is in fact a butt load of computers storing information and sharing that information through a network of connections.

The entire Internet has roughly the same amount connections as synapses and connections in the human brain. To learn more about the connections between the Internet and the human brain check out this TED video: 5000 Days of the Internet with Kevin Kelly

If you can wrap your head around that concept you can start to understand how complex the Internet system truly is.

Luckily for you the basic structural language of the Internet is rather simple. A 12 year old with no life, an unhealthy attraction to Japanese cartoons and little regard for personal hygiene can master it very quickly. (I know this because I was that boy… no seriously I had an undercut like this dude).

On to the code.

So the basic structure of the a web page is written in a language called HTML, which stands for Hot-Tight-Monkey-Love… just kidding. It stands for Hyper-text-markup-language. So HTML is a not a programming language it is a markup language.

Think of if like writing in Microsoft Word. When you tell MS Word that some text should be bold, a sentence should be indented and that there should be a title to the document, the software does those things for you. With HTML we are going to do the same thing on our own. We are going to tell the web browser how the content in the web page should be structured.

So let us recap a little. When we browse the Internet we use a web browser like Firefox, Google Chrome, Safari or which ever software you prefer (we NEVER use Internet Explorer, go here for information on why IE is bad).

When the web browser loads a web page it reads text with HTML markup around that text. The HTML tells the web browser to show the information in a certain way. It markups the information so that it looks like a web page.

Now that we understand a little bit of what is going on let us look at a little code.

Opening and closing tags:

< This is a tag that opens a piece of  html code.

> this is a tag that closes a piece of html code.

Every < tag must have a > tag or your web page is broken.

Like this:  <html>

The basic structure of every website is something like this:

<html>

<head>

<title>This is the title it will appear in the web browser window at the top </title>

</head>

<body>

<h1> This a heading </h1>

<p> This is a paragraph of text. The <p> tells the browser to display this text as a paragraph. We can set the style of the paragraph text to be larger or smaller, to be a different color and all kinds of other things. But we’ll get into that later. </p>

</body>

</html>

Notice how all of the HTML tags have a corresponding tag with a / in them. This is called the closing tag. Every HTML element needs a closing tag except for a few exceptions.

You can see that the page starts with head information like title <head><title>TITLE</title></head>. Next we close the head information and start with body information, like a heading and a paragraph.

Now you know the basics of HTML.

If this was easy for you to understand you are on your way to being a web designer. But don’t get too excited it just keeps getting more and more confusing and hard from here. I recommend that you now head over to W3 Schools and learn some more HTML.

If you didn’t understand that crap check out this video of kitties:

John Likens

Ed Franks

I love the texture they’ve put behind this design, it really adds another element of depth and interest.

dronograph

Green IS my favorite color.

Quinto Hache

This one is magical.  It also uses some colors that are very popular right now.

Si Scott

Heather Chachaty

I chose this one because I love how you can still read it even though they’ve cut out parts of the letters. Also, it’s quite simple, and it doesn’t overload it with too many decorative swirls.

Narani Kannan

I was inspired by the hand-drawn ink look of this design. It looks natural while being very precise.

Jessica Wyatt

This one is absolutely delicious. I love how the letters drip and the warm, sweet color reminds me of honey…

now I’m hungry.

Maria Simova

This type looks whipped like butter

There you have it!

Seen any other examples of floral typography that I’ve missed? Post your favorites in the comments section.

<3

Laura

Google says they will cease to support Internet Explorer 6 for all of their online applications starting March 1st.

Web Professionals are collectively shedding a single tear of joy.  IE 6 is generally excepted as the worst browser in current use.  It is the only browser to ever to have multiple Facebook groups calling for its demise. The wikipedia page for IE 6 describes it like this:

“This version of Internet Explorer is widely derided for its security issues and lack of support for modern web standards, making frequent appearances in “worst tech products of all time” lists, with some publications labeling it as the “least secure software on the planet.” Campaigns have been established in order to encourage users to upgrade to newer versions of Internet Explorer or switch to different browsers, and some websites have dropped support for IE6 entirely.”

If Google is successful in removing IE 6 from use they will have firmly established themselves as rulers of the Internet. This is huge news for two reasons:

One, It is going to cut web development time significantly and, two, it is the first time Google has used its power for evil as opposed to good.

Google is known for sharing knowledge, giving away software, and collaboration. They are not known for their ruthless ability to destroy demand for certain products with a single policy decision.

Why wouldn’t Google want to destroy IE 6?  Just last month Microsoft admitted that it was flaws in IE 6 that made the recent Chinese based security breaches possible.

Furthermore, Google has positioned themselves as a direct competitor to IE 6 ever since they launched Chrome – Google’s in house browser. Currently IE commands 63 percent of the general Internet browsing market and 73 percent of the business market. Leading a boycott against IE not only makes good sense within the world of web development, it is also a smart business move for Google.

Firebug is a software plugin that can be added onto Firefox as tool for debugging websites. Ever since I started designing websites I have been forced to use Firefox for debugging all of my work, which was not a horrible fate. Firefox is a perfectly fine browser and there are tons of great plugins available for Firefox to improve all different kinds of workflows. Firefox also keeps up to date with current web standards and encourages users to update their browser software on regular basis. Furthermore, the anarchist in me loves the fact that Firefox is open source.

However, I am a Mac user and Safari is significantly faster on my machine. PC Adviser claims that Safari is 38 percent faster than Firefox. Safari also renders websites at a much higher resolution. So, understandably, I was thrilled when I found out I could have my cake and eat it too. Firebug Lite allows users to use the Firebug plugin with any available browser.

Here is how it works:

1. Place the code below in the head of any web project that  you are working on.

<script  type=”text/javascript”src=”http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js></script>

2. Make sure your computer is connected to the Internet

3. Load your web project into the browser of your choice

4. Bam!!!! Check that out!!! Firebug!!!

That is it. Easy as pie.