While the page is far from finished, I think I’ve finished the requirements for the assignent.
Here is my style guide for those interested:
Download my style guide.
And a link to my live website. Thanks for looking!
The success of my page basically hinges on whether or not I handle the type well.
Walking the line between minimal but still having a visually rich & pleasing website is interesting. Most of the time I spent developing my website was going back and forth between minute changes between type. Like Brother Memmot always says, the difference between mediocre typography and great typography is about 24 hours of finesse (probably more actually).
2 – This is located in the popUP_info div (which has a blue border above it). This is used to state the general reason for the particular page.
It uses the “sc” class style (small caps).
3 – This is a rarely used paragraph, but if the page requires more explanation than the “page purpose” area than this is used for that. It’s in the “about_paragraph” div.
4 – This is in the “Header” tag. It’s a sans serif font and serves as a fall back to getting around the website. The main pages are listed.
5 – The blog area which contains the posts. It’s all contained in the portfolio_item & portfolio_item_content divs.
6 – The font is Caecilia bold and should look pressed into the background.
1 – The title of the article. Inside of an “sc” style tag (small caps)
2 – This is the posts location (portfolio, blog etc) it’s a smaller sanserif.
3 – The tags are right aligned.
4 – This is custom meta data that you insert when making the post. Implements tells which skill were used. And project date is obvious.
5 – Using the post-meta & post-meta-key style rules like many other meta data elements these are small caps and should appear inside of the bubble background image.
6 – The pages base font is Georgia. The body copy is 1 em (base size of 12px).
7 – Sub-titles are h2. 1.3ems italic Georgia.
8 – The preview pictures are 460px wide x 200px tall (pictures seen on the front page. Otherwise they are 460px x 400px tall inside of a blog post. If a user clicks on them preferably they are linked to a 1024×768 version of the picture
From my original mock-up, I basically mirrored it. Otherwise at first glance it looks really similar.
But after the first glance You’ll be able to see just how much has changed (lots!)
In the original you can see my idea to separate content into separate but related columns, but I had glossed over the details of how they would actually work. When I got down to actually creating the website and seeing how I wanted the viewer to interact with the page I flipped it. It seemed to me that it gave a more natural flow from beginning to end that way.
A rough measurement of visual weight.
The grey box method is one that I don’t fully understand. My understanding of it is that it is a measure of the overall visual weight of your website, or where you would want it to be.
It seems like it would be more effective if you had someone look at your comp and they mapped out which boxes were the most visually heavy.
My outline reflects the desire I have to people to start top left and end bottom right.
My sketches are scattered accross post-it notes stuck around my house.
A few sketches of my site that I managed to round up are right here:
It’s hard to see, because my sketches aren’t very tight but I’m playing with large margins and a sloping design that starts heavy in the top-left and moves your eye down to the bottom right.
Here is the wire-frame that I ended up with. I’m a little worried that I’m creating some weird negative shapes between the margins, so I’d love some feed back.
It’s a 4 column grid, 220px per column (20px gutters).
Going along with a minimalist look, the website’s imagery will be scarce.
One form of minimalist art that I absolutely love is printmaking. Something about the subtle shadows cast by the impression into the paper really grab me.
I didn’t go through the entire design process of branding myself (yet!) but for now I’ve found some imagery that I think fits with the feel of the website.
I decided to give the entire webpage a paper texture, and have my “branding” be letterpressed into the paper. But just because the website’s images are scarce, doesn’t mean there won’t be many images up there. Blog posts will have loads of images (you just won’t be distracted by my website’s images).
My work/portfolio is the star of my site, so I want to construct something that allows my work to be accessed & viewed easily & enjoyably.
With this in mind, I took off to look at minimalist style websites that made the content the draw of the site, not flashy graphics. Plus a lot of photoshop filters/effects just isn’t my style.
A couple of the many sites that effectively pull of the “minimalist” look are these two:
Things I notice about each of these websites is the importance of typographic hierarchy. Without using a lot of other tools in your arsenal, type treatment is more important than ever.
I also noticed that a minimal design could easily be a boring design unless the design is treated carefully, with just the right amount of visual interest and typographic wayfinding.
The audience’s experience with a product determines its (and your) success.
Graphic design is the power to create the viewer’s experience. When you choose to control how a viewer experiences your product you take away the uncertainty and guessing that can come from poorly researched design. Uninspired and weak design will not accomplish a company’s goals for success, and could hurt a viewer’s perceived value and trust of your brand.
Graphic design at its essence is visual communication. As the world becomes more and more visual people have become less patient and tolerant of information that is not able to be instantly understood. This has developed in “banner blindness” where people simply tune out visual noise. It’s more important than ever to make your message both accessible and enjoyable.
While it is impossible to get all information across to your audience instantly, it is possible to present it in a way that they can instantly know the purpose and whether or not they will investigate further. This first contact is crucial because so much of what you want your audience to think about you won’t be gathered from the body copy you write. The logo, colors and shapes, to name a few, will immediately cause the viewer to begin classifying and categorizing your company’s product. This is true whether you’re selling a new drain cleaner product on the shelves or starting a political editorial website.
You often only have an instant to make this first impression to draw in your audience. A logo is usually the first image a viewer will associate with you. This image should be unique and meaningful. Implying value, personality and gaining trust all begin with a strong mark.
Colors and shapes all play an important sub-conscious role in your message. Sometimes using a color or image just because you like it isn’t a good enough reason anymore. It’s important to not only be aware of what your page is visually communicating but to also design with this in mind and use it to your advantage.
Important considerations:
After a first impression of your product a viewer makes the choice to move on or invest a little of their energy and time to research and understand your message better. In the information age readers have honed a survival skill to sift through the abundance of information. The tendency to skim or gloss over information has become much more prevalent in recent years. Like it or not, this is how people find their information now and design should cater to this tendency.
As the world becomes more and more visual people have become less patient and tolerant of information that is not able to be instantly understood.
So the pattern repeats itself. Once the viewer has decided to look they’re again scanning for easily accessible information and the exact information they want.
Typographic choices, organization and the amount of information come into play in this step of the audience’s experience. These choices become a road map for people to navigate your information and soak it in easily and efficiently.
Important considerations:
By this point a customer should have a clear understanding of what your product is or what your service can do for them. As your company grows and services expand then the brand you create becomes a promise of service. A symbol of quality that customers will be able to rely on for their needs. Your distinct and unique brand is a valuable asset that will grow with each contact your product has.
Important considerations:
With as important as it is to have a design that accomplishes your business’ strategies it’s just as important to not leave the outcome of a design to chance. Speculating on the results of your company’s design is a dangerous game and ultimately it doesn’t even matter if you as the boss or designer even like the design. What really matters is if it accomplishes the goals set out for it. It can be determined if your design is successful by doing user testing. Go find someone who is a member of your target audience and show them the design. Observe their reactions and get some opinions. This feedback will be extremely valuable to know how to better structure the page.
For a business man it’s a long and arduous journey for a potential client to make it from first exposure to customer but when the product is designed with the audience’s experience in mind that journey can be tightened and smoothed up considerably which means more success for you.
note:
I got carried away throwing words like audience, clients, viewers and business man around (probably more) almost interchangeably. It’s because as I wrote this article I was thinking of different possibilities people have to come across a design. From the web to ordering at McDonalds these design principles are true across the board. Feel free to take whatever profession you choose to be, or audience you plan to target and substitute your own words in for where I just placed general references.
While not finished for me personally, this is what I have to show for class.
Websites get really complicated really fast. Without having everything mapped and planned out in advance you’re destined to spin your wheels for a while
I was feeling really confident in how my website was coming along, but near the end of the assignment it turned out that I was getting caught up in minor details that didn’t really affect much, and overlooking other areas that were more important.
Actually switching my website’s gears from just a messing around mode to trying to get it to production was a lot larger of a jump than I was expecting.
The Monograph is required reading before the first day of class, but you may also be interested in the 30+ interviews from international web professionals and other resources that the site offers.
