Where we’re going, we don’t need roads.
Web Development – for most, a confusing task performed only by turbo-nerds and basement-dwellers. However, now, I too must take the sweaty plunge into Web Development, and learn: how to web design.
Firstly, my experience prior…
I once opened Dreamweaver, and made a little box appear and I once made a site using Wix, which was made of 95% widgets.
…so, with all of my stellar experience, I should have no trouble with this!
May any of the gods that care; guard my soul.
But first, some research.
Starting with how we engage with the web:
What are different uses/types of websites?
Websites as well as variants on styles of websites are as variable as grains of sand at a particularly sandy beach.
Fortunately, however, most websites can be slotted into one broad category or another – so here’s a brief look at the categories, as well as some of the more common sites found within:
Social Media –
Social Media! A place where you can stream your thoughts and ideas to all of your friends, regardless of importance and value, as well as express your thoughts on politics and day to day news.
As it may or may not be clear, I hate social media, however I can see its value in promotion, especially for creative arts, as well as social events.
Examples of Social Media include: Tumblr, Facebook, Twitter and to a lesser extent, MySpace.
Social Media also encompasses online dating, to some respect
Video Sharing –
Video sharing sites are sites that – as the name suggests – allow users on the site to share videos with one another. Videos can range from comedic and educational, to persuasive and thought provoking, as well as everything in-between. Video sharing sites include sites like Vid.me and Youtube.
E-commerce sites include sites like E-bay, Amazon and Etsy – as well as most modern supermarket websites. These are sites which allow a person to order – or pre-order -items that would normally be stocked on a shops shelfs and have them delivered to their house. Some platforms don’t even have a physical shop, and instead relying entirely on virtual shops. Typically, E-commerce is popular with those that cannot find the time of day to physically shop, be it due to geography, or time constraints.
Image Hosting –
Image hosting sites include things like Flickr, Imgur and DeviantArt, and to a much lesser extent; Patron..
Image hosting sites, as the name suggests, host images for other locations – they can be used professionally, as portfolio showcases, for fun, to share images between friends and small circles – and for simple outsourcing of files for any number of reasons.
Informative & Referencial –
Information and Referential sites (cites, heh) take the forms of Wikipedia, Wikihow, Instructibles and Government Guides.
Informative sites probably have the largest scope of all topics, given that most any of the other sites mentioned in this list will provide tutorials of SOME form on them – however, some sites are dedicated to this practise, above all else.
Sites like Wikihow and Instructibles show people how to do basic things – such as apply for job interviews – and create things – such as a shelve out of scrap bits of wood respectively.
Wikipedia is a site that’s become much of a laughing stock over the recent years – due to the fact that anyone can edit it. This proves to be a double edged sword, as while anyone can contribute to the collective knowledge of Wikipedia, anyone can also deface it, commonly calling their friends names, or making up outlandish facts.
Finally, Government Guides are places of actual factual knowledge, upheld by local governments. These are guides on things such as how to apply for passports, and how to acquire loans, as well as other federal mechanics.
What are the benefits of having a website?
So, what’s the point of having a website?…
That’s a stupid question, Mr Rhetorical.
Here’s what the points are:
A website first off, will allow a larger audience to become knowledgable to the fact that you exist, increasing all potential sales. Having a website will also open up a place to get in contact with someone across the world, and be able to message them almost instantly.
If the site has an E-commerce section, then that is essentially – potentially – money over night because websites don’t have closing times, plus, they can stock many more things than a normal shop.
What is SEO and why is it important to businesses?
SEO – other than sounding like a brand of sea-based cereal – stands for Search Engine Optimisation. SEO is important and functions like tags in a video on a site like YouTube. The more a certain keyword appears, the higher SEO will pick up your site.
Alternately, you can pay Search Engine sites, such as Google, to place your site higher in the list, allowing more people to see your site.
Search Engines work by using ‘spiders’, which trawl the internet, pinging every connection and every IP address in a sequence and adding them to the results of a search. These spiders pick up on words used frequently on a page, and make them keywords – the words that search engines look for to pick up a site.
What makes an effective/ineffective website?
An effective website is akin to an effective flier, requiring to be clear, concise and in many cases, simple – these are, at least, general things that make sites effective. Almost every effective site follows the ideal that it’ll take a maximum of 3 clicks to find what you need to.
An ineffective site is one that is cluttered, confusing, convoluted and generally an eyesore. These sites don’t follow the three click rule, have poor looking buttons and layouts, or worse still: use default HTML with no appearance alterations – making the site seem shifty and abandoned.
What are the ways by which we access the web today?
Nowadays, everything from phones to computers and even fridges can access the internet.
This means that websites now have to be designed with more screen sizes – and therefore layouts – in mind.
This is normally the biggest issue when creating a modern website – however, some sites, such as Wix and WordPress have built in features to convert sites from PC screensize, to portable sizes.
What are the strengths/weaknesses of modern web devices?
The biggest strength of modern web devices is simply compatibility, as well as how universal most services are with one another, allowing people to check their e-mail almost anywhere they are in the world.
The biggest downside, is that due to everything’s interconnectivity, it allows more access points for hackers to access your files, or more likely, losing a password to something important and not being able to remember it – then being locked out on all devices with it.
Another drawback is that they require internet access in order to transfer files and interact with one another.
Lastly, in mobile technology, it requires more power – and in the caase on contracted items, such as certain phones, money! – to keep something internet enabled, running.
Elements of a website:
So now it’s my turn to investigate three websites of my own, paying close attention to their: Layouts, Colours/tones/styles, headers, footers, page content, any interactive elements, site structure and navigation.
I’ll be looking at a multitude of sites, such as:
Imgur is an image sharing site that was originally used as Reddit’s image storing database, before gaining it’s own community and sub-culture, revolving around particularly famous Imgur User’s, and in-jokes.
It features a minimal header, containing only the site name, the ‘create a new post’ button a search bar and your username (when logged in). The sites main page; known as ‘Most Viral’ is one of many site pages that can be set to open as default, along with ‘User Sub’ where only the newest images and content will appear.
Imgur’s main page doesn’t have a footer and will instead keep cycling through all previous content on the site till it eventually reaches the beginning.
Navigation can be tricky on Imgur, as while the site allows the user to easy cycle through images at the touch of the left or right keys on their keyboard, the sites nature makes finding the same piece of content twice on two days unlikely – unless a user reposts it and it get’s voted to the front page again, or if the content is favourited by a user.
Content varies from factual information, humorous images, as well as resources and guides on how to do just about everything.
Text is in contrast to the background, being light on a dark background – with the only colours generally being green, with the font itself being sans, and rather curvy.
While Imgur’s Most Viral page isn’t the homepage I’m looking for, I do enjoy the colour scheme ideas. Something sparse, clean and few colours.
…Where to start with this site..?
Let’s take it from the top.
First off, The Layout of the site is mostly all together – albeit unnecessarily complex.
The colours of the site work well together, although it doesn’t lend itself well to the tone of the site well at all – seeming more like the aftermath of Threads than an inviting look at Sheffield. The styling is clearly supposed to be a modern affair, judging by the fonts used, however the colours of the site look far too sinister for what the site is supposed to be doing.
Secondly, the actual layout on the page is broken, and jumbled, to describe it lightly.
The images used within the slider are all cropped incorrectly, and those that aren’t, are pixelated heavily.
Furthermore, the site has many redundant pages – in fact, most of the navigation could be condensed int0 4 buttons with drop downs
Livinsheffield is a perfect example of a site, if that example was: ‘how to not layout a site correctly’, and I’ll use it as such.
More than the content, this investigation will focus on the navigation on the site – one that I’d like my site to possess. The BBC News site prides itself on it’s ability to find whatever you would care to find within three clicks – which is a desire of the site I wish to create.
Also, a rather neat feature on the BBC site, not present on either of the other sites I’ve examined so far, is its unique header, linking the site to others within the BBC network.
While my site won’t possess this feature, it is a nice quality of life improvement for the site.
The site itself is well built and very clear, as to be expected of a government funded business, as well as an international news source.
There is however, little interactivity on the site – save for text changing colour on rollovers – this could be explained with the site wanted to be visible on as many platforms as possible.
Self promotion online:
What are the methods/platforms for promoting yourself online?
Promoting yourself online is a simple process, in concept. Good places to start are with by using sites like Facebook and Tumblr, as mentioned earlier. Linkedin can also help in more professional careers, as it can provide an online portfolio, as well as other important contact information.
There is also more controversial means – means such as those exercised by the video game: Hatred. A game where the player takes on the role of a mass shooter, wearing an edgy leather trench coat, with long black hair. The whole objective of the game was to simply kill everyone on a stage be they civilians/police/etc. Then move onto the next stage and do the same.
This naturally garnered a lot of attention from the media, as well as conservative types that believe that video games are a bad influence on people, which in turn promoted the game for them, as the eternal hate engine that is the internet ticked over.
There’s also producing just a sheer volume of work and placing it everywhere with your name on it, just to get people’s attention.
What is the USP of each particular promotional method?
As mentioned above – the internet is easy to offend, which can carry your product regardless of what it is, if marketed correctly, however, many other methods exist which all affect how people view your product.
One method – again, mentioned above – is that of producing lots of work all with your name on it – as this will show people what sort of thing you are best at creating, as well as your commitment to your craft.
Online portfolios can also be established which showcase a certain aspect of what you can do to the people on the internet, as well as potential employers. These can be done on sites like Deviant-Art, Tumblr and (arguably more professionally) LinkedIn.
These allow you to target people who would be interested in certain parts of your work, such as showing off your Typography skills on LinkedIn, to people who would like someone to design a typographical design for them.
What are the limitations/issues?
Continuing from the above, the downside of generating interest in your work via controversy is that it will turn as many people away from your work as it will attract, as well as possibly come off as ‘tasteless’.
Producing lots of work with your name on it sounds fine, till you realise the amount of effort required to keep both a constant upload schedule – what’s more is that some people may try to erase your name/logo/copywrite image and claim it as their own.
Finally, most online portfolio’s are targeted at one particular aspect – such as typography, illustration, corporate design ETC. meaning they will only attract their target demographics – a potentially limited crowd.
How can they benefit a designer/creator?
Each of the methods mention will get exposure to the creator/designer in question, however, each come with their own additional bonuses.
For starters, if a creator decides to promote their art via controversy, then it may be seen as ‘edgy’, catching in more people who might follow edge work – as well as those that enjoy seeing people getting rilled up.
Methods of web design:
What are the various methods/tools for designing online content?
There are countless ways to design content on the web – each of which are continuously expanding. These range from blogging sites, like Tumblr or WordPress, which are relatively easy to wrap your head around.
Next there is site-builders, such as WordPress’ Dashboard, or Wix – Sitebuilder. These are extremely flexible site designing sites, which allow the user to be as creative as they want to be.
Lastly, there is offline programs, such as Dreamweaver – which are the most flexible of all the designers, however, require prior knowledge on how to code using HTML or CSS.
What are the strengths/weaknesses of each method?
Tumblr and WordPress are extremely user-friendly, and can be used by anyone with only a modicum of computing knowledge. The trade off – as is the case of most of these, is directly proportional – is customisation, with both being limited to blog-style sites, with tumblr having slightly more customisation of the two.
Next, the site-builders, such as Wix and WordPresses’ ‘Dashboard’ site mode. Again, as before, the trade off is know-how against customisation – with both Wix and WordPress having comprehensive tutorials – as well as pre-built themes that can be built onto, edited and changed to create unique sites, however, some feature of these require basic knowledge of HTML coding.
Finally, is Dreamweaver, which has been mostly superseded by site-builders. The positives of Dreamweaver are that sites can be customised, entirely to whatever the developer wants. What’s more is that Dreamweaver can work offline and can be tested locally, without need for stable internet connections.
The downsides however, include that Dreamweaver doesn’t naturally have a hosting location for a site – meaning that the designer/client will require to purchase their own domain separately. Another downside is that Dreamweaver requires extensive knowledge of HTML and CSS in order to produce something similar to what Wix and WordPress can do after a few simple clicks.
How could you develop your own knowledge of these methods?
In my case, I’ve have already decided to use WordPress’ Dashboard mode as I am being taught it as part of my working schedule. However, an extremely brief search reveals that there is no shortage of documentation, as well as videos and forums that can help with WordPress and Wix, as well as Tumblr. Dreamweaver also features a large amount of documentation, however, it would be more beneficial to learn – at least a basic level – of HTML coding
So, the project it’s self…
The aim of the site I am creating is that of self promotion, as well as a place to store my various working projects, as well as personal projects and stories.
That being said, I designed the site loosely inspired by three main colours, akin to my illustration work. Black, white and red. The reasoning is that the site looks clear and clean – possibly too clean, but I’ll talk more on that shortly! – as well as being clear on what everything is and WHERE it is.
Naturally, because of how I design all things, I leapt straight into the software, metaphorical teeth and nails bared, ready to take on ANY challenge that came my way!
…Naturally, that ended well…
…Well… It wasn’t that bad, all things considered.
I drew influence from bait-and-switch media for the first two headings, ‘HOT SEX’ being eye-catching for one reason or another to most people. Continuing from that; ‘Take a look at my bits’ was intended as a humorous play on words, as well as to show people that this site isn’t the most serious thing they’ll see all day.
This extends down to the introduction on’So, what the hell do I do?’ – both the paragraph, as well as the heading.
So going back and thinking about it (read: Messing around with the sites laying in Photoshop) I came back with something a little like this:
Which I feel is a much sleeker and elegant design.
So I went back to my site and decided to alter a few of the settings, again, just so see how it’d go. First off, I placed the recolour of the lower row – using a full page box.
This however, had the unfortunate side-effect of:
Making the whole page crushed and the formatting off – so I decided to add padding to the copy.
10% should pad it appropriately, right?
Oops… I broke it… Reverting that, I found the Full Width Background selection (just after making the evidence for this) and decided to try that instead.
Well lookie’ that! It looks better already! Now it just needs a little padding on the top and bottom to make it seem less squished inside the box.
A distance of 10px should do as a test.
Much better, but let’s try 20.
Perfect! Let’s put one of these on the bottom and make it look symmetrical.
As small as it may be, I am very proud of that. Next however, I’ve got my biggest challenge…
The Slider quote image… thing!
Jumping into Photoshop, I drafted up an image of the text.
Boom. Clean. Clear. Under control… But drab as a wet weekend in the middle of a Norfolk homestead. Let’s try white:
Muuuuch better. Let’s check it on the site:
That doesn’t look too bad, but it still looks too bland… Plus I forgot to add the quotation marks!
There we are! A little hint of colour, just to attract the eyes.
But now it was time for the final boss, the true horror, the metaphorical wizard behind the metaphorical curtain…
MY OWN UGLY MUG!!
…But really, the formatting on this section is terrible, so that’s my next task. Fix formatting, alter picture placement, and most importantly; change the font!
Looking back at my early plan of my site, I decided that I’d attempt to follow that design to the letter – or close as possible.
First off, I made my two row affair, a three row:
Then I shuffled the dividers around
Let’s see what this has done!
…Well I broke it again… Let’s getting to fixing. First off, I’m going to split the copy in the middle section and place half in the right column.
Everything that gets fixed breaks something else, in this case, the content dividers.
Fortunately there’s a setting specifically for hapless people like me!
A width limiter! In this case, a guesstimate requirement of 400px. Let’s see what that did:
Much better! Let’s try it on the other one too:
A sharper and more precise edge to the text box!
So far, I’m kinda proud of this site, but it’s formatting font wise could still use some work. Now, eagle-eyed… examiners? Viewers? Who ever you are… might have noticed that on my navigation bar, the font is different to everywhere else – similar to the Quote, in fact!
These both use the font Roboto Slab, the navigation bar using the default, and the quote using the ‘thin’ variant. Now I need fonts that could work for the rest of the site… My aim is fonts that mimic the style of the site logo.
Which in turn was inspired by a small part of a personal project I started a long time ago, my stories. In this case, the logo for a gun manufacturer:
The long accents on the A and N in the logo, as well as the A, W and S in the header are provided by a font called Bleeding Cowboys. The main bodies of the text use Bodoni 72 basic.
Asking a friend to examine my site, came back with a few points of note.
The first being a minor spelling mistake in the title quote, missing an ‘A’.
But also the Portfolio linking buttons ‘looking stupid’ by that, meaning the parallax-shifting. The Parallax-shifting is a simple thing to fix however.
Opening the portfolio assets, I changed the ‘Project Style’
and decided to roll with ‘Meta on hover’ as this produced a nice effect.
However, it did make the ‘Scarlet Empire Designs’ tab’s title redundant – so this will require editing.
Lastly, at the bottom of my page – a second link to my web comic, discussed here.
Which simply requires some padding, but I decided to opt for a line, as I felt it looks nicer, plus if I’m ever involved in other collaborative pieces, I can evidence them below the line along side my current image:
Now with that done, lets test the button and see if it work–
Well… That’s broken too now… Good.
No, I like it broken.
…Okay it’s bothering me now, let’s fix this.
Looking at the settings, it seems like it SHOULD work.
but it throws up the error page, regardless… I’ll try checking the URL of the page, see if that could shed any light on the problem
I forgot to add the HTTP:// before the URL so it thought it was a link on my site – adding it, fixed it fine.
For now, I’ll add the rest of my gripes about the front page to my ‘fix-it’ list, and move onto the portfolio page, which I’m sure looks amazing and perfect.
…At this point I’m not surprised.
So, this page is ugly and needs fixing – let’s jump right into it. The first problem is the boxes appear greyed out – worse still, the Corporate ID image is broken.
To add to this mountain of problems, as I added a new project, the ‘Skön’ project – found here – The Illustration thumbnail image was shown to be at least 100px too big for the rest of the images.
Unfortunately, my images of this process have been lost, however, this is the finished look:
Which is far superior in personal opinion.
The grid also works MUCH better than it did prior, as all the images are 600x900px – creating a uniform structure. This will be important for me to remember in any future projects that I host on the site.
Right, with all this done, let’s look at the ‘Fix It list’.
Well, I’ve already fixed both the Uniform and Cohesive image problem – although the border of the Pulse icon DOES rub me the wrong way, which I will fix in this – and the Atlas and Eyre picture link.
I’ve also fixed the ‘terribad’ Empire Project’s link.
There we go! The quote should be simple to fix too, just a quick trip to photoshop to mock up the quote again.
Truly, the most difficult piece I’ve ever done.
Now for something actually difficult; adding more work to my portfolio section. This, in theory, shouldn’t be difficult what-so-ever, but the difficulty comes from looking at my old work and cringing at how I designed things back then.
For the first extra, I’m going to use the ‘Create Britain‘ piece, about Rockstar Games, as well as design a small icon for it.
For the other free space, I decided to make a Typographic PDF of my short story, The Last Garrison, with the heading – The Realm – which encompasses all of my stories. This will allow me to upload my stories online, in a collected place, where they can gain attention from my work, and vice-versa.
…With that, I dare say we’re done here!
Conclusion and Comments
Well, that was fun!
This project is tied with Skön the most fun project I’ve had the pleasure of completing – so far – but not only that, this has also been a project where I’ve learned so much, as well as given myself a personal platform on the internet to upload my work to, for all to see!
Now, with that said, I’m fully aware of how decisive my site’s style is, which will naturally, put many people off. However, I personally believe that most will take the words as what they’re intended to be: humorous, attention getting, as well as a clear statement that while I can do serious work – as proven in my portfolio – I can have fun, and can be approachable by near-enough anyone.
Those that would be turned away by my words would likely, be those that I wouldn’t desire to work with/for in first place, even if that means metaphorically shooting myself in the foot – it’d be better than working for someone who’d treat me with animosity.
…Well that got dark…
Anyway, continuing on with my comments:
The best and most satisfying part of this project was watching all the pieces of my site fall into place, and start seeing the whole affair as one, sleek-‘ish’ cohesive design, specifically, the Portfolio, ‘Look at my bits’… bit, which as more was added to it, just started to look more and more impressive, and made me realise that I have worked hard and improved MASSIVELY since when I began this course.
Ever onwards, ever upwards!