6

I have the following section in our website, and now when I look at it, I feel it looks unprofessional, and a bit unclear.

I tried to break the "How It Works" section into 3, with the second section highlighted only for stylistic purposes (not that it's important than other section).

I figure this site is mainly about design, so I will try to stick to that, but if you feel certain paragraphs could be reworded, kindly advise. enter image description here

If anyone requires additional clarification, let me know!

Thanks for all of the feedback kindly provided, have a look at the revision, and please let me know enter image description here

UPDATE 3 enter image description here

UPDATE 4 enter image description here

UPDATE 5 enter image description here

| improve this question | |
  • The icons you use are a bit small. I might try making them bigger and centering them above or to the left of the lines of text – Zach Saucier Jun 2 '16 at 2:39
  • Thanks for the suggestion. How big should the icon be? Twice the size. 1.5, etc? The icons are already centered could you elaborate on your second point? – jon220 Jun 2 '16 at 13:53
  • 1
    The icons look centered above the text, but the text (and therefore the icons) don't appear to be centered in the boxes. For example, in box 1, the left margin appears wider than the right margin. Also, currently your body text in box 1 is lower than boxes 2 and 3. Aligning the body text would make it much more pleasing to read. – Kaylee Chatham Jun 2 '16 at 15:00
  • 3
    Nooooo. Do not do this to meeeeeee!. My answer now needs a step 4! Do not use the same color for the 3 boxes if you are not using a margin to separate them. – Rafael Jun 2 '16 at 20:42
  • 1
    Is it just me, or does the middle step look smaller than the other two? I know this is an optical illusion based on the colour of the middle box, but worth bearing in mind. – Paul Jun 3 '16 at 14:29
4

Less is more

  • Remove tiny icons from paragraphs.
  • Shorten space between first and second paragraphs in each column (by about half).
  • Remove the color highlight in center column -- If you want to separate by color blocks, use three different colors. But I'd suggest simply using one, and letting white space divide them.

Stay consistent

  • Make headlines similar lengths across columns -- take up one line or two; not both.
  • Make paragraphs similar lengths across columns.
  • Make the numbers inside circles be the same point size as headlines, and probably bold the numbers.
  • Use consistent margins.
  • [Copywriting] Use consistent voice and tone.

Example

Mockup of 3 sections

| improve this answer | |
  • Thanks Paul. I've added a revision in my edited post, let me know what you think! – jon220 Jun 2 '16 at 20:38
  • Hey Paul, i've just notice your example pic and love it. What is the background color you use? – jon220 Jun 3 '16 at 17:42
  • main { background color: #ccc; } – Paul Shryock Jun 3 '16 at 18:09
  • Thanks! Some people think raw gray can be seen as a dull background color, but i think it's fine. Thoughts? – jon220 Jun 3 '16 at 18:21
  • 1
    I just chose a simple gray background for the mockup; I wasn't trying to explicitly suggest that exact background color. But I think we're talking about subjective opinion at this point. A color or shade of gray isn't dull on its own, but various combinations of colors or grays can look boring depending on content and context. If you want to pump some green into that background gray, dial down the red and blue values a little: #caccca. – Paul Shryock Jun 3 '16 at 18:44
3

It looks okay but it doesn't read well at all. I'd like to see a harmonious writing style. Harmony isn't only in the look of the piece. Parallel construction in the writing would help a lot. Some words you use don't exist. Recruitly?

  1. Get recognized as a top developer. (Passive voice. Active voice would be an improvement.) Try "Become recognized." or "Build Recognition."

2, Make Recommendations. (This is active voice beginning with a verb.) Okay as is.

3: Get Paid. (Passive voice, again. Getting something done to you is weaker than taking direct action.) Try something like, "Use Commissions" or "Submit Invoice."

Alignment is crucial. (See insult in my answer immediately above for how slight things can be very noticeable.)

The grid for the head/body copy for the three points is not the same. The body copy starts lower in 1 than it does in 2 and 3 due to the line wrap for the long title in point #1.

In short, strive for consistency throughout the layout.

| improve this answer | |
  • 2
    1: Build Recognition, 2: Recommend Others, 3: Receive Payment – Paul Shryock Jun 2 '16 at 19:56
  • Thanks everyone for your input. I am using the source code pro font aiming to target developers. – jon220 Jun 2 '16 at 20:04
  • I've uploaded an update in my edit post, let me know if you guys are satisfied! – jon220 Jun 2 '16 at 20:37
  • It's making progress. Body copy should be something more readable, like a serif typeface. Use monospace fonts to represent actual code snippets. Also, each section should probably either all be center aligned or left aligned -- unless there's a very good reason to mix them like that. Paragraphs are definitely begging more more side margins. – Paul Shryock Jun 3 '16 at 12:40
2

My 2 cents:

  1. Remove the icons.

  2. That much separation on the paragraphs make them as a two step process each step. 6 in total.

  3. Use a better font.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.