Blog Archives

All Archived Posts in Web Design



What Kolor is this? Colour Matching Game by Jorge Moreno

What colour is this kolor 2

There's not an awful lot to say about What Kolor is This, by Jorge Moreno, as it's pretty self explanatory as an online gaming concept.

However, don't be fooled into thinking this is easy, because after the first few rounds, you'll end up struggling to select the right colour. I can guarantee it!

It's pretty fiendish, as the number of available color options increase, but also so do their similarity in hue.

Simple; yet challenging.

Link was found via:

 

What colour is this kolor 2 What colour is this kolor 2 What colour is this kolor 2

Jorge Moreno is a Front-end Web Developer, and UI Designer: 

Hello there! my name is Jorge Moreno and also known as moro, I'm Front End Developer and Web Designer specialized in HTML5, CSS3, JavaScript and User Interface Applications Design.

I was born in Zaragoza (Spain) where I graduated in Illustration and Graphic Design at the School of Arts, since then I've been working on the Design and Web Development fields at different world places and companies.

More than 10 years of experience have given me a wide knowledge on Media Design and Web Development with both client and server side programming and the following skill set:


UIGradients Colour Gradients for Designers

UIGradients Titanium Colour Gradients for Designers

UIGradients Back to Earth

UIGradients Bloody Mary Colour Gradients for Designers

UIGradients Purple Bliss

UIGradients Blush

UIGradients Parklife

uiGradients: Modern Dual-tone Colour Gradients for Designers & Developers by Indrashish Ghosh

uiGradients: Beautiful Colour Gradients & CSS Code, by Indrashish Ghosh (@_ighosh), is certainly some very pretty, and quite useful, eye candy that will please many graphic and web designers.

I've had this lovely website bookmarked for a few weeks now, after initially tweeting it; it's been in my 'to blog' list until now. Christmas is all but here, and I wanted to post something colourful and useful.

If you struggle to come up with pleasing gradients for your designs, then uiGradients is worth bookmarking. It'll allow you to select from a healthy library of colour gradients from which to bring your web designs to life.

You can also 'Get the CSS Code' (as below), which makes it super easy to make your website look really pretty:

 

UIGradients Influenza CSS Code

If you're the sort of person that likes to give as well as take, then you can also 'Add your Gradient', for instant Karma points:

Adding a gradient is easy. All gradients are read from agradients.json file which is available in this project's repo. Simply add your gradient details to it and submit a pull request

 

UIGradients-Add-Gradient


semplice for wordpress

semplice for wordpress

Semplice for WordPress - Designers Best Kept Secret - Black Friday 30% Off

Been eyeing up Semplice for WordPress, from Semplice Labs, for some time now, as in many many months. Been keen to overhaul my own website and logo design portfolio, and been looking for ways in which to achieve that goal for about the last year.

"Semplice for WordPress is the first fully responsive case study portfolio system. Built by designers, for designers."

There are many many WordPress orientated portfolio and blog based themes available to us graphic designers, a number of which I have purchased, downloaded and started to use, but only to be derailed with one thing or another.

I know there are many people who would just say, "design and code your own website", or "Why not pay someone to to it for you".

Both valid suggestions, but I'm no expert in PHP, CSS and HTML, no where near enough to develop a blog portfolio with the functionality that I require, neither do I have ££'s to pay a web developer and designer to do the job for me. If I had the money to hand, I'd pay someone in a heart beat. 

semplice labs wordpress theme

 

So back to Semplice. I've looked at the many live examples of websites and portfolios built with Semplice on their Showcase, and feel it's a good fit for what I need. There is definitely a Semplice 'style' that is inherent within a lof of the showcased websites, and it's a style I really like.

Black Friday deal

The Black Friday deal offered by Semplice, a lovely 30% off, gave me that final push to purchase it. I was going to buy the basic Single version, but the 30% enticed me enough to purchase the Studio Edition.

So with the 30% discount in hand, I ended up paying a very reasonable £61.30. Here's hoping I can design something with Semplice that is a little less like the other examples, but still part of the Semplice family.

Going to give myself a few months to get this in hand, then boom! Hopefully a lovely new visual styled for The Logo Smith Freelance Graphic and Logo Designer.


Top Fonts on Font reach

Fontreach - FontReach scans the top million sites to show font usage across the web

FontReach: scans top million sites to show font usage across the web

Whilst trawling the web last night, I came across this amazing font related website, called: FontReach, which 'simply' scans the top million websites to show how fonts are used across the internet.

Website Design and developed by Jesse Chase and Jason Chen, who deserve epic Kudos for a fantastic idea well implemented.

I initially tweeted it, and quickly saw how many times it had been liked and RT'd, which is a good indicator of how popular it could be.

FontReach is a gorgeously designed website, not to mention really quite interesting, AND useful, to play around with. It actually does provide good insight into how popular and widespread, or not, certain fonts are.

As a web designer, looking to decide which fonts to use for a website design, FontReach could be a pretty useful tool. Being able to consider a more varied choice of web fonts, not to mention being provided with names of other fonts you might have known about before.

I did a few basic font searches, and the top results are not really all that surprising, with Arial (below) coming in ranked number 1. What I like is seeing how the many variations of a certain font are also used, so you get the whole picture based on a certain type family, rather than just the main 'parent' name.

I also did a quick search for Helvetica (ranked 3rd), Times (ranked 23rd), and Gotham (ranked 55th) and Comic Sans (ranked 84th). Shouldn't be surprised, or shocked, to see how often Comic Sans has been used as a font in a website design, but I still am.
Arial Font on Fontreach Times Font on Font reach Comic Sans Font on Fontreach Gotham Font on Fontreach Helvetica Font on Font reach


Responsive Logo Designs: Chanel, Coca Cola, Nike Air, Bang & Olufsen, Disney

 

Exploration of Scalable & Responsive Logo Designs by Joe Harrison

Just when you might have been wondering when the next cool logo design project was going to surface: Responsive Logo Designs pops up to show us there are still novel, practical and fun ways to experiment with popular brand logos.

Responsive Logo Designs is a really smart and cool logo and web project by Joe Harrison (@joe_harrison): "A exploration into scalable logos for the modern web.", and shows us how brand logos belonging to: Coca-Cola, Chanel, Nike, Bang & Olufsen, Disney and Levi's might, one-day, work responsively.

This concept of creating scalable and/or responsive logos shows us how popular brand logos can be effectively and considerately reproduced, on the responsive web, and in general, a mobile friendly environment.

In each of these responsive logo designs the logo goes through a sequence of 'shrinking stages', creating a new logo lock-up for each new reduced browser window size. With each reduction in the browser width, the new logo lock-up effectively keeps true to the original brand identity, and it's values.

 

Bang and Olufsen Responsive Logo Design

Bang and Olufsen Responsive Logo Design

Bang and Olufsen Responsive Logo Design

Bang and Olufsen Responsive Logo Design

I particularly like the Bang & Olufsen example (above), but if I were to nit-pick: I'm not sure Bang & Olufsen would be so happy with the shrinking of their brand name to: BNG&OLFSN.

I would imagine in this case there would be a requirement to keep the brand name intact, or simply remove it, thus eliminating one of the responsive steps.

But, as a possible concept for brands to consider, I really think there is potential for companies to consider how their logo, particularly a wide logo design, might be responsively handled. It's a very small concern, but it's those tiny tiny details that can really show a brand does actually does 'sweat the small stuff'.


YorkUKNetworks

 

If you've been following me on Twitter over the last year, you might have seen the odd Tweet describing countless problems I had been experiencing on a daily occurrence with my website.

From having no problems whatsoever, hosted with York Networks since 2006, the last year or so had seen a complete downturn in site reliability and a deluge of hacks, attacks, bots and spam. I was experiencing all manor of issues, ranging from: brute-force log-in attempts, actual DoS attacks aimed at YorkUK Hosting and my site specifically, immense problems with comment spam, (oftentimes 1000's of spam comments/trackback in a single period on numerous days) site downtime for consecutive days, and general site slowness.

At this time I was on a shared server which meant the focus of the attacks on my site was affecting other YorkUK Hosting client's websites that were also sharing this same server. I know this posed many immense hassles for Nathan. I knew I was basically causing a shit storm of nightmares for him, and other website owners on this shared server.

Need to Find a UK Web Host? I Have Used YorkUK Hosting for 7 Years

Bear in mind that this shift from 100% reliability, for close to 7 years, to the complete opposite, seemed practically overnight, and was a complete shock to the system. At this point in time I had no real experience of WordPress vulnerabilities, had a pretty laxed attitude to it all, new nothing much about .htaccess, firewalls, Apache and it's various modules, WordPress security etc.

2013 up till now has been an incredibly challenging, frustrating, but also highly enlightening experience with my new found knowledge of all things: WordPress, various WordPress Security Plugins (Wordfence for one), .htaccess, Apache and associated modules, CDN's-Content Delivery Network Services (I use MaxCDN), cloud based web performance and security services (I use CloudFlare), good old grunt work, upgrade of servers, various forms of server security protocols, and more patience than I knew I ever had, and finally an unquenchable desire to completely give it back to all these lame-ass hackers, bots, bored teenagers looking for WordPress weaknesses and vulnerabilities.

YorkUK Hosting

I could, and can not, praise Nathan over YorkUK Hosting for his complete and constant dedication to helping getting to solve the multitude of problems that we faced, obviously as much for his own sanity and client well-fare, than just keeping me happy. But the fact is that we would be emailing at 1-2am in the morning, with suggestions, fixes, tweaks throughout all last year, even when I went to Devon in October, and realised my site was under the worse possible load, Nathan helped bring some order and saneness to my worried mind.

Being a self-employed logo designer, whose only real viewable shop window is my website, having any speed/reliability issues is frustrating, but knowing your site is, and continues to be down for days at a time, is a massive worry. I rely on my online logo design portfolio and blog to entice, delight and tickle hopeful new clients, and there is no room for my website to be down at all.

Although we didn't always have the answers at the time, often months of trying this and that, the journey that was taken has proven to be most rewarding, and enables us both to share and implement that knowledge and experience.

Sometimes it was easy to think it was simply the hosts fault, but I knew that I had to just keep chugging along, and keep focused on resolving rather than blaming. To move hosts would be a pointless exercise in many ways, but the main reason is that I was sure the problems would just follow my website/URL where ever I went, and crucially? Would I really find someone as completely dedicated (Nathan) to helping one of their clients (me) as passionately and as patiently as he did, I don't really think so. I also like to think I'm quite loyal in that regard, and tend not to make 'major' decisions without a lot of consideration. One doesn't simply throw away 6 years of practically 100% website uptime, when one hits a bad patch. Yeah sure, I do get stressed, I do panic, I do whittle off little panicked emails at 2am in the morning, but as I mentioned earlier, this experience was incredible frightening, and completely overwhelming to my own confidence.

The reality is now that my site is super secure, and much improved overall in WordPress site performance: we know the weak spots, we know what to look for and monitor. This whole experience has taught me that being more than pro-active is the only and best way if you have an active WordPress website and blog. 

Patience of a Saint

Obviously I can most heartily recommend YorkUK Hosting if you are looking for a good website host, but even if you are not looking for a new host, it's worth considering and contemplating the sort of relationship you have with the host you have right now. More so if your website is super important to you, but you've yet to hit the nightmare that took me and my site down a horrible horrible path all of last year.

When things are seemingly falling down all around you, having someone who seems to have, and exceed, the patience of a Saint is pretty bloody fortunate.

Oh, and no. I'm not affiliated in anyway with Nathan and YorkUK Hosting, there are no kick-backs or financial incentives to post about them. It's simply about time I wrote how greatful I am to have a host as dedicated as Nathan.

Cloudflare Plans

Practical tips, resources, help and guidance to come in more posts

I'll be following this post up with loads of security and performance: practical tips, resources, help and guidance that I have accumulated in this time, and hopefully this will be useful to some of you, at some point. The first post, in a few days, will probably cover just CloudFlare, as this is frankly the single bestest thing anyone can implement to introduce immediate security and performance benefits. With the a Free plan, which is for most people enough, there is simply not much of a reason not to consider it.

I've actually upgraded to the paid Business Plan, I like it that much. I haven't bought the company yet though… :)


I have been promising a download of the portfolio WordPress theme that I use here on imjustcreative for about 8 months now. Reason for the long delay is that the design has seen ongoing changes which has meant it's been hard to pin down a version for download.

The initial design I said I would offer up for download now looks quite different to what I am using here on imjustcreative, but it is very similar to what I am still using over on Logo Stack .

The other reason for the delay is that the CSS and back-end code is pretty much all-over-the-place. Due to almost daily tweaks and changes which means it has been impossible to sit down and create an up-to-date theme with cleaned up code for purpose of making available as a WordPress Theme Download.

I am still tweaking imjustcreative which means for the foreseeable future I don't see a point where we can create a finalised and polished version with clean code. However, I do know that many of you are still expressing an interest in getting your hands on whatever I make available even if it's messy and dirty under-the-bonnet.

 

Alpha Release

With that in mind I have now decided to make available the WordPress Responsive Portfolio theme that is currently used on Logo Stack (above).

This is the raw and dirty Alpha release which means it's not at all how I would like to eventually release the theme, but will provide you with something to get your fingers dirty on.

It should make a reasonable portfolio theme for you if you can spend some time polishing up the code and cleaning up the dirty edges.

It's far from perfect, and there are far better 'proper' responsive themes out there, but it may be useful as a start.

Licence

I still plan to release a cleaned up version of the Logo Stack theme as well as the theme that I use here on imjustcreative. Until that moment you are free to do what you like with this version, but I do ask that you just keep the small link back to me in the footer. I would like to track the general usage of this theme so I can work out how much work to put in the preparation of the main theme with cleaned up code.

You are welcome to make this credit text smaller and style it how you wish, but please keep it somewhere visible on every page.

A Few Notes

The Logo Stack theme is set-up with one index.php page (above) and single.php page which shows the individual posts. The index.php displays the Featured Post Image as you can see above and links back to the single.php.

You can alter how many images display on the home page. At the moment I have 3 rows with 3 columns, but you could have 2 rows with 10 columns, 4 rows and 20 columns etc. You could also remove the sidebar if you want a full width portfolio page. The screenshot below shows (red dot) the number to change how many rows. If you want 4 rows then change 3 to 4 etc.

To change the amount of columns you need to change how many posts display in WordPress DashBoard:- Settings:- Reading Settings.

The sidebar is currently hard-coded with the drop-down category and tag menus, but does have the Widget code placed at the end of sidebar.php. If you want to place widgets you can and these will display at the bottom, or you can remove the drop-down code so that the widgets appear top of the side-bar.

I have removed the social share buttons found end of posts in single.php, but I have left space for you to add you own with a comment, "Insert Social Share Code". There is room to add 4 regular share buttons as below:

Obviously change the personal and contact information in the footer and anywhere else you might find it.

The theme is partially responsive in that it works reasonable well on iPhone, but is not yet fully optimised for tablet formats.

You'll likely have to play around with things like search.php, archives.php etc as these are still not refined even on the Logo Stack theme currently in use.

Comes With NO Support

This theme is provided as is with no technical help or support. I can't stress enough how untidy the back-end code is so if you are not familiar with CSS, HTML and PHP you may struggle.

Based On

This responsive WordPress theme is based on the framework called Foundation, developed by Zurb. This framework was then developed into a barebones WordPress theme by https://github.com/drewsymo/Foundation.

If you need technical information on how the responsive side works then head over to Zurb for full documentation.

You can read more on my own experiences with the above: http://imjustcreative.co.uk/minimal-responsive-wordpress-theme/

Additional Development

Additional code development has been kindly provided Shane Hudson who is currently working on the Beta release of this imjustcreative (Logo Stack) WordPress theme. The Beta release will gave much cleaner CSS and PHP as well as more code comments and a generally nicer looking back-end to play with.

Shane is tasked with cleaning up all my messy coding. Anything messy or unbelievably shit looking will be down to me and not Shane.

Download

Download imjustcreative (Logo Stack) WordPress Theme

 

 


Making progress with the gradual redesign of my responsive website with the latest round of changes focusing on the display and use of my main logo design portfolio.

Up and till now my portfolio was all hard coded into the theme templates which was a real pain in the ass. I always had it in mind to have my logo designs added as posts, but it was lack of code knowledge that held me back. Thankfully Shane (see note below) has been able to code my ideas into the responsive WordPress theme that I have slowly cobbled together over the last few months. I now have full control over the featured images and order of the logo designs as well as it now being a quick process to add new logo work.

Having a few challenges with the pagination at the time of writing this post. So for the temporary moment all my logo designs display on one page, but the immediate plan is to have a much smaller number of 9-12 logo designs on each page to help with page load times.

I still have some minor aesthetic styling tweaks to make to the actual individual posts, but that is for another day. All logos are super optimised given this is my landing page as well as resizing to various screen sizes, so on the iPhone the actual logo images enlarge to the single column view.

I will also be applying this portfolio to LogoStack.co hence why it has been quiet over there for the last month or so. In fact a number of my earlier side projects: LoveHelvetica & MonoExpressions will come out of hibernation using variations of the imjustcreative WordPress Theme.

imjustcreative Responsive WordPress Theme

I am still planning on releasing the imjustcreative Responsive WordPress Theme to those that want to play/use it, but I just had to get the responsive and user-friendly portfolio bit done before doing so. The theme is now more user friendly, and works as a responsive portfolio should with control over how many columns and rows you have before having to use the pagination.

Expect to see an initial Alpha release of the theme code in the next few weeks.

I say Alpha because I am aware of a number of small glitches that still need to be sorted as well as some basic styling tweaks

A Quick Thank You

All the back end code work is down to a great guy called Shane Hudson (@ShaneHudson). Shane has proven to be an invaluable help in getting the more ambitious parts of my website realised, so feel very fortunate to have him helping me out with the development side.

If you are looking for sound, solid, dependable, and awesomely humoured WordPress developer then I can personally, and highly, recommend Shane.


A fair few blogs of late have completey turned off comments following in the footsteps of more well-known blogs to never have had them in the first place.

I have mostly found comments to be mildly annoying. I am not the best at replying to any comments which I feel leaves me looking a little selfish, or lazy, or both which of course is probably true.

Saying that, I have always totally appreciated when someone does take the time to write a meaningful comment—even if I don't get round to leaving a reply—but those sort of comments are few and far between. The usual style of comments are the ones that typically get you in a bad mood upon first view.

Social Commenting

I have explored a few comment services like Disqus and LiveFyre over the last few years with the latter being the one most recently used. These do simplify the comment process somewhat, but they are not without disadvantages.

The main disadvantage is that they are quite bloated in code, resources, HTTP requests and leave your website doing all sorts of extra curriclar activity.

Given my recent website responsive redesign, and a strict focus on clean and fast loading LiveFyre proved to be a real resource hog making requests on pages not using comments.

It had to go, and I reduced HTTP requests by between 5-8 or so.

WordPress Comments

During the redesign I decided to forego any 3rd party comment system and revert back to WordPress comments for simplicity and speed. The next decision was made based on keeping my website design as clean and clutter free as possible.

Comments are messy and I have always hated how they just, mostly, mess up a nice looking website.

However, I didn't want to forego comments totally as they can be valuable and useful on occasion. An important differentiation is that I didn't want to draw attention to the comment section: to have comments accessible but not directly viewable.

The easy solution was to hide the comment section.

This is where I am now. The comments are not directly viewable unless you click the link which then opens the comment section up. Comments no longer clutter up the page and keeps the page looking cleaner and leaner.

Job done.