Stylx

Discussion in 'Creative Corner' started by Ferus, Mar 8, 2013.

Thread Status:
Not open for further replies.
  1. Ferus

    Ferus

    131
    0
    2
    Technically named "Ferus Colour", it was given a pretty name "Stylx".

    It's a profile design for a Roleplaying site that I go to, which I've just finished designing. I plan on coding it in a few minutes, but I wanted to get some feedback on it.

    First, I need to explain a couple points.

    The two "ferus" texts in the banner do NOT appear in the final code. The "ferus" on the right is what appears when you hover over it.

    Two, the three sections entitled "physical", "personal", and "history" do not appear at the same time. When you click on one of the adjacent link, it shows the respective profile in the place where "personal" is currently active.

    Those two parts were all kept separate in the DESIGN, to make it easier to grab images.

    With that explained, here's the print.
    Link!
    [​IMG]
     
    Posted Mar 8, 2013
    #1
  2. Player#1

    Player#1 Member

    734
    112
    7
    It's cool I don't really know the theme your going for but it could use a little more detail and color.
     
    Posted Mar 8, 2013
    #2
  3. Ferus

    Ferus

    131
    0
    2
    I prefer to design simple things, both because I like the style and I'm lazy.

    If you would, where would more detail and color be beneficial? :)
     
    Posted Mar 8, 2013
    #3
  4. I'm getting tired of seing Lobster 1.3 font (Try mision script ;)) but other than that it's pretty cool and clean.
    One thing I would do is align your image with the rest of the box and reduce the space between the title and the rest of the design.
    Nice job !
     
    Posted Mar 8, 2013
    #4
  5. Ferus

    Ferus

    131
    0
    2
    Really? I've never seen anyone use Lobster. x3 I just downloaded it earlier this morning, too. I'll check out another font, and see how they look, but I quite like it.

    As far as alignment issues go, I usually don't bother with that until I'm coding. If I was handing it over to someone else, I would definitely do it, but since I know what I want it isn't really an issue. This isn't the first time I've had this piece of advise though... so maybe there's something to it.

    After checking out what it looked like with less empty space between the banner and the design, I actually do prefer it. Thanks. :)
     
    Posted Mar 8, 2013
    #5
  6. Ferus

    Ferus

    131
    0
    2
    I think this is my fastest coding project, ever. I've finished it already! xD

    HTML:
    <html>
    <head>
    <style media="screen" type="text/css">
    body {
    	background-image:url('images/bannerbg.png'), url('images/background.png');
    	background-repeat:repeat-x,repeat;
    	background-position:top,top;
    }
    #ferus_blogo {
    	position:absolute;
    	top:0;
    	left:42%;
    	height:154px;
    	width:149px;
    }
    #ferus_char {
    	position:absolute;
    	top:200px;
    	left:30px;
    }
    #ferus_links {
    	position:absolute;
    	top: 300px;
    	left: 300px;
    }
    .ferwrap {
    	overflow-y:hidden;
    	height:480px;
    	width:472px;
    	position:absolute;
    	top:225px;
    	left:525px;
    }
    .ferpersonal {
    	overflow:hidden;
    	background-image:url('images/personal_background_top.png'),url('images/personal_background_bottom.png'),url('images/personal_background_middle.png');
    	background-position:top center, bottom center, center center;
    	background-repeat:no-repeat, no-repeat, repeat-y;
    	color:#5067aa;
    	text-shadow:1px 1px 0 #edecec;
    	font-size:14px;
    	padding: 0 10px 21px 10px;
    }
    .ferphysical {
    	overflow:hidden;
    	background-image:url('images/physical_background_top.png'),url('images/physical_background_bottom.png'),url('images/physical_background_middle.png');
    	background-position:top center, bottom center, center center;
    	background-repeat:no-repeat, no-repeat, repeat-y;
    	color:#c04d4d;
    	text-shadow:1px 1px 0 #edecec;
    	font-size:14px;
    	padding: 0 10px 21px 10px;
    }
    .ferhistory {
    	overflow:hidden;
    	background-image:url('images/history_background_top.png'),url('images/history_background_bottom.png'),url('images/history_background_middle.png');
    	background-position:top center, bottom center, center center;
    	background-repeat:no-repeat, no-repeat, repeat-y;
    	color:#4b4b4b;
    	text-shadow:1px 1px 0 #edecec;
    	font-size:14px;
    	padding: 0 10px 21px 10px;
    }
    </style>
    </head>
    <body>
    <a href="#">
    	<div id="ferus_blogo">
    		<img src="images/logo_nohover.png" onmouseover="this.src='images/logo_hover.png'" onmouseout="this.src='images/logo_nohover.png'">
    	</div>
    </a>
    <div id="ferus_char">
    	<img src="images/character.png">
    </div>
    <div id="ferus_links">
    	<a href="#personal">
    		<img src="images/personal_nohover.png" onmouseover="this.src='images/personal_hover.png'" onmouseout="this.src='images/personal_nohover.png'"></a>
    	<br /><br /><br />
    	<a href="#physical">
    		<img src="images/physical_nohover.png" onmouseover="this.src='images/physical_hover.png'" onmouseout="this.src='images/physical_nohover.png'"></a>
    	<br /><br /><br />
    	<a href="#history">
    		<img src="images/history_nohover.png" onmouseover="this.src='images/history_hover.png'" onmouseout="this.src='images/history_nohover.png'"></a>
    </div>
    <div class="ferwrap">
    	<div class="ferpersonal"><a name="personal"> </a>
    <!-- Must contain 27 "lines" of script. Four of these lines are necessary to break the header portion with line-breaks -->
    	</div>
    	<div class="ferphysical"><a name="physical"> </a>
    <!-- Must contain 27 "lines" of script. Four of these lines are necessary to break the header portion with line-breaks -->
    	</div>
    	<div class="ferhistory"><a name="history"> </a>
    <!-- Must contain 27 "lines" of script. Four of these lines are necessary to break the header portion with line-breaks -->
    	</div>
    </div>
    </body>
    </html>
    Granted, there wasn't actually much to code. But, still. x3
     
    Last edited: Mar 8, 2013
    Posted Mar 8, 2013
    #6
  7. When you start using Lobster, you will notice it everywhere. It's a free font so everyone uses it.
    Alignement is a really big part of design, you want the user to navigate flawlessly throughout your design.
    If there's one thing out of place, the eye sees it automatically and it creates a break/pause in the experience.
    It seems absurd but it really makes the difference.
     
    Posted Mar 8, 2013
    #7
Thread Status:
Not open for further replies.