Balsamiq Wireframe

Learning Balsamiq: The Brief

Alright, so I mentioned in a previous article that I decided to blog as I learned Balsamiq Wireframing. I’m not going to go into why I am just now learning wireframing, you can read the article when you get the chance.

The first step in any project is that we have a goal and a means to meet that goal. This project was given to me by a friend who wants a web site that will allow him to monitor his art project. Pretty simple, right? Well, not really. When I questioned him further it turns out that it could end up being beyond my web capabilities, but I wanted to give it a try. So here is the brief.

What I was told

The idea behind his art project is to create many (unknown the exact number, but probably about 100) small sculptures that would be cheap to make and would last a while. They would probably be made out of some tough resin so each one will last. I don’t know the exact size, my assumption is that they are about 12″ tall. Each sculpture would be placed around the US by people that he knows. An example would be that person A would place it at the corner of a street in Chicago, person B could leave it at a metro station Dallas, Texas. You get the idea, a hundred of these scattered around the US.

What he wants for his site:

He wants a site that would record what happens to each of the sculptures. A way to log the location and any other information that a person would be willing to add. Each piece would have a distinguishing mark or number to identify it and the web site url. The sculptures would not have any aids like a sensor to record where they are. The info must be added by a person.

After that there isn’t too much info about the details. He’s not sure if gps should be used or if just someone using a form to add information is enough. He did mention that there needs to be as little information about the project as possible. In other words he wants to see what happens with the pieces without interference from anyone. If the sculpture get thrown away, that’s fine.

That’s generally what I know about the project. I am leaving some info out because it’s his project and I don’t want to broadcast it without his permission.

What is needed for the site:

These are my initial thoughts and until I change them, the wireframing will be based on them. He may come back and want something different, but for now I’m going to proceed this way.

  1. There must be a way for people to enter information about a sculpture. It must be dynamic and allowed to be modified.
  2. A basic info page about the project, but not too much info.
  3. Browse ability to see where individual sculptures are located and to allow someone to see where the piece has been.
  4. Less info is better, so no explanations or hints.
  5. Allow comments

Resources needed.:

  1. mySQL database
  2. Geolocation ability based on IP (can be over-ridden by person)
  3. Map of the sculpture’s location based on the IP address.
  4. The ability to upload images/selfies with sculpture. He didn’t request this, but I think it would be warranted.

How I’m going to proceed with Balsamiq:

I think four pages are needed, remember that less information is wanted.I think that’s it. It sounds really simple on the surface but the development of the backend may be difficult.

  1. Home page
  2. Browse
  3. Add
  4. Search

Okay now that the basics are complete I hope that you follow along as I create his site in Balsamiq. Remember, this is about learning wireframing and all the other stuff is not important. What I mean by that is that it is entirely possible that WordPress (or some other program) would be able to do what he wants with less hassle.

 

 

 

Share
ad for paper design

Print or Digital, what others think

ad for paper designAs I get older I start to miss somethings that I took for granted a long time ago. Like getting the latest magazine as soon as it came out. Sometimes it was even  an event that warranted a cup of coffee and a quiet space for the next hour or two. Now though I get so much info fed to me through various web sites and apps that I don’t think I have sat somewhere in years and just read a magazine, digital or otherwise.

That’s what drew me to this survey in the first place. The poll questioned people about their perceptions between digital and print. The survey was commissioned by a company with a stake in printing, so I’m not sure if the survey was slanted their way. However, if you’re like me you’ll probably find the data interesting.

The following is a direct copy/paste from their pdf. You can find it here(I did the graphs myself though) Continue reading

Share

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

Share

Creating an infographic template in AI

How to create a Vector Infographic, by Andrei Marius (tutsplus.com)

As a graphic and web designer there are a lot of different requests I get from clients. One that I haven’t needed to do in some time is to create an infographic. That being said, I think it’s at least a good tool to have in your “tool box” if the need ever arises. That, and considering that as part of my plan for this site I like the idea of adding a mix of different areas of art I think this is a great addition.

This post is about creating infographics in Adobe Illustrator by . The article appeared on tutsplus.com and if you’re interested it seems to be a comprehensive step-by-step guide to the process. I do have to acknowledge that I haven’t done the tutorial yet, but given time, I will attempt it. I typically don’t like templates, more for personal reasons than any other, but the result looks pretty good. Good enough for me to give it a shot.

As mentioned, the writer takes you through the process at a beginners steps, “1. How to Create a New Document and Set Up a Grid” to finish at what appears to be a generic, yet very professional infographic. Like I said, I’m going to give it a shot if only to have a ‘fall back’ if I have to create one in  rush.

Do the tutorial

Update: I sat down this morning to do the tutorial. I mean it looks pretty good and like I mentioned in the article, we should all know how to do an infographic. Let me just say that the tutorial was really bad. The author made simple things difficult and relied on this sense of,” let’s use the tools that are pretty much useless unless we have tutorials making us use them.” Serious, I couldn’t finish the tutorial and I’ve been using AI since about 1997, and I’ve been teaching it since about 2001, and let me repeat, I couldn’t finish it. I did however sit down and do the infographic in about an hour just copying  what the image looked like.

I guess if you’re new to AI then maybe you’ll get something from it, but I think a better way to do it is too sit down and play. You’ll probably be more creative and maybe even do something interesting.

Share