design posts

Abstractions: interfaces as lists, details, and flows

in

I read a post recently of Dave Rupert lamenting that he can describe any digital interfaces as lists, details, or flows. This is, of course, an abstraction. Abstractions can be useful for reducing complexity and making things understandable. In code, they also can be used to reduce duplication and provide reason for limited responsibility, improving maintainability. But if everything is fit into a small number of buckets, it can certainly make it seem like there is a lack of diversity, a sameness to everything.

With any good abstraction, everything can fit into it with a certain level of mental effort. Some might be more willing to go further than others to make a given classification work. In code, too heavy abstraction can lead to a given abstraction trying to do too much, or conversely, functionality being limited to fit a simple concept of the abstraction.

Continue reading post "Abstractions: interfaces as lists, details, and flows"

Stir Trek 2016 talk videos

in

I’m glad that Stir Trek has released videos of its 2016 talks, since I didn’t luck out in getting a ticket this year like I had last year. At least I will (hopefully) be much less tired watching them than when I drove down to Columbus early morning last year. Of course, the videos are good to have even for people who went: These multitrack conferences always seem to have multiple good talks at the same time, including at least one slot with multiple “must see” ones.

My first responsive site

in

I’ve been interested in the basic idea of responsive design since I first started into web development. Back then it was mainly limited to flexible widths that accommodated changing screen widths and font sizes. I experimented with that when development was just a hobby. Still, I found CSS2 and browser compatibility issues to greatly limit the flexibility. When starting to actually get paid as a developer, I went with what was already being done at the places I worked, which was pixel-perfect design. Sites had to work in old browsers and time was limited. Designs were flat images that were easy to cut up and use CSS to match exactly. I did play with some flexibility when I had more free time.

When responsive design became a thing, I thought it looked pretty awesome. It gave a lot more flexibility than what I had been playing with. Still, browser support was too bad for parts of it for me to use at work. I played with some aspects of it, adding a bit of flexibility here and there, but still kept mostly with the pixel perfect type design. When we eventually discussed it with my boss, he didn’t like the idea, particularly for accommodating his designs and the browser support issues. I started a yet unfinished remake of my own site that allowed me to play much more, but didn’t get very far towards a finished design.

The Site

Recently, my boss came up with a simple design for a simple site that he thought would be perfect for trying responsive techniques with, the annual report for the Gay Community Fund. It lent itself well to flexibility and him and the client were fine with graceful degradation / progressive enhancement. It consists of basically two layouts: the home page, with a gallery layout of boxes; and an internal layout with a heading, a possible image, a possible small image gallery, and a possible long list.

Continue reading post "My first responsive site"

Samba: Mockups in HTML

in

In building a website for a client, one usually builds clients, one usually builds a few mockups with different themes to give the client an idea of what the site will look like with one of a few options. They can tell the designer what changes they want, which can be made relatively easily to the mockup before the theme is actually built for the site.

The mockups are supposed to be quick and easy to build and modify, allowing designers to avoid dealing with all of the nuances of CSS and HTML at this early stage. Designers shouldn’t be held to any limits at this point: They design what they think the site should look like, and figure out how to build it later.

Traditionally, this might have been done in Photoshop. The layout would later be cut up and positioned on the site with CSS. I did three mockups for the Stearns Homestead project in Photoshop. They were a pain, with maybe a hundred layers to handle two pages of the site for each mockup. Managing multiple elements of the same type is not easy there. Photoshop doesn’t allow any easy management of multiple blocks of typography at once, so changes are difficult. Now that I’m not using school computers, I don’t have access to a newer version of Photoshop, and none of my image editors have layer folders or some other useful features, which had helped me out a lot.

Continue reading post "Samba: Mockups in HTML"

Stearns: Move, Menu, Flutter and Permissions

in

The Move

We finally bought the domain name and hosting account for Stearns, at stearnshomestead.com.  We were expecting them to want a .org due to their nonprofit status, but I guess they wanted the familiarity of the .com.  They have no company credit card, so Angela had to set up the account and will bill them for a check.  I don’t know what they’ll do in the future:  They’ll probably have to have one of their members do a similar thing.

We moved our WordPress install from its temporary location in a subfolder of one of Angela’s sites to the root of the new site.  There was perhaps a bit of trouble moving the site, but once we figured it out, the install worked perfectly.  To move, we transferred from one site to the other via FTP all site files.  We then used PHPMyAdmin to export the site data as SQL and then import it to the new site (didn’t have to use PHPMyAdmin for the new site, as the host has an import function in their control panel).  We then had to update the config file for WordPress to reference the new database.  Finally, we had to change two URLs in the options table in the database.  Everything now works.

Continue reading post "Stearns: Move, Menu, Flutter and Permissions"

Stearns Design Mockup Chosen

in

On Monday we met with Debbie to show off our design mockups.  Wednesday Debbie came back, bringing in three board members who would need to be involved in the decision.  They discussed various things about the site, including what it will be including and what they have for it.

They also were ready to make a decision on the mockup they wanted.  They had done some user testing of the mockups.  Rocki’s was chosen.  It has a picture of the front of the farm in the header, which they liked because it would be the first thing you’d see if you went there.  But they did want some changes to it.  They wanted a lighter brown for the wood grain that makes up the other part of the header.  They wanted a more solid navigation menu rather than the hanging signs currently in use.  And they wanted a less cluttered appearance for the home page.

They gave Jason’s second place.  His was very clean, also using a wood grain and a horizontal drop-down menu.  His drop-down seemed to be more along the lines of what they wanted, so something like that may be placed into Rocki’s.  Many of us were thinking that Jason’s would be chosen.  But you can never be sure.

So finally we will get to start building the actual site.  This should be the fun part, certainly the part that I have more experience with.  The site will be built using WordPress, so there won’t be a lot of actual programming most likely.  We may need to figure out how to interface other data with WordPress and add admin pages for it.  We will certainly need to figure out how to use “feeds” to get the information we want where we want it.  We’ll need to figure out how to set everything up so that it is easy for them to update.  Most of this should be doable within WordPress or using plugins, no hardcore programming. We’ll see though.

A lot of time will certainly be spent turning Rocki’s Photoshop theme into a real WordPress theme.  Then of course there is the insertion of the pages and filling them with content.  It will need to be organized in a way that will be easy to update for the Stearns people.  This may be hard.

I’m looking forward to some fun and some learning.

Stearns Site Design Mockups

in

Over the past couple weeks we’ve been working on our mockups for the site design for Stearns. We each picked one or two of our wireframe concepts and have used Adobe Photoshop or Fireworks to create the fleshed out, full color and image versions of them.

I used Photoshop, since I’m familiar with it and have never dealt with Fireworks before (hadn’t even heard of it till this class).  As a non-designer, it took me a long time to do.  I tried to keep every piece separate and organized to make it fully modifiable.  This can be painful in Photoshop though, especially since you can’t modify some aspects of multiple layers at once.  And with all those little bits, they really bogged down even the powerful computers at school at times.

My version of Photoshop at home is old (7), so I couldn’t really work on them there.  Some of the stuff from CS4 didn’t fully translate, I don’t have all the fonts, and Photoshop 7 didn’t have the nested layer groups and other benefits that I was heavily using to keep organized and work on this thing.  I had to spend extra time at school and at my parents (my Mom has CS4).

Next time, I think I’ll be faster at this, as I know more what I’m doing, how to deal with all those pieces and what not.  Hopefully also I’ll be better at making a good design.  I’d like to learn that Fireworks, as it looks much better for this purpose.  I think it even makes it very easy to convert the mockup into actual HTML and CSS for the live site, which could save a lot of time with that.

So finally, my mockups.  I did two of my ideas, plus a modification of the one.  There are two pages for each.  They all have very similar (copied and then slightly modified) content sections.  They were all designed to be about 975 pixels wide and with 600 pixels as the above the fold height.  They have an additional 200 pixels of width to show the sides and as much as 600 pixels below the fold of height for content.

Stearns: Thematic Wireframes

in

After making our layout wireframes, we brainstormed some various thematic ideas.  We mostly thought of items that’d be on a farm.  Some of the ideas that were popular were: wood grain, hanging signs, the historical sign, barn, sun, etchings, grass, farm animals, silo, straw hat, pitch fork, seasonal changes, red, brown, and trees.  It was a brainstorm, so there were many other ideas, although some were less applicable.

In class, we each drew up one or a few quick thematic wireframes.  We didn’t have much time, so many weren’t fleshed out.  I drew three:

Stearns thematic wireframe 1
These two were based mainly on the historic mark sign that the farm has. The first had many little signs for top buttons and logo, two big signs for a sidebar and main content area, and then a grassy ground below that serves as a footer. The page background would be a blue sky. I felt this might be a little overboard with the signs, but liked the grassy footer and blue sky a lot, using them in most of my designs. The next drawing kept the footer and had one sign as a sidebar with the logo and accordion navigation. I included the wagon wheel that is at the base of the Stearn’s sign. I felt a light red barn side or white slatted house side would work for the main content area.

Stearns thematic wireframe 5
My other drawing used faded wood signs for everything. I wanted an etching on the top banner for the logo and a burn in look for the banner text. The main content and side bar would be place on parchment nailed to a giant sign. All of the signs are hanging and hang from each other.

We were then given a couple days to create some more.

Stearns thematic wireframe 2
This one would have barn red as the body background with an open barn door holding the main content. I wasn’t sure how to handle the content, so I figured a fairly normal div box set would work if I couldn’t think of anything else. The top banner would be a wood sign over the door with an etching of the farm, burn in title, and silhouettes of animals with white lettering for the main navigation. I continued with the grass footer.

Stearns thematic wireframe 3
Next up I made the back of a red barn. The roof would hold the title (probably no room for a logo) and the main navigation in white paint-like lettering. The sub navigation would be in a side bar with the same lettering. The main content would be on a big off white type cloth nailed to the barn. The footer would again be the grass. A sun was featured over the roof to add a little brightness.

Stearns thematic wireframe 4
Finally, I came up with a variant of the barn door idea with something inside. A farmer would be standing with a pitch fork forking a large, squarish pile of hay. The hay would hold the main content and the farmer would have the accordion side navigation on his back/side. This version of the door had a cloth banner nailed across the inside top of the door with just the logo and title. This one seemed very kiddy to me though, would probably only appeal to kids.