Graphic design for the cockeyed
November 17, 2018 2:28 PM Subscribe
Would you look at my webpage layouts, and tell me what's wrong with my eye -- and how to fix it? That is, why is most of my design work shitty, and how do I get good?
Sometimes I can make a layout that looks OK to me. Other times not. I don't know how I made the better work better, but I can see that it is -- and, more often, I can't put my finger on why the shitty work is shitty... but I can see that is. I know that graphic design is both a talent and a discipline people go to school for but I was wondering if you had a few examples of my layouts, could you diagnose my eye problem? Provide some links/resources/advice?
I'm mocking up some ideas for a webpage for my sister, a budding freelance writer. She doesn't know exactly what she wants -- but she says she doesn't want a cookie-cutter template site. Here's what I have so far: I would love to hear, in as much detail as you feel like giving me, what is wrong with these layouts. I would love to hear that I seem to consistently do $thing, and instead I should do $otherThing. I do know that templates exist specifically to protect people's eyes from work like mine, and that if my sister wants a job, she should use a template -- taken as read, guys, got it!
Thanks for any help you can give me!
Sometimes I can make a layout that looks OK to me. Other times not. I don't know how I made the better work better, but I can see that it is -- and, more often, I can't put my finger on why the shitty work is shitty... but I can see that is. I know that graphic design is both a talent and a discipline people go to school for but I was wondering if you had a few examples of my layouts, could you diagnose my eye problem? Provide some links/resources/advice?
I'm mocking up some ideas for a webpage for my sister, a budding freelance writer. She doesn't know exactly what she wants -- but she says she doesn't want a cookie-cutter template site. Here's what I have so far: I would love to hear, in as much detail as you feel like giving me, what is wrong with these layouts. I would love to hear that I seem to consistently do $thing, and instead I should do $otherThing. I do know that templates exist specifically to protect people's eyes from work like mine, and that if my sister wants a job, she should use a template -- taken as read, guys, got it!
Thanks for any help you can give me!
Sorry if you already know this, but:
One basic thing you'll want to do is make sure the website is responsive to different screen resolutions, from 27" monitors to different size mobile devices like smaller smartphones and bigger tablets. This means that on any device, the site should have the same "impact". Images should always be proportionate so that the site looks and works similarly (with slight differences, of course!) and everything should be readable and clear. This is usually achieved using flexible grid designs and some fancy CSS use. You want users to stay on the site and not abandon it out of frustration because the site is not functioning properly or just looks really weird.
A *perfect* example of this is a site I came across while I was looking for a family photographer, and someone recommended this person: http://lapegphoto.com/
The browser site looks pretty good, but the website scales down poorly on my mobile device, such that the navigation menu collapses into a dropdown menu that is unreachable behind the gallery, rendering it useless.
Another great example is my own lab's website: https://www.sas.upenn.edu/psych/infant/home.html
Even on my Macbook Pro, the site scales poorly. The site doesn't expand to the whole browser width, and on my phone, the whole site is shrunken down such that it's difficult to read.
It's really hard to tell from just photos, but it looks like SOME of these aren't very responsive and might not scale well. Some of them also look like they were designed in the 90s (like my lab website), which, if that's the thing you're going for, is totally cool, but maybe it's not.
I do like the Wavy design, mostly because it fits with my personal aesthetic and looks really fun.
posted by ancient star at 2:50 PM on November 17, 2018 [2 favorites]
One basic thing you'll want to do is make sure the website is responsive to different screen resolutions, from 27" monitors to different size mobile devices like smaller smartphones and bigger tablets. This means that on any device, the site should have the same "impact". Images should always be proportionate so that the site looks and works similarly (with slight differences, of course!) and everything should be readable and clear. This is usually achieved using flexible grid designs and some fancy CSS use. You want users to stay on the site and not abandon it out of frustration because the site is not functioning properly or just looks really weird.
A *perfect* example of this is a site I came across while I was looking for a family photographer, and someone recommended this person: http://lapegphoto.com/
The browser site looks pretty good, but the website scales down poorly on my mobile device, such that the navigation menu collapses into a dropdown menu that is unreachable behind the gallery, rendering it useless.
Another great example is my own lab's website: https://www.sas.upenn.edu/psych/infant/home.html
Even on my Macbook Pro, the site scales poorly. The site doesn't expand to the whole browser width, and on my phone, the whole site is shrunken down such that it's difficult to read.
It's really hard to tell from just photos, but it looks like SOME of these aren't very responsive and might not scale well. Some of them also look like they were designed in the 90s (like my lab website), which, if that's the thing you're going for, is totally cool, but maybe it's not.
I do like the Wavy design, mostly because it fits with my personal aesthetic and looks really fun.
posted by ancient star at 2:50 PM on November 17, 2018 [2 favorites]
Best answer: The core issues are 1) lack of whitespace and 2) optical clutter (which is related but not the same).
Whitespace: Elements need more room around them in order to breathe.
Clutter: And, in order for the eye to easily settle on important content, there needs to not be a lot of distracting and irrelevant visual detail / colour / patterns that the eye settles on instead.
Design for the web over the past 30 years has more or less settled into fairly common design patterns oriented around making it easy for people to visually skim a site for what they already know they want without reading the whole page first.
What target audience will most frequently be hitting your sister's website? Who is she creating the site for? Make sure those people can find what they're looking for (or what to click to get it) on her page in less than half a second, or the subconscious reaction they'll have to the site itself is: clunky.
There's an ocean of material on design for the web, but the above is the standing-in-line-at-the-coffee-shop basics.
posted by seanmpuckett at 2:57 PM on November 17, 2018 [14 favorites]
Whitespace: Elements need more room around them in order to breathe.
Clutter: And, in order for the eye to easily settle on important content, there needs to not be a lot of distracting and irrelevant visual detail / colour / patterns that the eye settles on instead.
Design for the web over the past 30 years has more or less settled into fairly common design patterns oriented around making it easy for people to visually skim a site for what they already know they want without reading the whole page first.
What target audience will most frequently be hitting your sister's website? Who is she creating the site for? Make sure those people can find what they're looking for (or what to click to get it) on her page in less than half a second, or the subconscious reaction they'll have to the site itself is: clunky.
There's an ocean of material on design for the web, but the above is the standing-in-line-at-the-coffee-shop basics.
posted by seanmpuckett at 2:57 PM on November 17, 2018 [14 favorites]
The first two are just dandy; the second two are a bit busy. Pantone is the worst by far: it makes me think of the infamous Jazz Solo Cup motif and not in a good way that might appeal to 24-32 yr old hipsters.
Caveat: I find super slick and clever, hip, modern web design to be a bit of a turnoff and a black eye fort the artist, in this field of professional solo web pages.
posted by SaltySalticid at 3:00 PM on November 17, 2018 [2 favorites]
Caveat: I find super slick and clever, hip, modern web design to be a bit of a turnoff and a black eye fort the artist, in this field of professional solo web pages.
posted by SaltySalticid at 3:00 PM on November 17, 2018 [2 favorites]
Speaking of fonts, you also seem fond of italics, but they irritate a lot of people and are hard to read.
posted by carmicha at 3:05 PM on November 17, 2018
posted by carmicha at 3:05 PM on November 17, 2018
One thing to keep in mind is that while you, the designer, are going to pour hours and hours of thought and care into this design, users of the site are barely going to give it a glance. They're not there for the design, they're there for the information. So the design should get out of the way and facilitate the accessing of that information. Critical information should jump right off the page as soon as you load the site, and it should be blindingly, face-smackingly obvious how to find the rest of it. Anything distracting, anything that pulls the eye away from the site content, should be toned way down or nixed entirely. The site is not an art installation, it is a vehicle for helping interested parties connect to your sister, and for showcasing her work.
To that end, I personally find Pantone and Wavy much too busy and distracting. I also don't care for Toast, although I'm less sure why exactly—it feels somehow unbalanced to me but I'm not enough of a designer to be able to pinpoint what I think the problem is. Forest I quite like, but I'd go with a different font. Monospaced fonts are ugly and should generally be avoided except in specific technical cases where they are actually necessary.
posted by Anticipation Of A New Lover's Arrival, The at 3:16 PM on November 17, 2018 [8 favorites]
To that end, I personally find Pantone and Wavy much too busy and distracting. I also don't care for Toast, although I'm less sure why exactly—it feels somehow unbalanced to me but I'm not enough of a designer to be able to pinpoint what I think the problem is. Forest I quite like, but I'd go with a different font. Monospaced fonts are ugly and should generally be avoided except in specific technical cases where they are actually necessary.
posted by Anticipation Of A New Lover's Arrival, The at 3:16 PM on November 17, 2018 [8 favorites]
I like Forest best. Definitely modernize the fonts, maybe take away the book part and have her photo and the text element with the drop cap. I like Wavy too, but I'd like to see the number of colors reduced.
Toast and Pantone look very 1997 to me, Toast because of the huge margins on either side and the random icons up top, and Pantone because of the drop shadow around the photo and the outer glow on the navigation elements.
posted by kimberussell at 3:22 PM on November 17, 2018 [2 favorites]
Toast and Pantone look very 1997 to me, Toast because of the huge margins on either side and the random icons up top, and Pantone because of the drop shadow around the photo and the outer glow on the navigation elements.
posted by kimberussell at 3:22 PM on November 17, 2018 [2 favorites]
These are much too busy for a simple author website and all look about a decade or more out of date -- which, depending on your sister's specific sub-field may functionally limit her potential client base. This specific situation is exactly what Squarespace is for; it'll produce a much nicer website for much less time and effort, and you won't be responsible for handling all her support questions. At very least, take a look at other author websites that feature contemporary design and pay close attention to how they organize information. You can successfully have a contemporary website that doesn't look sleekly impersonal. Here's one, another (though it's just an author site, no hire-me self-marketing), and another (small) site. I'll post a few more (& more apropos) examples if I find them.
posted by tapir-whorf at 3:25 PM on November 17, 2018 [14 favorites]
posted by tapir-whorf at 3:25 PM on November 17, 2018 [14 favorites]
"Not a cookie-cutter site" doesn't mean "having nothing in common with the current decade." Those are all very firmly rooted in an antiquated, tumblr-esque central column design aesthetic, and clearly designed for one screen resolution: yours. In order to design, you need to look at design, particularly modern design, across a variety of devices and resolutions and see how it adapts and re-stacks. IMHO, whitespace, big images, and contemporary typography are things you should be building your unique site around.
posted by DarlingBri at 3:34 PM on November 17, 2018 [13 favorites]
posted by DarlingBri at 3:34 PM on November 17, 2018 [13 favorites]
Here are some links to freelance writers that have nice sites:
one
two
three
four
If you agree that this style looks nice and contemporary without being humorless, you'll notice that they all have elements in common: lots of white space, simple menus, and one large graphic that is not a picture of themselves (the author photo goes on the "about" page).
posted by xo at 3:58 PM on November 17, 2018 [3 favorites]
one
two
three
four
If you agree that this style looks nice and contemporary without being humorless, you'll notice that they all have elements in common: lots of white space, simple menus, and one large graphic that is not a picture of themselves (the author photo goes on the "about" page).
posted by xo at 3:58 PM on November 17, 2018 [3 favorites]
You are putting frames and colored boxes around your photos and design elements and underlining text to make those things easier to see. If you need to do that to the key elements to make them stand out then your design isn't focused on the key elements.
That's not a great photo of your sister, it's not properly exposed or posed and the flash makes it look kinda mug shot-ish. I wouldn't make it a key element, maybe just have it on the about page until she can get something better done or just not have a photo. It'll be impossible to look professional if you use that as a key element.
posted by fshgrl at 4:07 PM on November 17, 2018 [1 favorite]
That's not a great photo of your sister, it's not properly exposed or posed and the flash makes it look kinda mug shot-ish. I wouldn't make it a key element, maybe just have it on the about page until she can get something better done or just not have a photo. It'll be impossible to look professional if you use that as a key element.
posted by fshgrl at 4:07 PM on November 17, 2018 [1 favorite]
Best answer: I would love to hear that I seem to consistently do $thing, and instead I should do $otherThing.
Okay, I'm going to give it a shot. I'm going to err on the side of honesty (and accidental harshness).
Imagine you're cooking.
Some dishes are pretty minimal and have main strong elements contrasting against supporting roles, like bruschetta or pulled pork sandwiches: the tomato/onion/basil/balsamic vinegar mix on top of sliced baguette, or pulled pork on top of a roll. The bread is a supporting, texture role. The pulled pork is the star of the show.
Other dishes are compositions -- stews, chilis, etc. In a chili, you put together a lot of different things - beans, ground beef, seasonings, chilis, etc. In a stew, you add broth, veggies, protein, etc. However, everything is there to balance each other out; there's definitely stuff that you wouldn't add in one dish, even if you may add to another.
There's composition and balance. Imagine making a soup where you added things because you enjoyed each individual element -- chicken broth, graham crackers, strawberries, potatoes.. ew! Or a meal where there's no supporting role, only strong flavors -- a dish consisting only of pulled pork, fried chicken, sausage, hot sauce, without any bread, salad, etc.
Graphic design is the same. You need composition and balance. But currently, in many of your graphic layouts, there's 10 things going on at the same time. I'd whittle them down to three and really play off of them.
In pantone, you have three types of text, in three different locations, all roughly at the same size. There's no chance or rhythm or subtlety, because the eye just wanders across all of them. There's a busy background that changes colors and also interferes with the text, necessitating dark borders around each character. There's no space for the eye to breathe. If you drew a line representing the eye's drift around the page, it would ping pong around, and the way in which it wanders wouldn't correspond to any meaning you might wish to convey.
There are also certain techniques or strategies, that, for graphic designers, feel dated. The photograph in Toast was taken with a front flash rather than bounced off the ceiling or something, making her face feel flat, two-dimensional, and disposable camera-esque. The shadow behind her and the shadow of the lined paper feels like a quick photoshop 'outer shadow' filter. The purple lines are so strong that they become distracting, and all in all the skeuomorphic design feels dated in a charming way, like from the early 00s.
One way to iterate is to write down all the elements that you enjoy -- the 'ingredients' in the dish. For each one, there's around 7-10. Can you pick three ingredients and do 20 different iterations on them? For example, could you just take the lined paper and create 20 different versions on it -- find different paper grids, play with opacity, etc?
Every ingredient and every design element is complex and interesting when you really look into it. If you actually go through with the exercise, I guarantee that after the 20th try, your design element will feel very rich and complex, and when you look back on these images, they will feel crammed.
posted by suedehead at 4:57 PM on November 17, 2018 [6 favorites]
Okay, I'm going to give it a shot. I'm going to err on the side of honesty (and accidental harshness).
Imagine you're cooking.
Some dishes are pretty minimal and have main strong elements contrasting against supporting roles, like bruschetta or pulled pork sandwiches: the tomato/onion/basil/balsamic vinegar mix on top of sliced baguette, or pulled pork on top of a roll. The bread is a supporting, texture role. The pulled pork is the star of the show.
Other dishes are compositions -- stews, chilis, etc. In a chili, you put together a lot of different things - beans, ground beef, seasonings, chilis, etc. In a stew, you add broth, veggies, protein, etc. However, everything is there to balance each other out; there's definitely stuff that you wouldn't add in one dish, even if you may add to another.
There's composition and balance. Imagine making a soup where you added things because you enjoyed each individual element -- chicken broth, graham crackers, strawberries, potatoes.. ew! Or a meal where there's no supporting role, only strong flavors -- a dish consisting only of pulled pork, fried chicken, sausage, hot sauce, without any bread, salad, etc.
Graphic design is the same. You need composition and balance. But currently, in many of your graphic layouts, there's 10 things going on at the same time. I'd whittle them down to three and really play off of them.
In pantone, you have three types of text, in three different locations, all roughly at the same size. There's no chance or rhythm or subtlety, because the eye just wanders across all of them. There's a busy background that changes colors and also interferes with the text, necessitating dark borders around each character. There's no space for the eye to breathe. If you drew a line representing the eye's drift around the page, it would ping pong around, and the way in which it wanders wouldn't correspond to any meaning you might wish to convey.
There are also certain techniques or strategies, that, for graphic designers, feel dated. The photograph in Toast was taken with a front flash rather than bounced off the ceiling or something, making her face feel flat, two-dimensional, and disposable camera-esque. The shadow behind her and the shadow of the lined paper feels like a quick photoshop 'outer shadow' filter. The purple lines are so strong that they become distracting, and all in all the skeuomorphic design feels dated in a charming way, like from the early 00s.
One way to iterate is to write down all the elements that you enjoy -- the 'ingredients' in the dish. For each one, there's around 7-10. Can you pick three ingredients and do 20 different iterations on them? For example, could you just take the lined paper and create 20 different versions on it -- find different paper grids, play with opacity, etc?
Every ingredient and every design element is complex and interesting when you really look into it. If you actually go through with the exercise, I guarantee that after the 20th try, your design element will feel very rich and complex, and when you look back on these images, they will feel crammed.
posted by suedehead at 4:57 PM on November 17, 2018 [6 favorites]
As others have said, these designs look dated because they're cluttered and the information feels lost inside it. Think of your design as a system, not just a home page (which right now feels more like a flyer). What you have now is just a starting point. How would you turn it into a system that can respond to all kinds of messaging needs? A template or theme is *exactly* what you need because it's a system that already works. Many of them can be used as a starting point for you to customize further. (Do you really want to spend your time figuring out all the cross-device compatibility?) As a web designer, I usually steer my clients toward templates that I fully customize. It's just not worth my time to do things from scratch anymore when you can get an awesome customizable, responsive template for under $100 these days.
Sometimes when I get stuck, I like to look at sites like Awwwards to get inspired. Keep in mind that just because she doesn't want to use a template, doesn't mean it's time to abandon the most fundamental tool in the toolbox, the grid. You can even filter that site by category, like storytelling. Pay particular attention to the typography and how the most successful marketing sites make use of white space to elevate their messaging.
posted by oxisos at 7:13 PM on November 17, 2018 [4 favorites]
Sometimes when I get stuck, I like to look at sites like Awwwards to get inspired. Keep in mind that just because she doesn't want to use a template, doesn't mean it's time to abandon the most fundamental tool in the toolbox, the grid. You can even filter that site by category, like storytelling. Pay particular attention to the typography and how the most successful marketing sites make use of white space to elevate their messaging.
posted by oxisos at 7:13 PM on November 17, 2018 [4 favorites]
One thing that jumps out to me is the many "contact" options: it's a navbar link and a huge widget, or a giant button... they make the site feel a bit desperately salesy, like she's begging for jobs, which makes her seem less desirable.
I would steer away from big fill-in-the-blanks boxes and big "press this button" design elements on the homepage; they're inelegant.
I think most users expect the "contact" button to be in one of three places: top right corner at the end of the navigation bar, or somewhere along the bottom margin, or low on the right hand side, perhaps grouped with a few social media icons. No need to choose more than one of those options.
I might suggest you put your *not-huge* contact link in one of those three places, and then open the contact form on a separate page.
posted by pseudostrabismus at 12:54 AM on November 18, 2018 [4 favorites]
I would steer away from big fill-in-the-blanks boxes and big "press this button" design elements on the homepage; they're inelegant.
I think most users expect the "contact" button to be in one of three places: top right corner at the end of the navigation bar, or somewhere along the bottom margin, or low on the right hand side, perhaps grouped with a few social media icons. No need to choose more than one of those options.
I might suggest you put your *not-huge* contact link in one of those three places, and then open the contact form on a separate page.
posted by pseudostrabismus at 12:54 AM on November 18, 2018 [4 favorites]
Best answer: A little bit of pushback on a few points here.
Foremost, what is your sister selling? Children's books bear absolutely no relation to compliance. And if you, or she, think it does you have to link it more effectively than you have in the first template. One of the most common errors in Web design is to start with the design, as though it bears no relation to the text at all. This is wrong-headed because the design (imagery, placement, hierarchy) should reinforce the messages of the text, not force it into various configurations to suit itself. So start with a complete script! See what the central themes are (apart from writing). Is she selling her wacky personality (e.g. Toast, Forest, et al.)? Or her immense writing range? Is she including samples of her writing, or is it impossible to link to more than a cover, in the case of books? Should there be separate pages for published works like books, and articles or collateral-type editing samples? It's not clear to me that either of you have thought that through. You should. Now. Before you create a design. Once that's done, let the text lead the design. The end result will be more coherent, and more persuasive.
As for the joys of Squarespace, I've gotta say, having created three sites on it, that unless you really know how to code, it is brutal to work with, and wildly oversold. The four writers linked by xo aren't bad. But there's such a thing as a too-spacious site, which uses too many useless stock photos for no good reason and, by and large, that's Squarespace's specialty.
Yes, the Web is a visual medium. But visuals for the sake of visuals are just a waste of time when someone is selling text, barring the rare few that help create a tone that reinforces the tone of the text. At least one of the sites xo linked is marketing a copywriter. Copywriters work with visuals, often in places like advertising, so this kind of site works for them. Too, all the writers xo linked were savvy enough to shrink their fonts. But right out of the box, Squarespace's fonts are often way too large, and their columns are too wide to be readable. So I'd caution you not to jump on the Squarespace bandwagon, and assume it will solve all your problems. I have yet to see them produce a single template intended for authors. Recently, they've offered jazzy one-pagers for musicians, dogwalkers and such, but their bread and butter are Etsy-type stores, real estate and restaurant menus. This has nothing to do with what you're selling. And unless you really know how to recode existing templates for what you need, good luck to you. Their 24-hour help is, in my experience, a not very merry laugh and a half.
That soapbox aside, the most serious authors I've seen on the Web tend to have white backgrounds, and lists of links. For certain kinds of authors, there will be magazine or book covers included, as well. Simplicity is the name of the game, however. Writing as a profession doesn't illustrate awfully well, which is why you see so many skill icons and reproductions of writing instruments.... On the other hand, toast, unless she's a humor writer seems ... random, you know? I mean, that certainly wouldn't make me hire her.
In terms of your learning curve, you need to pay more attention to hierarchies (signaling what's most important through size or color usage), alignment of elements (how should x image be aligned with y text? and how do these items work with everything else on the page, which sometimes align and sometimes don't. When they don't, why don't they?), white space (as mentioned above) and typography. There's a fab book called the Elements of Typographic Style, which you might find helpful.
One example, which illustrates some of what I'm saying here: On the first design, the illustrated dropcap takes up a lot of visual space. That's why it should always be accompanied by text with bold, small caps, or cap styling immediately thereafterwards — not italics, which is a recessive type style.
Think of it this way: The illustrated dropcap is a black box. That should be followed by another dark thing (bold or some form of caps). Once the first sentence/paragraph recedes then you proceed with normal text (medium dark). if you want to highlight something within that text, use italics (light gray, which stands out only by contrast, but never emphatically). The reason the dropcap functions as a black box is to direct the eye. All of your most important elements should follow the same pattern, and you probably shouldn't have more than, say, three "black box" type elements of importance on the page. If you don't know what I'm talking about, consider an Amazon page, like the one linked above. They are not beautiful pages, I'm not saying that, so don't mimic anything from the design. But they do clearly illustrate their sales priorities by placing the most important items in prominent places and making them big or bold and by making the most important text similarly big or bold, except in cases where text is co-equal, at which point they change color. So don't mimic it, analyze it, and then use what you've learned to analyze your own pages (after the script is done, of course).
Don't despair. If you're interested enough in the subject to do four templates, you'll figure it out. And once you do, it'll just be a matter of practice.
posted by Violet Blue at 7:20 PM on November 18, 2018 [2 favorites]
Foremost, what is your sister selling? Children's books bear absolutely no relation to compliance. And if you, or she, think it does you have to link it more effectively than you have in the first template. One of the most common errors in Web design is to start with the design, as though it bears no relation to the text at all. This is wrong-headed because the design (imagery, placement, hierarchy) should reinforce the messages of the text, not force it into various configurations to suit itself. So start with a complete script! See what the central themes are (apart from writing). Is she selling her wacky personality (e.g. Toast, Forest, et al.)? Or her immense writing range? Is she including samples of her writing, or is it impossible to link to more than a cover, in the case of books? Should there be separate pages for published works like books, and articles or collateral-type editing samples? It's not clear to me that either of you have thought that through. You should. Now. Before you create a design. Once that's done, let the text lead the design. The end result will be more coherent, and more persuasive.
As for the joys of Squarespace, I've gotta say, having created three sites on it, that unless you really know how to code, it is brutal to work with, and wildly oversold. The four writers linked by xo aren't bad. But there's such a thing as a too-spacious site, which uses too many useless stock photos for no good reason and, by and large, that's Squarespace's specialty.
Yes, the Web is a visual medium. But visuals for the sake of visuals are just a waste of time when someone is selling text, barring the rare few that help create a tone that reinforces the tone of the text. At least one of the sites xo linked is marketing a copywriter. Copywriters work with visuals, often in places like advertising, so this kind of site works for them. Too, all the writers xo linked were savvy enough to shrink their fonts. But right out of the box, Squarespace's fonts are often way too large, and their columns are too wide to be readable. So I'd caution you not to jump on the Squarespace bandwagon, and assume it will solve all your problems. I have yet to see them produce a single template intended for authors. Recently, they've offered jazzy one-pagers for musicians, dogwalkers and such, but their bread and butter are Etsy-type stores, real estate and restaurant menus. This has nothing to do with what you're selling. And unless you really know how to recode existing templates for what you need, good luck to you. Their 24-hour help is, in my experience, a not very merry laugh and a half.
That soapbox aside, the most serious authors I've seen on the Web tend to have white backgrounds, and lists of links. For certain kinds of authors, there will be magazine or book covers included, as well. Simplicity is the name of the game, however. Writing as a profession doesn't illustrate awfully well, which is why you see so many skill icons and reproductions of writing instruments.... On the other hand, toast, unless she's a humor writer seems ... random, you know? I mean, that certainly wouldn't make me hire her.
In terms of your learning curve, you need to pay more attention to hierarchies (signaling what's most important through size or color usage), alignment of elements (how should x image be aligned with y text? and how do these items work with everything else on the page, which sometimes align and sometimes don't. When they don't, why don't they?), white space (as mentioned above) and typography. There's a fab book called the Elements of Typographic Style, which you might find helpful.
One example, which illustrates some of what I'm saying here: On the first design, the illustrated dropcap takes up a lot of visual space. That's why it should always be accompanied by text with bold, small caps, or cap styling immediately thereafterwards — not italics, which is a recessive type style.
Think of it this way: The illustrated dropcap is a black box. That should be followed by another dark thing (bold or some form of caps). Once the first sentence/paragraph recedes then you proceed with normal text (medium dark). if you want to highlight something within that text, use italics (light gray, which stands out only by contrast, but never emphatically). The reason the dropcap functions as a black box is to direct the eye. All of your most important elements should follow the same pattern, and you probably shouldn't have more than, say, three "black box" type elements of importance on the page. If you don't know what I'm talking about, consider an Amazon page, like the one linked above. They are not beautiful pages, I'm not saying that, so don't mimic anything from the design. But they do clearly illustrate their sales priorities by placing the most important items in prominent places and making them big or bold and by making the most important text similarly big or bold, except in cases where text is co-equal, at which point they change color. So don't mimic it, analyze it, and then use what you've learned to analyze your own pages (after the script is done, of course).
Don't despair. If you're interested enough in the subject to do four templates, you'll figure it out. And once you do, it'll just be a matter of practice.
posted by Violet Blue at 7:20 PM on November 18, 2018 [2 favorites]
This thread is closed to new comments.
It's hard to tell how far along you are, but here are a few thoughts:
--It may be just be me, but when I see a Courier-like font, as on Forest and Pantone, it looks wrong to me. That's what fonts on pdf files defaults to when it's missing a font. I'd keep it on the title for Pantone, but get rid of it everywhere else.
--The photo on Pantone looks a bit less professional than the one on Forest. I can see the flash, and the photo looks flatter.
--Forest: I love the background photo and the font for Tamra at the very top, as well as the lightening of the photo behind the green bar. I think the book looks nice, along with the initial cap. Fonts should be changed per above. The contact box doesn't quite blend in - it looks like it was dropped in - maybe it needs some trees, or some of the green from the freelance writer bar?
--I don't really know how to comment on Toast. I'm not a fan, but I don't know why. Maybe because it's not obvious what the site is for. There's little indication of writing without reading the blurb. I don't understand what No Fat means. I get that's it's trying to be clever, but it's just not working.
--Pantone could work, though it needs new fonts, and maybe a new photo. The toast in the background doesn't quite read as toast. I think you need to include her name and "freelance writer" on any of these hompages - they need to be easily identified.
--I really like Wavy. I like the colors and the fonts. I'd get "freelance writer" and maybe her name in there as well. My only comment is that the circles for Portfolio/Contact/etc kinda remind me of fallopian tubes. Maybe slide the 'about' over a bit?
posted by hydra77 at 2:45 PM on November 17, 2018