So no simple layout this week, but I thought I might start showing some goodies which I have in many of my designs which some of you might be wondering how it is done, and how you too can put it into your page.

So while if you are following the tutorials for the quick and easy HTML lessons which make no sense but somehow you have been learning from them, then you will have to wait a week for the simple layout tutorial, but for now if you are a little bit ahead of the class, we will learn how to do the coloured categories.

So I think it should be noted firstly before we go all crazy with the design and code of things, you will need the following in your functions.php

function category_id_class($classes) {

global $post;

foreach((get_the_category($post->ID)) as $category)

$classes[] = $category->category_nicename;

return $classes;

}

add_filter(‘post_class’, ‘category_id_class’);

add_filter(‘body_class’, ‘category_id_class’);

So what this does it identifies what the category slug is then gives it an id which allows us to retrieve it using CSS and of course HTML and be able to customize the end product.

Now I have been using this as a technique to get the categories ID to give it a different appearance for posts depending on the categories. However it can be used for many other things. If you use it for something different, I would like to see what your take was on it.

Now in the index.php or home.php or whatever section your posts are generated in I’ve got:

<div class=”title-<?php the_ID(); ?>” <?php post_class(category-X); ?>></div>

Per element which uses this technique. With title in this case been what the base ID of the element is called. I use it for it is easier for naming conventions, however if you want you can just have the class as the category. Also I’m not too sure what the other PHP does, I think it calls the function. It’s been awhile since I initially used this technique, so I’m not too sure what it does. If any readers stumble upon what it does, or if it’s part of something else, just let me know in the comments section.

Now for the title section I have the following CSS tag.

.CATEGORYNAMEHERE{

}

If you wish you can add a range of elements such as background colour, padding, font, essentially the usual suspects.

Also remember to define the hyperlinks in the CSS at some stage as well.

Last week you learned, pretty much nothing. We went through how to make a basic html page and put bold, italic and underlined text in. Nothing amazing, but hopefully this week starts to change that.

Remember to follow along in a notepad document if you want to learn a few basic tricks, or just read on if you want to brush up on some techniques. I know these days most things are covered by your fancy CMS. But I want to teach the art.

I think the best thing to do is first up learn how to make a simple block quote. Now if you’re like me, you have been calling them backquotes all this time and wondering while your CSS isn’t applying.

<blockquote>This will be a blockquote</blockquote>

So what does a block quote do? Well it automatically gives the content section a little bit more padding and moves it towards the right a bit. These are perfect for quoting someone on your blog or using them for other purposes.

So now we are going to use CSS for the first time. I made a little side not in last week’s tutorial, which gives you the basics of setting up the tag section which you can put in your CSS code.

So what do we want to do for a block quote? Well that is simple.

Because it isn’t a class (which is a dot before the word), or an ID (which is a # before a word) or any of those other things, but it’s a tag, it doesn’t need anything complicated surrounding it.

So first up we need to figure out how to do the HTML tag side of things.

blockquote{

this is where the good stuff goes

}

So that is the basis of the CSS section. Now what is that good stuff I speak off?

Well I’m going to dig up the CSS for the exact blockquote frame which I am using on this site here, and give you a run down on some of the simple things you can add to this CSS element.

blockquote{

padding:5px;

background-color:#fff;

border:1px solid #f1f1f1;

color:#7c7c7c;

}

As you can see I’ve given the element just a bit more padding around the text, a background colour of white (which is the #fff) and a border around the element which is just a little bit darker (to give a blurry illusion). I’ve also customized the font colour to a dark grey. Which gives the element just a little bit more definition then the rest of the site.

I promised tables didn’t I in my cryptic riddle last week. Well tables are a little bit easier than the rest. A simple table would look like:

<table>

<td>

<tr>lol</tr>

<tr>lol</tr>

</td>

</table>

So I think I made a table with two rows and only one vertical row? I think hold on. *injects HTML to remember* (hey don’t laugh I’m writing this stuff off from memory).

Yes that is exactly what I’ve done. Which leaving it like it is, is a good learning tool for you to figure out how to add more vertical rows into it. So I’ll discuss what we have html wise.

We have a table tag, which identifies that the following code is for a table, which we put in a <tr> tag which gives it a row and the <td> which gives it a vertical row. So by having the <tr> inside the <td> it basically says that this row is part of this horizontal column. I think that works? Yeah.

So lucky for you I have the whole CSS thing for tables down pat as well.

table{

width:90%;

margin-left:auto;

margin-right:auto;

}

So the table itself in this example I’ve shrunk it down so it fits on 90% of the allowable space, with it of course centred using the margin tags.

td, tr{

background-color:#e5e5e5;

color:#2d2d2d;

padding:5px;

}

I’ve also given the td and tr tags the same design here by giving it a grey background and text, as well as a bit more padding.

Over the course of these tutorials we will learn more CSS definitions which can be applied with these elements we have learned today.

Last but not least, is HTML for a list.

And of course its CSS but we will get to that later.

Now lists are a handy thing to have in your head. For the simple fact is many people use them for making navigation. Due to how diverse the list tags are for styling and functionality.

But today we are just going to do a basic list.

<list>

<ul>

<li>lol</li>

<li>lol</li>

</ul>

</list>

So from my understanding the <ul> identifies it as an un ordered list. Which is good for navigation. I don’t think you see many people using the numbered lists. Of course this also has you putting in the usual tag to identify what the element is, in this case a list. Oh and clearly the <li> is the list itself

I think you are slowly figuring out what the CSS will be. You will have a ul version and li version of course. With the ability to define stuff such as padding etc. for each and the list-style which can allow you to have no style, squares etc. So a pretty handy element for you to learn.

Next week we look at making a simple layout. Which we will use these elements in a more logical way which might teach you something. Then we week after if your good, we look into how to make that simple layout into a WordPress layout.

I’m going to do a bunch of quick and small tutorials and back log my blog with them so it looks like theirs content appearing even when I’m not bothering to do anything. Genius isn’t it? (Or maybe I’ll end up writing them all on the day instead…mmm…or not finishing the series of articles).

So first up is a quick and dirty look at some of the very basic HTML tags and the alike. You know the stuff you would get sick of me telling you because you have picked it up, or at least the idea of how they work from the many years of using forums with their BB Code.

Or maybe you just looked these up on W3 Schools and await real tutorials from me, either one is good. But they don’t have unimpressive dull commentary to go with each of their examples, no do they? That is why you are here.

So first up is you got an idea to make a video game blog because you decided you just wanted too, so you got some web hosting, and you wanted to make a lovely splash page while you figure out how to install WordPress.

Well what do you do to make this awesome splash page? Splash it with some bold, italic and maybe some of that underline stuff you hear so much of.

So how do you do said things? Well that is simple, but first we must give you a little bit of knowledge in how HTML tags work.

You see there’s this awesome thing called an opening tag. That usually declares what you want to do, and of course sets it on the way to ruining the rest of the page if you don’t use our new friend the closing tag.

The closing tag allows you to close off the tag you just placed, in this case it’s going to be some lovely bold and italics, also that other thing, underlining.

I recommend you load up a notepad document (and of course save it as something like index.html so you can view in your preferred Internet Browser) and follow along, even if you find it basic, or get lost, the ability to manipulate what you think I’ve said and interpret it, even into a mess, will be what gets you learning.

So first up Bold.

<b>The tags on either side, make this bold.</b>

Second Italics

<I>The tags on either side, make this italic.</I>

Lastly Underline

<u>The tags on either side, make this underlined.</u>

If you are following along, if you now open up your notepad document (or maybe your using something more fun like Dream weather) in your browser, you will see that hopefully all these are what they say they should be. The only problem is they will be aligned all in one row with no spaces between them.

You can do either one of the following two things to solve that. You can make a paragraph, or you can put in a pause break. Which will skip a line and put the content after that on the next line. Or maybe you want to use a mixture of both?

So the tags for those are as follows:

Paragraph:

<p>This will be a paragraph.</p>

Break:

This will be on one line. <br>

While this will be on the following.

Note you can either use the break tag like above or use it like the following. Depending on how strict you are coding and if you are using XTML instead, you might want to use this example.

This will be on one line. <br />

While this will be on the following.

So that is all well and good, but what if you want to set up a proper HTML page (which you should instead of putting it into a notepad document like we have been so far).

Well there are some simple things to get this done. First keep what you have already done if you are following around, but leave it on the bottom of the page or on another document for now. We will want to copy that into a certain area soon.

You will want to put in a HTML, HEAD, TITLE and BODY tag. In the following order. Keeping in mind to have the title inside the head, and closed off before the body begins with the HTML tag wrapping all of the document.

Now you will want to put the content you have been making in between the body tags. You can also name the website in between the title tags.

Here is an example of what you might have code wise at the end of this customization:

<html>

<head>

<title>Example Title</title>

</head>

<body>

<p>

<b>This is bold</b>

</p>

</body>

</html>

Another tag which goes in the head of the document is the STYLE tag. This allows us to use cascading style sheets, which allows further customization of the page. We will go into further detail on how to customize these in a later tutorial.

Next week I get you guys onto the magical world of tables. Remember to do your homework because there will be a list of things to do, so don’t block quote me on that. (If you didn’t get that, I’ll show you how to do HTML Tables, Lists and Block quotes then stylise them in CSS).

I never really used much of the original MySpace, while I did have an account the most popular social network in my friends circle was Bebo. Pretty much everyone in Australia had a Bebo account instead of MySpace or Facebook. Which at the time Facebook was only just emerging and I felt even then it was the better option out of all three. Personally I think the more the social network limits user manipulation of the UI the better it is. Man there was some god awful MySpace pages. I like the idea in principle, but from a designing standpoint it isn’t very professional for one to have it go as over the top as MySpace did back then.

But on the same time it seems we have moved back to this customization which MySpace offered. But at least the general structure is more consistent over the rest of the social networking site. Sites like Twitter, Facebook, Bebo if it is still around, they all do it. Even Youtube. The emphasis on design and personality is slowly integrating its way into the social media world.

I’ve talked about social networking in the past. From my general outlook that all social network sites have become essentially the same site and they need to evolve to praising the evolution of the internet but not MySpace. Finally of course the big article itself on MySpace and how I felt it should have been propelled in its final years.

You see previously went it was bought out, pretty much everyone thought it was going to be scrapped for parts. Well while there isn’t many parts it has, you know what I mean though, no one thought at least if it did come back the push wouldn’t be as interesting as what has appeared recently.

This week the new MySpace has been revealed, in a short video presentation which overlooks the various social aspects of MySpace.

A few people comment that the MySpace brand is essentially trashed. In my mind I don’t think so. MySpace might have been trash years ago when Facebook was emerging into the field, but the brand has had enough cool down time for it to possibly seem edgy to the younger audience who didn’t even get the chance to figure out what MySpace was yet. This is what I think they should be aiming for as a primary or secondary target audience. Mainly because by drawing in the teenagers, there will be enough push from them to bring up the numbers, and primary what kids use end up been used by their parents, who in return end up getting it used by the grandparents. Marketing needs to be edgy enough to attack teenagers, but not to extreme as to damage the image of it to older people. Casuals don’t know what MySpace is either. Facebook for them is the only thing which has existed, because it’s the only thing which has had enough penetration to grasp even Nan and Pop.

Which means the brand isn’t damaged. It can have the chance to grown. From looking at it in this angle, MySpace is the easiest rebrand and reboot possible. Damage control only needs to be done to the internet savey who were around for the MySpace era, and I think the product should sway them more. As well as if Grandma wants to start sharing music she’s listing to and pictures on MySpace instead of Facebook that would really put a spanner in the works.

What I like about this reboot is it seems to be drastically different from Facebook, when it introduces new features and ways to present the information. While at the same time been as simular as possible. Google Plus and even Diaspora and the issues which for the most part they were identical to each other and for the most part they were also trying to get in front of Facebook by using the same tricks Facebook has. The only thing drastically different was the sharing groups for contacts they had, which seems to have been copied over in some fashion to Facebook. Because there wasn’t much else to appeal to the consumer which is new, the services fizzled as Facebook only grew stronger. What’s that the most advertised fancy new feature is now in Facebook? Why would we want to even switch to Google Plus?

I think if this new MySpace can start pulling in the numbers, and it appears they want to continue to slightly align their services with music and other creative aspects like they used to. Then if this takes off to any degree, then Facebook has a competitor at last in the same social network field as it. Which once that happens, then maybe we will start seeing change, on both sides of the coin and even newcomers.

It seems for a while now there’s been a new website each year from me, however none of these websites are known to the public nor do they care. The first of these websites was The Chip Behind the Idea, the first of many to come over the years. The websites original concept was based around interviewing game developers and focusing more and design rather than marketing their next block buster title.

I made a few layouts for The Chip Behind the Idea, and I do say I didn’t hate them, but design wise they didn’t hit the mark. However nothing else really was made for the website, no interviews were conducted etc. So I changed the concept slightly and introduced editorials which the few which I did write becoming key posts on Trinest Talks (then Trinest.com) once it was rebooted during that year.

I’ve talked about The Chip Behind the Idea previously, so I won’t talk too much about the idea. Instead I’ll move on to talk about Revival Masters, the next in the series of websites which I will talk about today.

Revival Masters is a more resent website idea, one which I started this year. Its concept was simple, to post ideas we had for some more interesting IPs which have long since been abandoned by their developers. Yes I mentioned a “we” there, this is one of the first sites in a long time I got some extra help on board.

Revival Masters was helped by another fellow who has the same name as me, who was more into drawing various stuff. He created some artwork which I used throughout the design. I used some of the artwork in the header which was alongside a logo which was just at the end of the day generic text. Designed to look blocky.

Revival Masters current articles features an overview of the pitch, a discussion write up and of course some random artwork the other guy made. The problem stemming more from the focus and dedication to the site been weak by both of us at times, and when strong- not enough to kick start the fire burning.

I’m not sure if Revival Masters will ever get a fresh flow of content again (err…I’m not going to use the word revive), so for now I’m considering the project disbanded on a long hiatus, which means time for a new website and that website is Seeds of Games.

Seeds of Games continues the long line of titles which try and make you think and be inspiring and all that. The Chip Behind the Idea had a concept logo which included a computer chip inside a brain, trying to give a context that the game idea had come from a computer chip inside a guys brain. You know that kind of deep meaning to a name not “generic game name X”, and if I do have to say something about my continued but failing expeditions into webmastering over these years is that these websites have the most unique and funky names ever, and that is something I can be proud of.

Seeds of Games isn’t as deep as The Chip Behind the Idea, but the name does have a kind of “game ideas a growing out of the soil and the logo shows an old Atari game stick”. Take that as you will about any future success from the project.

For now I will not talk about designing Seeds of Games or Revival Masters, however I wish to return to talk about the design stages of the website.

A quick mention for the logo, I went through a few ideas, and I was almost settled on one simular to the current logo. The only difference was the seed was more seed shape. As in it wasn’t a circle (well seeds can be circles, but yeah). I looked at it long and hard, and at the end of the day I had to change it to a circle the same size as the other circle. Oh and you know, because I used circles throughout the logo.

…however on our terms.

The evolution of computers will be what decides the fate of the internet, not laws and regulations. The natural progress of computers will force the internet to change as years go on.

The future of the internet is here now, not on desktop computers but on mobile devices. With the internet icon on smart phones hardly used, what is killing the older type of internet we used to know well?

The simple answer is apps.

Apps are changing the way we use and interact with data. Websites will disappear over the years and instead offer users applications which relate to their website. These applications offer the user an integrated hub which would once be considered a single website, or multiple networked websites. The ability to merge knowledge and other information into a streamlined application which users can access the information at a touch of the finger instead of endless navigation is the future.

Devices will appear over the years which integrate the internet and applications more smartly. The ability to wake up and see information such as weather, missed calls/messages, and news of the day from various sources will be what powers the change in the way the internet is used. As we move away from websites to applications to deliver our information, the internet will change as more devices adapt this way of thinking.

It is already happening now to a degree on desktop computers, with Internet Explore allowing websites to be pinned as shortcuts onto the computers start menus and task bars. Essentially becoming an application of sorts.

It is only when this application based system offers the worldwide freedom and accessibility of information will this be the normal way of interacting with the internet. With many application based services been limited to specific regions and many locations around the world without substitutes to these services. Until a user can access an application service from anywhere in the world and have the same freedom and accessibility as someone in the applications parent nation, this application based internet world will be a distant vision not a current present.

The idea will also remain a distant vision while the current restrictions and processes to develop applications for a range of devices are in place. Especially when the application is free and basic. The ability to create shouldn’t be limited by technical knowhow like developing websites have become. With many resources available to webmasters of any skill level to develop a website, the same needs to exist for application websites.

So the past week I’ve been playing around with a brand new web site layout for Trinest.com, while I was doing that I was also thinking the name “trinest.com” is just a little bit tacky for some parts. So while the site is still located at trinest.com, I wanted to bring a fresh new name and identity to the site so it’s been rebranded as Trinest Talks.

Trinest Talks has flattened the layout, removed the article images and made it “metro inspired”. The layout might look a bit flat right now, or boring- but remember what happened over the years of the previous layout series. It went from been colour wise a mess, to a lightened up amazing layout which had been used on the site over the past few years.

The new layout dubbed Trinest Talks 1.0, went through a few revisions before it became what you see today here on Trinest Talks. Because I like the ability to look back at previous layouts which I’ve made, I’ve uploaded a few development samples. You will notice that most of them have the header on it (which came quite late in the development) and the footer also appears in one of them.

The main problem has always been the content area, which even went through a few revisions before the ones you see uploaded. The original idea was to have an image which has a drop shadow on the bottom which contains the title as well as post information. The image would be related to the category which the article was posted in. I felt it was an easy revolution from the previous article images, however it didn’t turn out that way. The text never felt right, and even when I got it to a stage I was happy with it, it just didn’t feel all that good. I removed the whole image idea and tried out a few other ideas based on the category colours.

The best part about the resent layouts I’ve made have been the development which occurs to the design after it has been put on the website. While this new layout might not be 100% perfect, over the time it is online it will slowly be fleshed out as tweaks and ideas to improve the layout happen. Code changes also were a common change and will continue to be, this layout isn’t coded 100% either and there are a few things I can easily change to it to make it work much better. For the most part that is as simple as converting the navigation from a simple link to using a list based system. The code itself has also changed slightly through development before it was live, with unnecessary div tags removed before it was put live.

Trinest Talks 0.4

Trinest Talks 0.5

Trinest Talks 0.6

Trinest Talks 1.0

Todays site histories is a very special one. Because it goes back a few years and yet doesn’t involve a hundred designs. Yes this Site History update is about the most resent layouts. Which means something very special to viewers out there, you get to see were the most resent layout came from.

Only within the hour did I finish the final update to the 2012 Trinest.com design, you see I started updating it at the beginning of the month. I cleaned up the blog posts by removing their titles and making the blog post image the key identifier of the posts. I also moved the post information such as when it was posted and the category as well as comments to the bottom of the post to tidy it up a little more.

I was in a web design mood tonight and it shows. So many changes from the 2011 design to the 2012 design which clean the overall look up, as well as making it more user friendly. Which has been the primary goal of the previous layouts to make Trinest.com more simple in design, as well as user friendly and keeping that trademark green you know me for in all my designs.

While the underlying code is much more messy, the overall site is much more cleaner. For example with the header, it probably wasn’t the most efficient way to make it so each element had a different colour- however it works, and that is the primary thing right now.

The footer is also a lot more green. However that is a different story, but still the same goal and outcome as the rest of the design. It has let itself go in a way, however at the same time the layout has lost a few pounds.

Moving back to the primary layout of 2011, you can tell there is an evolutionary path starting. You can notice for one the footer is more consecrated to the one area. In fact the whole layout is more consecrated. The major change in the 2012 layout was that the navigation and footer both have a fluid background behind them which makes the overall section of those two elements much bigger and bolder in the layout. The general blog post sections are overall the same style (however they have a title and all the information is at the top of the posts not the bottom). The content section does have an extra frame around it with styling. As well as the navigation having a similar style to previous layouts in this “series”, it also uses 1px borders instead of 5px.

I’m a little bit tried, so what I want to dig up as well as talk about is limited. However the next design is well known as the layout which I’ve used for quite some time, in fact it was still up this morning. What I’m talking about of course is the layout on old.trinest, the layout which was used before I decided to clean up the articles the site has and remove ones which are just not up to scratch or which were just quite embarrassing to have up full stop.

You can tell the layout was the influence for the 2011 design as well as this new 2012 design, and quite possibly designs to come. It’s overall structure is quite similar to the 2011 design. You can tell it uses the same green as what both layouts which came after it use. However its problem is with the grays, it uses the grays from the “Summer” Beta layout, which I’ve previously talked about. For those who don’t know the Summer Beta Layout wasn’t made in summer, it was made in June/July/August or what ever. Essentially Summer if you live up north, however down in the southern island it just isn’t like that here. However that does mean I’ve further made a connection to this series to a previous series of layouts, which means that the layouts which has been around in the past few years have strick ties to each other and forever grow as the years go on.

Back to the 2010 layout, its major problem was like I said the gray. Which is quite dark, you will notice that in the 2011 and 2012 layouts, this problem has slowly disappeared as the grays have been tinkered with to make the design much nicer on the eyes.

It’s footer and content sections are also quite different. The footer is once again from a previous layout, with the content sections been a brand new feature (curved edges I didn’t use much back then etc.) which did look nice, but as a full green section it doesn’t really feel nice.

The 2010 layout was a complete recode from the previous layouts, and the 2011 was also a complete recode from the 2010 layout. However the 2012 layout uses the base layout of the 2011 design with just added code and functions for what was changed in the design.

Who knows what the next years will bring on Trinest.com when it comes to design. Right now it seems there are no longer periods of a new layout each week, the designs while they have always been unique and nice, are becoming useable and magnificent.

2010 Design Nov 2010 – Early 2011

2011 Design 2011 – 2012

2012 Design 29th January 2012 Onwards

The designs which I’m going to talk about today are from Trinest.com, however are varied in what they represent and the years they were used. Today I’m going to talk about seven designs from the period of 2009 to 2010, and a little treat that some of them include development versions so you can see where they came from and where they lead to.

The first design is called in its archived form “April_Social_Article_TriProng” and it is from 2009. From the name it is given in the design archives I have you can tell that this little gem is from April 2009, however like all my designs could possibly be earlier.

So what does TriProng offer the average user? I was going to say nothing, but then I clicked on the archive and remembered that design TriProng is. I’m quite proud of TriProng, it is based around three colours Red, Blue and you guessed it- Green. So what does this RBG style design offer the average user? Well it is a quite well designed layout which features a right navigation. The main navigation is designed using a font I made using a free font maker as well as having little pictures above the text to give the user a simple idea of what the sections are about. One of my most proudest features in this design is the header. I’ve used this style in a few other designs around the time and what it is, is a picture I took with a camera with no Photoshop or any other artificial modification the header is drawn on a piece of paper with some textual differentiation to make it stand out. Such as a pen cap thrown across the top of the logo, or another main feature in this header a prominent shot of my hand.

Scrolling down the bottom to the footer I show off Facebook, Orkurt and WordPress links. The rest of the design isn’t as eye catching as the header or the side colour sections but still engolths the user quite well compared to other designs I had made from that era.

Moving on the next design is from some time in 2009 which devotes itself to 6 years of Trinest based websites. Well it says 7- but that is a lie because I can’t count. The design is quite green, and the pallet is a forest green instead of lime. The key feature for the design would be the navigation which is quite stylish in its own right. The design also features an array of sprites I have made over the years which represent “trinest”.

I’m going to move on once more to another design which is from early 2009 as well. However this design is quite disgusting in colour and appearance. It does however feature sprites and a nice header which is ruined by Photoshop effects.

The key design in this next section of layouts is from 2010, moving away from the previous year and grasping at straws to keep viewers to the site. The new layout has punk and dims the lime to an interesting shade of green. I like this early 2010 layout for a few reasons, but most of all because it is simple without been complicated. The key layout also ended up changing a few times as well, with the May revision showing an updated footer, and the “df” version showing a more development version of the layout with various things such as news sections been tested.

I would talk more about that design, but I won’t- layouts which I have done well seem to have that effect as there isn’t much to talk about how they went wrong like the next layout. This layout is from a series of layouts which slowly morphed into this layout. Also if you think this layout is bad, then the original design for this is much worse. I think the only good thing about this layout is the background as well as the elements which have been used from other designs, outside of that it has issues such as consistency in colours and general overall feel. Also a main problem is the overuse of shadows on the text and the general darkness of the header which clashes with the light overall appearance of the design.

Once again from early 2010 is another series of layouts which also use bases of the previous layout discussed (or lead to that layout using things from this layout, it is quite confusing to figure out where half these designs were made during the year). If you look that this layout the middle bit is quite nice, it dims the background and overall is quite easy to read and look at. However the header is a bit ugly and the footer also isn’t a site to behold. So in the “Remake” version of the design you will notice it goes from ugly to lovely with a header and footer with a similar style which is transparent to the background. The navigation also has more class and looks smooth alongside the main content area.

Moving on once more to the final design series for today, a design which rolled out around July and August and lead to the slow evolution and devolution as well as the eventual revolution which became the 2011 designs. It is quite stylish and the only fault I could find is maybe the grey colours could be a little lighter or differenciant differently. The only difference between the original and final version is a slight upgrade in various HTML calls the design supports as well as a modification of the “header” image. It would have to be one of my favourite designs I have made, outside of TriProng and well of course the current 2011 theme.

While there are many more designs I have made for Trinest.com, as well as other sites we are slowly reaching the brim of interesting designs which I want to talk about. As well as the fact it’s quite annoying to dig up archives to make these articles. This might be the last Site Histories on Trinest.com for some time. Until I move on to discuss the evolution from late 2010 to the current design.

TriProng April 2009	Trinest.com 6 Years of 7 Mid 2009	“Newsletter Trinest.com” Unknown Unknown 2009
Unknown Name Series [O] Early 2010	Unknown Name Series [DF] April 2010	Unknown Name Series [MAY] May 2010
Early Project Site 2010	Return to Blog Site [O] Jan 2010	Return to Blog Site [R] Jan 2010
“Summer” Beta [O] July/Aug 2010	“Summer” Beta [R] July/Aug 2010	“Summer” Beta [PAGE] July/Aug 2010

So lets go back to the stone age for a bit, today we are looking at Trinest.com designs and while they are only from 2010 in the history of Trinest.com these designs where used a long time ago. My love for making a new design almost every minute has stagnated since then, however back in July there was a new flavour of Trinest.com which was taking a few pages out of the bit generation era with a series I like to call “Retro Summer”.

I don’t know the exact date for these designs, but they are listed as been created in July 2010. However the index pages seem to have an archived date from late May to mid June. So in fact not July at all it seems. However I do believe the designs were used for a period of time in July if that counts.

Before I go crazy trying to decipher when I made these designs, the big event has to occur. The big event were I talk about the designs as if I learned much more since making them.

I think the first design we look at should be the design dubbed “beta idea”. No doubt this was probably the original idea and were the direction for the resulting designs came from. Compared to the other two designs I will talk about (which one is a revision of the other), this design is quite dark in pallet. There is left navigation which uses a sort of simple style which I think is the key winner for the design. However before I get too attached to that navigation I have to say the header is the real winner, it uses Survival Kids sprites to give clear definition between the two sections as well as the social navigation and title sections using a transparent background. Other than that its footer is a pretty generic footer style which I have used in many of the designs since then and before.

I think from a design point of view this layout could have worked quite well, I don’t believe I kept this design up on my site for long, if at all. However I do see key elements which do not work, such as the footer. In my mind the layout is quite simple and cantered mainly around the black and white pallet outside of the header. I believe the bold footer colour which appears to have been picked out from the colour of the trees in the header is too bold in that location so it throws off the whole design.

Moving on to the other two layouts which are basically one in the same bar a few slight changes. I based the layout around Daniel Primeds layout and gave it my own twist. The previous header was made using Survival Kids sprites returns only in spirit alone as I’ve made my own sprites for this header which capture the simular essence which the other layouts header had. Other than that it has some quite descriptive colourful language for my testing which I’ve had to dumb down this time around for this newly published version here because I think you are more drawn to those words rather than the design.

If you look at the two designs they are basically the same, go ahead open them both in two different tabs then click on them. All you will see different in the two designs are the newer one has a background and a bolder border as well as some patchy dotted lines on the titles.

If I remember right I did use these designs for quite some time, well in terms of how many layouts which I had made during that period I believe that these had some use out of them. Maybe something along one or two weeks instead of only a few days. Don’t go digging through web archives to find out, because I’m just shooting in the dark here.

Design wise, I think these worked. Yeah there not the best in the world, but the layouts show consistency in colour pallet as well as been one of the testing grounds for many techniques which ended up been used on other designs.

Retro Beta Idea May/June 2010

Retro Summer in July First June 2010

Retro Summer in July Revision June/July 2010