First we had to come up with a design. We started looking for examples of other websites or certain design features we fancied. We came across a few aspects from other websites we wanted to incorporate into our website, for example their buttons, design concept and colour pallet. The things that stuck out to us most was the minimalist, simple and easy to use websites.
We Googled things such as: 'Best 2014 website designs', 'Minimalist websites', 'Not for profit webpages' and 'Design templates'. I would recommend coming up with a look before you start researching other websites, this way you make it an original concept and then start looking for inspiration and ideas which you can then add onto your idea. This is a good idea to stop people coming back later claiming plagiarism, but in saying that, there is nothing new under the sun, and if your are stuck for ideas go for it.
Here are some websites which we liked the look of:
www.bendavidsandhu.com
This website has been beautifully made, The home page is made up of 5 horizontal pictures, all laid out in a row with a side scroll. When you place your mouse over the image which is also a button, the image shifts to the right and has a black opaque overlay texture applied to it.Once you click on one of the 5 images, it takes you to a full length page with what seems like an endless scroll.
Having all the information on the same page is good for Google marketing, as Google takes all the information from the homepage, every single word you post and image name.
This optimizes search engine results to your page as when someone types matching words into the search bar your page will come up first.
www.charitywater.orgThis website is very minimal and sleek. This was the main website where we took inspiration from. We loved the simplicity of the website, and how it had minimalist logos which directed you to the next page.
We also loved the icons, as they were very simple but look very creative. The use of colour on their page also stood out, and how they used the constant theme of blue across their website symbolizing water.
We then came up with an aesthetic look which would cover across the board in regards to our brands style. At this stage we had already filmed the first half of the promo video which had quite a grungy and dark feeling to it, and to contrast that, our logo was very sleek, minimalist and white.
We decided that our website is a gateway to resolving the issues surrounding the sex slave industry in Kolkata, so it should be sleek, minimalist, modern and pure.
We sketched a few looks and how each tab would work:
We came up with a pinwheel look, the home screen would be made out of 4 inner circles. These would fade in one after each other, the design would end up looking like a globe. The colours would be silver tabs with a white background, when you put your mouse over the tab it would darken.
The outer slices would expand from the inner slice when pressed, and once those are clicked, would load up a separate page with the information on it. You would then be able to press the same inner tab and it would bring you back to the home screen
We really liked this look, and went away from the one page look. We thought this would be very creative and pleasing to the eye, it would also encompass our design concept for the whole project and would please people who come across the website.
As I don't have any experience with code, I decided that I would use a website builder which is capable of HTML5. I used a website builder called WIX which I recommend for basic website building. www.wix.com is great at creating creative, easy to use, drag and drop websites. It has lots of addons (most free) which are extremely useful. It has a mobile builder which you can create a different version for your mobile visitors.
You can view the first concept bellow:
http://ahartstonge.wix.com/ownasweatshop2
I started creating my website in Adobe Illustrator as it is vector based, I would recommend using this platform as no mater what screen size your site visitors use, it will not look pixelated.
I find Photoshop is allot easier to use, but it will render out images which do become pixelated.
Every tab and button, Wording and images were all in a separate layer, the outer slices were all on different pages so when people pressed on the inner slices it would seem seamless.
Issues I came across when creating the website this way is that when you export a PNG picture which is not a square, when you create a command for that image which when someone moves their cursor over the image, you want it to change colour so that the person knows its a button, would not work.
Also because there were so many images on one screen creates allot of lag.
As I was editing the website on a 27inch widescreen monitor, I then realized when I tested the website else where on smaller screens, it would not fit on the screen or every time you pressed a link would move the screen and shift the buttons.
I also had a huge problem with Internet Explorer loading the website, and had to create a new home screen so that it would redirect IE users to a different webpage.
After getting a few people to test the website, I found it to be not functioning the way I wanted it too.
Here is the first look of the website:
It was the night before our website launch that we decided we needed to scarp the website and start fresh. We needed something that would work on all platforms and was easy to use. We made a standard website which everyone would be able to navigate around. I still am adamant that I will get the first website working, but will work on that at a later stage.
Here is the second website idea which we ran with:
The next steep of launching the website is to remove the wix.com ads and link our domain name to it.
When you use Wix you will get a web link which looks something like 'yourname.wix.com/yourwebsite'.
If you are short on cash you can use this web address but I strongly recommend you purchase a .com or .org to make your campaign have a more professional image.
I would advise you to not get a .me or .anythingelse domain as these are hard to remember. When coming up your brand name, make sure there is a .com domain available or if not, change your brand name. A website address is the most critical thing when starting up, because you don't have a store which people can see your work, the website is the only tool you have to drum up excitement or interest in your project.
Purchasing the Domain
So what is a domain?
A domain is essentially a web address which you put into your address bar. An example of this is google.com.
A domain name is not the website you just designed but it is a name for your website, a gateway for potential customers to access your website.
Still confused? Here is an example: my name is Xavier (This is the domain; when you call me by my name I will respond) I have green eyes (This is your website; It holds all the information).
What is the best domain to buy?
The best domain to purchase is a .com I would recommend you change your brand name if you can not get a .com or .org with your brand somehow worked in it, and easy to remember.
Try not to use '_' or '-' as this is hard to remember, also don't make your website to long.
For example: howtoownasweatshop.com we did not chose to make this our web address as it is ridiculously long, which is why we went with ownasweatshop.com.
Another example to not use would be slang words, as when spoken, it is hard to remember how the website was written. eg: ownaswtsp.com or urpretyc0olaye.com
Where is the best place to buy a domain?
The website which I used to buy my domains was www.godaddy.com
Godaddy is moderately easy to use, and also has allot of users and is cheap. This is good because if you need any answers on how to do a certain function, everything is on Google or on Youtube.
They also have sales where a .com can range from $3 - $14 per year. Just be careful when going through the checkout, as they try and make you purchase allot of unnecessary add ons. Make sure these are all unticked.
If you are concerned with privacy and people knowing where you live, your email address and phone number, either enter incorrect details when signing up or purchase 'Private Registration' which is $12 per year. There is a website called 'whois' which without Private Registration, will publish all your sign up details when you create a domain account. This also helps protect yourself from spam, scams, prying eyes and more by shielding your personal information from public view.
No comments:
Post a Comment