Learning Balsamiq Wireframing

A few years ago I started hearing about using wireframing to do mockups of web sites and apps. Prior to this I had been the type of person that I just opened up either Fireworks(yes, Fireworks) or Illustrator to start getting an idea of where the site would end up. It was not something that I was taught to do, it just seemed natural to get a cup of coffee, sit down, and start creating. That was, like I said until I started to hear more and more about people using wireframing to mock up a web site or app.

“I tried different software and no matter what I did, it was just too boring. “
My first few goes at trying this method didn’t go very well. I tried different software and no matter what I did it was just too boring. I couldn’t connect to it visually and as an artist I decided that it wasn’t for me.

So what changed? Well, the truth is that I want to stay current with standards and procedures when it comes to my area of study. Eventually I came to the conclusion that this was a skill that was required, and even if I didn’t use it for my own layouts, I needed this tool in my proverbial toolbox.  I also believe that new methods and techniques are usually useful so I decided to give wireframing another try. This time I researched as much as I could about why it’s useful, who benefits, and which application would fit me the best.

I found out that the majority of people, if the web is to be believed, used either Sketch, Adobe XD, or Balsamiq. The other software recommended were too specific to platforms or intended use. What I mean by that is much of the software was specific to mobile app wireframing, or maybe wireframing on mobile. Some were PC apps and some were mostly for a team to work together on. Since I’m working alone on a Mac laptop and am only really concerned about web sites, many of these didn’t seem to interest me right now.

Basalmiq Logo

I ended up choosing Balsamiq Wireframes as my learning platform since it seems fairly intuitive and their documentation looks to be complete. I’m just guessing about the documentation right now and no doubt I will eventually find out.

As I work through the learning curve of wireframing on Balsamiq I thought that it might be interesting to others if I share what I’m doing as I teach myself the ins and outs of the software. I’ve worked with it a few times now and I think I’ve got a fairly good handle on it, but like most software it probably has secrets and hidden gems that I have yet to discover.

If you’re like me and never really spent time wireframing, then I hope that you’ll follow along as I learn. Maybe you will let me know if there was a trick or something that I should have done. The only thing I’m not sure of is if I should write articles or do videos. possibly both are warranted.

man confused

One step behind everyone else.

man confusedSo this article isn’t considered click-bait, the site I’m talking about is Creative Market.

Sometimes I wonder why I seem to be the last to know about certain styles and trends. It’s not just in daily social life, but it appears that my lack awareness extends to what’s happening on the web. I was probably the last person to actually sign up for Twitter that I know of, Instagram was just a peripheral site that I didn’t see a need for, and what is Snapchat anyway?

It’s funny because on some levels I’m the first to adopt some technologies and sites. Maybe an example could be Reddit or to a lesser degree, Digg. I had been on Digg—you all remember Digg?—before it tanked, and on Reddit when it was just starting out. So I don’t think I’m a lost cause, just maybe just a little too unaware.

This seems to have changed once I started working on this site. The need to find content to write about has me going everywhere on the web just to find something interesting and artistic. Most of what I find is just static that I have to weed through usually without success. The result of this is that I find myself signing up to sites that earlier I wouldn’t have in the hope that I can read an article or find out about an artist. The best case is that maybe it will excite me enough to write about it or them.

Creative Market is new to me, and I don’t think before this kennethcurtis.com that I would have even stopped by to find out what it’s about. I think the name of the site gives me all I need to know, and in all honesty, I won’t spend money on art found on the web. There’s too much of it, and I don’t think I’ve seen anything that I felt strongly enough to purchase.

This morning on my Twitter feed I found a link to free stuff to download. Free is good even if I don’t need whatever it is kind of fun to see what’s being given away. So I decided to give Creative Market a try and signed up for an account. I have no idea if the site is good, and I’m not advocating anyone else sign up, but at least I’ve found another resource for kennethcurtis.com.

Free stuff from Creative Market.

Let me know if the site is a spammer or it is good. I’d also like to know of any other resources that I maybe have missed out on.

cpanel and plesk control panels

Hosting 101

hosting illustrationI recently wrote and submitted to this site a short, but in my opinion concise article about picking a domain name. I tried my best to include all the ins and outs of the requirements and not so important details. Now I would like to discuss the good and bad of the hosting world.

To start with, let’s make sure that we’re discussing the same thing. A host is a company who controls a computer that stores your information. When someone visits your domain, the computer serves your web site to their browser.  The host is the company, the server is the computer. That distinction is important when choosing a place to serve your site.You may have a great host, but a poor server, or reverse that. Maybe the server is strong, but the host has awful client support. When shopping around you need to consider both aspects.

Okay, that’s really over simplified, but if you think Continue reading

Podcast with Sara Soueidan

In the world of cascading style sheets there are a few well known people, people who have gotten a name for themselves for their posts or videos about CSS. Sara Soueidan is one of the better known experts that I have followed on Twitter. According to her web site, she is a front-end development and trainer.  To me, it’s her work in CSS that I am the most interested in.

Recently she was an emcee at the CSSDAY (read my short entry on the event)in Amsterdam, and now she is doing a podcast with the web site, Syntax about SVGs. If you’re interested in web design, it’s a must-hear podcast.

For those of you who may not be fully aware of this file format then here is a summary from wikipedia:

Scalable Vector Graphics is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium since 1999.“–Wikipedia

That might not be as clear to some as it is to others, in simpler terms, an SVG is an image format that is written as xml. You don’t have to write the image specs from code there are programs like Illustrator that will convert your image to an SVG.

There are many reasons that you’d use an SVG, but but for me I use them because of their scalability. Since the image is vector based, that means that the image is created with math, and each time the browser/computer reloads the image it recalculates the info/math in the browser. The result is that the image is always crisp and clean, with none of the jaggies that you get when resizing jpgs or pngs. The best use of SVGs, in my opinion are smaller in size, like a logo, but I think I’m a minority on this.

In the podcast, Sara gives much of the information about using SVGs as well as the reason that they are relevant in modern CSS and HTML sites. She explains how to embed them in a page, and other relevant info that I think is very useful to people like me or even beginners.

You can find more about Sara at her web site: sarasoueidan.com

Normally, I try to justify embedding the content on this site, but I think that Syntax.fm has quite a lot of info, like show notes, that goes with the episode, so it would benefit you to visit their site for the podcast.

The podcast is here:
 SVGs With Sara Soueidan

 

CSS Day 2019 Conference

As a web designer and almost a frontend developer I am always interested in hearing what established web designers are doing. This year in Amsterdam, NL the world of CSS designers/developers came together to discuss what else? Cascading Style Sheets. I guess to most non-web people this may not sound like the most fun place to be, but to me I can only hope someday I’ll be able to partake in the festivities. I sometimes feel that I’m all alone when it comes to working on the web, mostly just me and my computer. The thought of mingling with like-minded people would be great fun. Officially, the conference is over, but according to the web site, https://cssday.nl/2019

“Make no mistake, this is an advanced conference. We ask our speakers to treat CSS and UI topics that they themselves, as well as the attendees, can geek out on.”

Some of the speakers that were featured were some of the designers Continue reading