Thoughts on design and copy

[CodeGraphics]

No, [this](https://www.dropbox.com/s/ba5auxixv9zg6b9/logo.jpg “”).

[Alen]

@CodeGraphics you are beyond unprofessional, please stop offering unsolicited services.

[CodeGraphics]

Ok sir.

[NghiQuach]

Since i am a newbie im not sure if I’m in the position to really critique someone elses work, but I think its an amazing homepage.
It has a simple design but some cool little features, mainly I like the Blog animation haha, keeping it simple and having a little flashiness is what I like about it.

The only thing I would say that kinda stands out is what someone said as well that the navigation, and footer are different widths and it looks a bit strange to me.

[Watson90]

@CodeGraphics

– Insults the logo of an aspiring (not professional) designer
– Comes up with his own idea assuming he’s professional
– Looks worse than the original

[CodeGraphics]

@Watson90, you are right.

[chrisburton]

Sorry for the late reply. I’ve been extremely sick the past few days.

I like it, but there is no clear separation of the footer anymore.

Of course there isn’t. I literally removed the backgrounds of the header and footer to show you that it starts too look better without them. I do understand you’re trying to come off as friendly but I think the copy in the footer is a bit childish. I would work on that a bit more. Additionally, the stitches didn’t show separation as you had it. The border just above it did, however.

Also, this is just my personal opinion, what about changing “webdesign” to “work”? This way the length of the character count is closer to the other links.

[croydon86]

wow this thread has come on quite a bit since my first comments. Some good advice here.

Totally agree with comments from @jeager, especially the use of shadow on a flat design.

Trying to maintain a vertical rhythm in responsive design is tricky. I personally use this as a guide to set up my initial baseline but amend it based on how i need the design to work. For example, @chrisburton mentioned the 3 blocks of the text. Although you are following the baseline, visually the measure (width of text block) is too small for this to be ideal line height. As the measure increases or decreases, the line height may need to be amended for best results.

Also remember that vertical rhythm is not just based on line-height. You can always change the line-height and make up the difference in padding/margin. But like I said, maintaining vertical rhythm can be tricky and for me personally, is not my biggest concern. Others may differ.

I do like @chrisburton design. Where before a lot of the elements were fighting for your attention, here the focus is more on the main section. I would run with this theme but do the following….

1) Separate the footer. I’m thinking either a very soft grey background, like #F1F1F1 or leave it white with just a light dashed border, but not as thick as you currently have it, more like 2px width.

2) As mentioned already, line the nav up with the logo so they sit on the same baseline, and separate this off either with the same dashed border (2px) and a lot of white-space, or a dark background-colour like your current design.

I see you have created more spacing around the main copy, which is a big improvement! I would add further spacing above and below the main section (move the 3 text blocks away from the hero section). With this additional spacing around the 3 text blocks, we can maybe explore whether we need those 3 horizontal strokes above the text blocks.

Almost there!

[CrocoDillon]

Updated: http://www.crocodillon.com/ (contact page is there too, but apparently the form doesn’t work yet. I haven’t really worked on low resolution optimizing yet, probably will end up with a collapsing nav)

CodeGraphics, I appreciate the effort but I’m gonna stick with my logo for now.

@NghiQuach, I like the ‘little flashiness’ but some people pointed out I need to showcase my strengths so I might throw in something fancy later on… without overdoing it :)

@chrisburton, wondered where you went, hope you’re feeling better now! I’ve made some of your suggested changes. The copy in the footer, you mean the disclaimer or the whole about CrocoDillon thing? Changed ‘Webdesign’ to ‘Work’, thanks!

@croydon86, Yeah I’m really happy with all the compliments, critiques and suggestions! As for vertical rhythm, for headings I did compensate different line-heights with margin but for text that spans multiple lines that’s harder to do without guessing how many lines you’ll end up with so I decided to forget about it and just reduced the line-height.

I’ve had a friend of mine look at it and she suggested going with a very light color for the footer instead of grey. I went with that for separation. Can make the dashed border white… or remove it, kept it in for now. What do you think?

Nav is on the same baseline as logo and is very minimalistic now. I like it, but I’m thinking about how to improve the hover, pressed and active states.

I didn’t add more space between the main section and the 3 sub sections because I’m thinking of adding some interactivity there (where they are more related to each other, like buttons for a slider). I’ll work out a storyboard and ask for opinions before I start coding it.

More things on ToDo list: “call-to-action” button and logo kerning & icon.

[chrisburton]

Before suggesting any further design and typography ideas I’d like to know why you implemented certain things on the site.

+ Professionally, why “crocodillon” and not your legal name?
+ Why icons in the menu?
+ Why have you chosen Ubuntu as the main and only webfont?
+ Don’t you think that it would be best if you left out the rambling in the footer about your name along with the disclaimer? To me, with high respect to you, it portrays a bit as if you’re a little less professional and more about play.
+ Why the necessity to want to keep the large dashed borders?
+ Have you thought about a different color palette? Something a little less flat to differentiate contrast?

[CrocoDillon]

* I do like a little bit of humor, I have a little game studio that started out as ‘Kinetic Toast Games’ (now it’s called ‘Reptile Games’ though). ‘CrocoDillon’ just appeals to me as it’s a name I’ve been using for over 10 years. People tend to remember it more easily too, I guess because it’s different.
* Because icons make it less boring.
* I picked the font I liked most out of Google Web Fonts and went with it. I’d like a complementing font, maybe for headings, but I’m not good at pairing fonts so skipped that for now.
* Again, the humor… some people like it. I’ll think about changing it though. But I wouldn’t be the only one with a little bit of humor on my otherwise ‘professional’ website though.
* Some people like it, some people don’t. I do like it. What don’t you like about it, the contrast? I could go for white for less contrast. If I remove the dashed border I’m afraid it will be boring.
* Yeah I just used the green and the blue as it is, I was (still am) playing with Color Scheme Designer to get some deviations for contrast.

Keep in mind I’m not a designer. I don’t make justified decisions on a lot of things like you’d probably do, I just try to make it look good to me. Eventually I’d like to learn to make justified decisions… or find some one local to work with me, when that day comes I’ll probably change the name too, to something more professional.

[chrisburton]

Footer paragraph content

I do like a little bit of humor, I have a little game studio that started out as ‘Kinetic Toast Games’ (now it’s called ‘Reptile Games’ though). ‘CrocoDillon’ just appeals to me as it’s a name I’ve been using for over 10 years. People tend to remember it more easily too, I guess because it’s different.

I, just as well, like humor but I just don’t think that content needs to be seen on every page. I think it’s great that you have other passions and hobbies. In fact, I’d even suggest that you create an about page that lists those passions and side projects. Or possibly just rename the contact page to “about” and list those things along with the contact form.

Menu Icons

Because icons make it less boring.

Possibly but they create a distraction.

Typography

I picked the font I liked most out of Google Web Fonts and went with it. I’d like a complementing font, maybe for headings, but I’m not good at pairing fonts so skipped that for now.

You need to test your selections just as you would test your site on multiple platforms and devices. Appearance of the overall face should not be a single factor. Ubuntu isn’t horrible but it has issues.

Footer Disclaimer & Description

Again, the humor… some people like it. I’ll think about changing it though. But I wouldn’t be the only one with a little bit of humor on my otherwise ‘professional’ website though.

Correct, there is nothing wrong with humor. I encourage you to show your personality. But maybe you misunderstood where I was coming from or read into what I said the wrong way? I’m just pointing out that with such little content there should be something more relevant to what your site is actually about.

Contrast

Yeah I just used the green and the blue as it is, I was (still am) playing with Color Scheme Designer to get some deviations for contrast.

I like those two shades of blue, actually. I think the green throws it all off, though. Also, I would set the text in actual black not `#333`.

Keep in mind I’m not a designer.

If developers advocate that designers should learn to code then, the same goes for developers learning some basics of designing. There shouldn’t be a double standard.

I just try to make it look good to me.

It’s about the reader and/or potential client that is reading your content, not you, right? There is research that should go into building websites professionally. Even for designing and setting type on personal sites, users should still be a main priority. Otherwise, what’s the point?

Eventually I’d like to learn to make justified decisions… or find some one local to work with me, when that day comes I’ll probably change the name too, to something more professional.

Wait, you need someone to work alongside you to change the name of the site?

[CodeGraphics]

@chrisburton, you are really a good project reviewer. I am currently putting a portfolio website together. Pls when I am done with it, you will have to help me review it thoroughly. No stone will be left unturned. I will need some harsh truths about the website’s layout, color scheme and typography.
Thank u.

[chrisburton]

@codegraphics Sure. Just tag me when you post your discussion.

[CodeGraphics]

Thik hai.

[Author]

Posts