• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Harlequin new site


S

Squiddy

Guest
#4
Your website looks okay. There's nothing that really stands out in either a positive or negative way - as far as the site is concerned, obviously the images stand out but I think that a good design shouldn't have to rely on content to make it look appealing. As is evident on your About Us page which is simply a block of text.

When I read your little slogan: Harlequin Studio, the home of contemporary graphic design and beautiful digital art.

Contemporary and beautiful is not what I'm thinking when I look at your site, no offence, especially for someone promoting themselves as a graphic designer. I realise you're not a web designer but creativity is a key part of any form of graphic design and you should be able to give your website a little something to make it impress your potential clients who will be judging you on what they see - as you should expect!

Your logo looks a little outdated if I'm honest. The jagged edges on the text aren't doing you any favours and the diamonds, although relevant to the name of your company, feel like they've just been randomly placed without any thought. I don't hate it, I actually think you've got a great concept there, I just think execution of that particular concept is off. Take to the pen(cil) and paper and try coming up with some similar yet distinguishable alternatives. I'd definitely stick with that font though, or one similar, that was a good choice.

I don't doubt your artistic ability at all, from what I can see on your website you are clearly good at what you do, but that website isn't working for me as a fellow graphic designer I'm afraid.
 
S

Squiddy

Guest
#6
Much better, however, the tag line needs work. Try to avoid web standard fonts when designing logos and come up with a more creative way of maintaining the rectangular shape of the logo. You might want to try simply increasing the tracking between each letter and losing the black rectangle. Also, it might look better with an ampersand instead of the word "AND".

If you want to add colour, you might be best sticking with black as your primary for the text "HARLEQUIN" and a secondary colour which contrasts heavily with the black for the middle section of the jesters hat.

Have a play, see what you can do :)
 

Rhonda

Senior Member
#7
Easy navigation, everything seems to the point, and not ambiguous, this portfolio site is great:) However its just my feeling but I like that Logo for "Harlequin Studio", with the little diamond shapes a bit more than the black and white one, because it has a splash of blue (my favorite color) and personally the font is more appealing to me.

But i agree, a small bit of color would be good for the black n white logo. IMO red would compliment that ivory/bone color that you have for the background field.
 
#8
thanks guys for the feedback, been massive busy this week in my other job so havnt had a chance to do much. does anyone know how to change the title colour on my pages in the CSS i cant seem to find it at all. Its wordpress based and the css is below:

*/
* {
margin: 0;
padding: 0;
}

body {
font-family: arial, georgia, 'times new roman';
font-size: 15px;
background-color: #f1f0e9;
}

img {
border: none;
}

p {
margin: 10px 0;
}

a {
color: #494949;
text-decoration: none;
}

#main_container {
width: 876px;
margin: 0 auto;
padding: 0 12px;
background-color: #fff;
}

#header_container {
width: 876px;
}

#top_menu_container {
font-size: 12px;
font-weight:normal;
margin-top: 10px;
float:right;
}

#top_menu_container ul {
width: 700px;
}

#top_menu_container ul li {
background: no-repeat;
background-position: top right;
display: inline;
border-bottom: 1px dotted #494949;
margin: 0 20px;
}

#top_menu_container ul li a {
background: no-repeat;
background-position: top right;
padding-right: 50px;

}

#top_menu_container ul li a:hover {
background: #ccc no-repeat;
background-position: top right;
}

#content_container {
width: 876px;
padding-top: 10px;
padding-bottom:15px;
}

.featured_right {
float:left;
width: 865px;
height: 405px;
padding-left:5px;
}

.featured_right img {
width: 865px;
height: 405px;
}

.featured_right_single {
float:left;
width: 865px;
}



.featured_left h3 {
font-size: 24px;
padding-bottom: 20px;
border-bottom: 1px solid #494949;
font-weight: normal;
}

.featured_left ul {
list-style-type: none;
}

.featured_left ul li {
border-bottom: 1px solid #494949;
padding: 2px 0;
}

.featured_left ul li:hover {
background-color: #FFE500;
}

.featured_left ul li a {
padding: 2px 0 2px 5px;
}

.featured_left ul li a:hover {
background-color: #FFE500;
width: 100%;
}

.mid_content {
margin-top: 30px;
height: 25px;
padding: 10px 0;
border-top: 1px solid #494949;
border-bottom: 1px solid #494949;
}

.mid_content ul {
list-style-type: none;
float:left;
}

.mid_content ul li {
display: inline;
padding: 0 20px;
border-right: 1px solid #494949;
}



.featured_title {
color:#494949;
padding: 10px 0;
border-top: 1px dotted #494949;
border-bottom: 1px dotted #494949;
font-size: 15px;
font-weight: bold;
text-align:center;
}

.featured_work_container {
width: 876px;
padding: 15px 0;
}



.featured_box {
width: 200px;
margin-left: 16px;
float:left;
}

.featured_box h3 {
font-size: 11px;
}



.featured_box h3 a:hover {
color: #7d7d7d;
}


.featured_box img {
width: 200px;
height: 120px;
padding: 5px 0px 15px 0px;
}

.find_out_more {
border-bottom: 1px solid #fff;
margin-top: 5px;
}

.port_box {
width: 340px;
float: left;
margin-right: 80px;
margin-bottom: 30px;
font-weight: bold;
}

.port_box img {
width: 340px;
height: 210px;
margin-bottom: 10px;
}

.port_title {
font-size: 24px;
padding-bottom: 10px;
border-bottom: 1px solid #494949;
margin-bottom: 10px;
}

#footer {
width: 876px;
border-top: 1px dotted #494949;
border-bottom: 1px dotted #494949;
padding: 5px 0;
text-align: center;
font-size: 10px;
margin-top: 0px;
}
any ideas would be amazing
 
S

Squiddy

Guest
#9
Add the following to your CSS:

.featured_box h3 a {
color: #FF0080; <!-- Header Colour -->
}

You also need to remove your second <head> section:

//<![CDATA[
var screen_res = "1920 x 1200";
//]]>

</script>
</head>
<body>
<head>
<title>Harlequin Studio</title>

<meta name="description" content="Harlequin Studio is the home of contemporary graphic design and beautiful digital art. Focused on turning your ideas into reality. Bringing your identity and values to life with logos, flyers, brochures, business cards and much much more." />

<meta name="keywords" content="Harlequin, Studio, Graphic, Art, Design, Digital, logo, Flyers, Brochures, Business, Cards" />
<meta name="robots" content="index, follow" />
</head>

<div id="main_container">



This should be:

---------------------------------------------------------------------------------------------------------------------

//<![CDATA[
var screen_res = "1920 x 1200";
//]]>

</script>

<title>Harlequin Studio</title>
<meta name="description" content="Harlequin Studio is the home of contemporary graphic design and beautiful digital art. Focused on turning your ideas into reality. Bringing your identity and values to life with logos, flyers, brochures, business cards and much much more." />

<meta name="keywords" content="Harlequin, Studio, Graphic, Art, Design, Digital, logo, Flyers, Brochures, Business, Cards" />
<meta name="robots" content="index, follow" />

</head>
<body>

<div id="main_container">

---------------------------------------------------------------------------------------------------------------------

If you want to change the hover colour of the titles then you need to edit this piece of code:

.featured_box h3 a:hover {
color: #7d7d7d;
}

Good luck with your website :)
 
S

Squiddy

Guest
#11
Oh right, you mean navigation links.

The problem you have is that the way it's been coded is that every single link on your page has been styled via the 'a' attribute so you're going to need to target individual classes if you want to change any link colours individually. So you won't be able to find any pre-existing code to alter, you'll need to add some code each time you want to change the style of a link.

All you need to add is:

#top_menu_container li a {
color: #FF0080; <!-- Navigation Link Colour -->
}
 
S

Squiddy

Guest
#13
I'm going to start charging you in a minute. ;)

h1 { color: #FF0080; }

You also need to remove the double head section from every other page you have.