If you are planning to buy an Apple or Android smart phone then surely you are making the right choice for yourself. Both of these handsets are very good and will enable you to enjoy various cool...
[[ This is a content summary only. Visit my website for full links, other content, and more! ]]
When it’s time to create the initial visuals for a design, how do you proceed? Do you sketch? Do you wireframe? Jump right into Photoshop to begin a complete design comp? For the redesign of this site I tried something a little different.
If you’ve been following along with this talk about redesigning this site you know that up to this point I’ve done a lot of prep work. I worked out site and business goals, set some constraints for the design and chose an aesthetic concept. Lastly I worked through the content that would find its way on the site.
Normally around this point in a design I begin sketching out ideas. This time I tried another approach. I made some of the roughest sketches I’ve ever made for a design, so rough that there’s isn’t anything I can show you. Then I took some notes I had made and started pushing them to the web.
From Style Guide to Prototypes
Unlike other projects I had some strong visual ideas about how I wanted the layout to look prior to any sketching. I had previously worked on a redesign and in seeing the problems with that design had already though through some things about this one.
I also had plenty on documentation for the site. I had files with notes for typographic decisions, grid thoughts and math, and ideas for potential color schemes. I had essentially been building a style guide and decided to turn the .rtf files into .html files.
I grabbed content from part of an older post; one that had blockquotes and lists and other html elements beyond the paragraph. I started building a very basic html/css web page that was little more than a heading and column of text down the middle of the page.
At first this was so I could explore type. It’s one thing to see the name of a typeface and a number for how much leading to use and something entirely different to see how that typeface looks in a browser with a specific font-size and line-height. It was simple enough to change a couple of values in the css and observe. I explored different type decisions on different paragraphs and it helped a lot in making the final decisions.
While I was exploring type I thought why not do the same for the color schemes I’d been considering and the next thing you know I was pushing more things to my now online style guide. I added:
a table of commonly installed serif and sans-serif fonts
blocks of colors from color schemes I pulled from Kuler
The page became something of a cross between a style guide and a style tile and I had fun experimenting and exploring.
It’s one thing to see a typeface name and something entirely different to see how that typeface looks in a browser with a specific font-size and line-height.
At the same time I began developing different grid based layouts. I had several web pages with nothing other than boxes built to see how best to develop one grid or another.
Eventually all these live web documents became the initial prototype for how a single blog post should look and behave. I’ll talk more about the specifics of these .rtf and .html documents in the coming weeks.
What’s of note for this post is that there was little in the way of sketches and wireframes. I thought through some things in ordinary .rtf files and when it came time to see how things looked I created .html pages based on my notes. I continued to iterate and improve the initial prototypes until they became the design you see now
The Design in Progress
Since I don’t have much in the way of sketches or wireframes to shares I’ll instead show you what some of the prototypes looked like. I built them as I was zeroing in on how I wanted to develop the typographic grid. At that point it seemed logical to combine the grids with the type and colors from the style guides.
As you can see I’d already put in considerable work by the time I created the pages below. I’ll discuss some of that earlier work in the coming weeks.
In the prototype above the logo is larger and aligned to the left. The global navigation includes a link for search. The post title is pulled out of alignment to help draw your eye to it. The meta information on the left includes rss signup and comment info.
The design is recognizable, but clearly differs in some of the details.
This next iteration already has the smaller logo. The search link has been removed from the global navigation and the links themselves are aligned right. The rss and comment information are no longer present in the sidebar, replaced by what might be sub navigation for a series of posts.
The logo is still left aligned and the post title is still pulled out of alignment with the text. This iteration is a little closer to the final design, but not quite there yet.
This third iteration is almost the live design. The logo is now right aligned with the meta information and the post title is now aligned with the content. Both help create the strong channel of space down the page. Breadcrumbs make their first appearance at the top, which I later decided stole emphasis from the post title.
You might also notice I was experimenting with indents to show new paragraphs before going back to an extra line break. While you can’t see it in the screenshot above, further down in this prototype I experimented with:
Pull quotes — flush right or left in the content and sometimes pulled out of it
Images — floated to the left, the right, and again out of the content
Series sub-navigation — at various points down the left side
Comments — This is where I first started designing how comments would look
Footer — the footer also makes an appearance with 4 equal and distinct sections
I continued to revise and refine these prototype pages for a single blog post until I was ready to begin building one for real. At that point I began developing a WordPress theme. I only had the single post ready, but every page after is really a variation on this design.
Even with just these 3 images I think you can see how the iteration process worked. A tweak here. An addition there. Try this element in a different place and little by little make improvements to the design.
Summary
I shook up my process a bit in redesigning this site. Instead of the usual static sketches, wireframes, and comps, I designed more in the browser. I turned early notes into online style guides and grid layouts, which I could explore and refine. Eventually I combined both to form the early prototype pages for the site.
Iterating over the prototypes, I moved elements around and refined the design, until it eventually became what you see here. It was a different, albeit an interesting, process and one I look forward to trying again.
While I haven’t discussed it here, it also made it possible to see how the design worked responsively and it’s convinced me that with further refinement it could be a very workable process for future projects.
Next week I’ll offer more of the specifics that led to the style guide. I’ll walk you through some of the typographic thoughts and choices I made, which informed the rest of the design.
Is it better to be a specialist or a generalist when furthering your web design career? It’s a question that often gets discussed with varied opinions.
In one of those oddly regular coincidences in life as I began working on this post about generalists and specialists, I was pointed to an article and podcast with some of those opinions.
The article, All Hail the Generalist, makes the argument that business is showing declining returns from the specialist. The 8 minute podcast from Pagebreak discusses the article.
I think both specialists and generalists have important roles to play. Each has its own strength and both contribute to the bottom line.
I’d characterize myself as more of a generalist. I get bored doing the same thing all the time and enjoy the challenge of being thrown into something new. I like seeing how seemingly disparate things relate to one another.
Perpendicular Patterns
Look at any group of objects or concepts and patterns will emerge. Specialist and generalists are both able to recognize patterns. It’s a characteristic of human beings to form and find patterns. The difference between specialists and generalists is they’re looking at different things and so they discover different patterns.
Specialist — looks deeply at a specific discipline to find the patterns within it
Generalist — looks at different disciplines to find the patterns across them
In a sense they work perpendicular to each other and the patterns one sees are often obscured from the other. It’s likely why we sometimes think the patterns another recognizes are pulled from thin air. We simply can’t see the same dimension they see, since we’re focused on another.
You’ve probably seen a representation of what a 2-dimensional world would look like to a 1-dimensional being. The 1d being would see a line where a plane exists, since the being is unaware of the other dimension.
You can think of specialists and generalists in a similar way. Each is looking at something represented by 2 dimensions, though a single dimension. The specialist sees one dimension while the generalist sees the other and because of that each sees patterns the other doesn’t.
Both types of patterns are important, though.
within — leads to frequent and gradual improvement in a specific industry
across — leads to infrequent, though sweeping disruptions and new industries
The difference between specialists and generalists is they’re looking at different things and so they discover different patterns.
Imagine one person dedicates his life to painting. All he does all day long is break out one canvas after another and paints. Another person dedicates her life to practicing as many creative pursuits as possible. Some days she paints. Other days she plays music or writes or sculpts, or designs.
The first person likely becomes the better painter. He’ll come to better understand the differences between one canvas and the next or how different kinds of paint interact with each other or with sunlight. He’ll have practiced many ways to apply a dab of paint and know how to communicate better through the medium of paint on canvas.
The second person likely gains a greater understanding of art and creativity as a whole. She sees the connection between the brush strokes in a painting with the rhythm of sounds in a musical composition and the rhythm of words in writing. She may not know the best way to mix different paints to product a particular color, but she better understands the effects of color and its relationship to the rhythmic patterns mentioned above.
Again both are important. Each sees different patterns due to the different things they encounter and study.
Specialists and Generalists
The time and effort it takes to go from complete novice to an advanced beginner is relatively little compared to the time it takes to become an expert. The learning for the novice is wider, while the learning for the expert is deeper.
Despite the shallow learning, by the time someone becomes an advanced beginner they have likely seen and gained familiarity with the majority of the entire discipline. It’s a shallow familiarity, but it’s a wide awareness.
On the other hand the deeper learning of the specialist takes him to places the generalist never sees and may never be aware exists.
For years becoming a specialist has usually been the way to advance your career. Where specialists are seen as experts and authorities, generalist have often been seen as drifters unable to focus on something long enough to become a specialist.
However, the world needs both. Each discovers new solutions to existing problems and new problems to solve. They just do it in different dimensions.
Where the specialist studies a particular tree in the forest and understands it better than anyone, the generalist sees the whole forest and knows a little something about each of them. The specialist could figure out what is needed to help the one tree thrive where it is. The generalist can observe the tree might better survive in a different part of the forest.
The specialist is better at dealing with a specific situation he or she has studied in depth. The generalist is better at dealing with the unknown because he or she can quickly see familiar patterns from the known in the unknown.
The first to market will likely be a generalist. The one who focuses on making something better or developing a niche within a market will likely be the specialist. If you need a better mousetrap find a specialist in mousetraps. If you aren’t sure if a mousetrap is what you need, find a generalist.
Summary
The question of specialist or generalist isn’t a case of either or. The answer to the question posed by this post is yes. It’s no. It’s not that one is better than the other. They’re just different and equally valuable in different ways. Each sees patterns in things that the other can’t see.
The specialist sees deep patterns in a specific subject. The generalist sees wide patterns connecting a variety of subjects. Patterns in different dimensions.
I suspect there’s a bit of left brain, right brain thing here, with the logical and analytical among us more likely to go the specialist route, while the more creative among us tends toward the generalist. Just a hunch on my part.
Which are you? Specialist or generalist? Do you think one should be more valued in society or do you agree with me that both are important?
One of the perks of owning a Mac is the plethora of apps that are available for it in every category imaginable. You can find quality apps for business, games and school, just to name a few. Many in...
[[ This is a content summary only. Visit my website for full links, other content, and more! ]]
Don’t fall into the numerous online traps. Let's be honest, for every legitimate website online, there are probably a few sites that aren't quite so trustworthy. If you have ever looked into...
[[ This is a content summary only. Visit my website for full links, other content, and more! ]]
If you're new to Twitter, you may not have a full understanding of the popular social network and all of its features. You may go about your use of Twitter simply by creating tweets that adhere to...
[[ This is a content summary only. Visit my website for full links, other content, and more! ]]