Posted on January 16, 2012
Sterimatic Worldwide E-commerce
This is one of the paid projects that I was working on. My job was to design the website and make it work on Lite Commerce. It was interesting to try working with LiteCommerce and it was really nice to know that they had their first sale straight always when the website was released.
Visit SterimaticWorldwide
WeMakeLogos
We make logos is a project for my University Web Development module. We had to make 5 page website and show that we can work with HTML and CSS. For this project I decided to make something useful, not just wasting my time on something that I am not going to use or is not going to look good on portfolio. I decided to create online logo design company that works in 4 easy steps and it only costs £30. In this project I decided to include a friend that is graphics designer - Mitch Carless so he can help with designing the logos.
Mobile Website
I didn't really need a mobile version of the website but I just wanted to learn something new so I decided to to simple mobile version. I only managed to test the mobile version on Opera, Iphone and HTC HD7. I didn't have much time to spend on the mobile version because I am currently busy with LogicalViewSolution work. I am hoping to do something more interesting next time I have time. (They say if it works don't fix it)
Logical View Solutions
I've been doing a lot of work for LVS and I love it. We have new logo, new business cards and new website that is coming very soon. Also we made new Facebook page - http://www.facebook.com/logicalview We have big portfolio that will be on the website and at the moment business is picking up very well.
UnorthodoxStore
UnorthodoxStore worked very well for us. We managed to make a lot of sales! I mean a lot! I personally did't expect to earn much money from it but it looks like we are winning. Well we have few more projects running behind the UnorthodoxStore and hopefully business will pick up more. Visit the website and my blog to keep yourself updated.
Posted on November 13, 2011
Web Development is a fun process of planning and clever decision making that leads to great website for the internet. The process can be very complicated or sometimes very simple depending on the project. The process could include the template design, developing the code, server setup, network security and a lot of research. Technology changes all the time and if you want to be a good and well respected web designer/developer you have to be up to date with everything that is going on the internet. Most web designers don`t just design the website, they also program it when they work in small companies or for themselves. That gives them a BIG PLUS for future employability.
My advice is that you should learn as much as you can and try new stuff every time you develop a website.
Things you should be learning now
These are few of the things that I think you should be learning now and they will give your website a lot of power and interactivity:
- HTML 5
- CSS 3
- JQuery
- JavaScript
- Mobile Design - Development
- Flash AS3
Design you website for mobile too
The number of people that use the internet on their phones is growing and growing! Most people use the internet on their phone for Social Networking but others use it to find out some information quickly. It is very important that you make your website to work with any mobile devices because you are going to lose a lot of visitors. Many people leave their website the way it is on PC/MAC and I think its fine for
Spacing
Spacing is one very important think in the design industry. New Designers make that mistake most of the times, they don`t leave enough space for the users eyes. A lot of white space makes the users eyes relax, ready easy and also scan the content quicker. The other important thing about it is that it gives the user more open, clear and professional look.
Navigation
When you start thinking about the navigation think about the importance of it. Without navigation users won't be able to navigate thru the pages and the website with work. When design the navigation you have to think about the interaction and the clear look that makes the user spot it straight away. Most of the times designers use bigger size didn't from the main content so the navigation can pop up a bit more.
The normal user interaction about most of the navigation bars online are the rollover effect that shows when the mouse is over a button and the button is pressed in some causes. That is normal but its important to think about the colour change and also the role over effect as how would you program it to work. There are 3 main ways of making the navigation bar work.
1) CSS Sprite
I found that CSS sprite work the best for all browsers witch is super important and its the best for Search Engine Optimization. It is a bit more time consuming the first few times but as long as you get how it works ill make perfect sentence and you will love it.
2) Just CSS
I found that just simple CSS effects can be actually really cool and also good for the page loading time. You don't have to use images to make cool effects and now CSS gives you a lot more power. The only bad thing about using CSS3 for the effects is that it won't work on older browsers. Some people still use old browsers 
3) CSS and JavaScript
CSS and JavaScript can do magic. There are a lot of effects that can be created to entertain the user and it's not that complicated. Dreamweaver can help you create simple rollover effect with CSS and JavaScript.
4) Flash
Flash is the best way to make something interactive but it can be heavy for the web page and also it won't work on most of mobile platforms. With flash any effect can be done quickly and easy if you know how to use it. The other bad thing about flash is that if you want to update some of the links on the page, you are going to have to open flash and change the code each time unless you make it to get the link from XML or text file.
Template Design
My personal opinion is that the first thing one user gets attracted to is the website design. Most of the users don`t even care about the website design as long as they find the information they need. The website can be very simple and clean but if it`s made clear and delivers the content in a good way then the website design is good. A lot of young website designers make the mistake to put a lot of flashy things and a lot of colors.
The maximum color that you should put in one website design is around 4. If you don`t know how to use colors there is a lot of website with color palettes that can help you decide what colors to use.
The colors are really important for website design because they can change the feeling of it.
SEO
Search Engine Optimization is one of the most important things in the web development industry and the content is king. When you create a website you are creating it for certain auditory and its should be easy to find on search engines. Just try to imagine what would you search in order to find the website. In one website everything could affect the Search Engine Optimization - Pictures, Tags, Code, Links and so on...
The easy way of SEO is to pay a lot of money and have a lot of adverts all over the internet.
If you want to improve your SEO skills you are going to have to read a lot more then what I have said. One of the tools I would suggest using is the Google Developer page. They will give you a lot of information about your website and you will get the idea how to improve it.
Typography
Websites are made so people can find some sort of information, so in other to find information quickly on a website the text is very important. The most used fonts for the content of the website are: Tahoma, Arial, Helvetica and Lucida but there is others that you can use. The size its important too. I think that the size should be the smallest 11px and the largest 14px.
With headings its different. As long as they are big and easy to see so the user can recognize what is the text underneath is about then it's all good. It's pretty cool if you want to use something different and go for Google`s fonts. Make sure they suit the website feeling and design.
Usability
Every website on the internet got to be easy and simple so everyone can use it. It has to suit the target ordinance too. The best thing to do about usability is to add:
- Font resize option
- Change of the theme colors
- Dyslexia Theme option
- High Contrast option
- White Space
- Images
- Sound if needed!
Mistakes
- it's important that the website doesn't have spelling mistakes
- the choice of colors
- too much images - flash
- bad choice of fonts
- bad keywords - or too many
- Don`t underline text because users will think its a LINK!
Interaction
Website Interaction its pretty cool and everyone loves it! At least I do. I`ts cool when you have a lot of interaction with your users but be careful and put only things that are needed! Make pretty role over buttons and be careful with the pop-ups!
Content Management Systems
There are many Content Management Systems. Some of them are paid and some of them are Open Source. Depending on what you need to do for you project there is different content management system that can help you make your project easy.You don`t have to be a programmer to use them, but some basic knowledge of CSS and PHP will be very helpfull. There is CMS for blogging, image galleries, social networking and e-commerce.
Some of the best open source Content Management Systems:
- Joomla - used for Social Networking Websites mainly
- WordPress - blogging
- Magento - e-commerce
- Drupal - Social Networking
- B2evolution - Social Networking
- ModX - Could be used for many things
- PHP-Fusion - could be used for many things
Good Web Development Resources and Tools
Conclusion
There are too many website developers these days and If you like to be successful then you have to try hard. Learn as much as you can and practice is gold! One businessman told me that a good web developer is the developer who makes money not the one who creates better website.
Thanks for reading 
Comments below 
Reference
Juul Coolen. (Oct 15 2009). 7 Key Principles That Make A Web Design Look Good. Available: http://www.noupe.com/how-tos/7-key-principles-that-make-a-web-design-look-good.html. Last accessed 14th
Collis. ( May 14, 2011). 9 Essential Principles for Good Web Design.Available: http://psd.tutsplus.com/tutorials/designing-tutorials/9-essential-principles-for-good-web-design/. Last accessed 14th
Vitaly Friedman. (January 31st, 2008). 10 Principles Of Effective Web Design. Available: http://uxdesign.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/. Last accessed 14th November 2011.
Chris Lake. (04 August 2008). 20 colour tips for website design.Available: http://econsultancy.com/uk/blog/2654-20-colour-tips-for-website-design. Last accessed 14th November 2011.
RICHARD BURCKHARDT. (APRIL 23, 2008). 55 Quick SEO Tips Even Your Mother Would Love. Available: http://www.searchenginejournal.com/55-quick-seo-tips-even-your-mother-would-love/6760/. Last accessed 14th November 2011.
1624 Words with Reference and Links.
Posted on November 11, 2011
Image optimization is really important for website design and also Search Engine Optimization also called SEO. The optimization process of the images its important because if you have optimized images for the web that means that your website loading time will be much faster and also the website will go higher in the rank list. There is two ways of optimizing images. To optimize images you can eather use Photoshop/Fireworks or you can use online image optimizer.
If you want to check if your website is optimized good for the web you can register Google Webmaster tools.
How to optimize images with Photoshop CS5
1.) Open Photoshop and load any random image that you want to optimize for the web.
2.) Go to File - Save for the Web & Devices (On Windows Alt + Shrift + Ctrl + S)
3.) Look at the menu on the right side and change the quality of the image. The less the quality is the less the file size is and the faster will open in the web page. There are different formats that you can choose from and compare the Quality. In the screenshot you will see that I have compared 4 different qualities and formats.
4.) Click on the Save button at the bottom and just give your image a name. Don`t put special characters and try to avoid uppercase letters even that the new browsers are very clever.
Conclusion
After this you should understand how to optimize your images for the web and other devices. It is good to learn a bit more about formats and other important things like moving images and how to save them. Web browsers read most of the image formats but users won`t wait for your large images to load... they will move on to the next website.
Posted on November 11, 2011
DOM
D stands for Document - web page.
O stands for Object - example h1 tag is an object.
M stands for model- the HTML tree is the document model.
DOM describes how we can interact with the pieces of a web page. For example CSS uses DOM to style and present HTML. JavaScript uses the DOM to interact with HTML.
What does the "Cascade" mean in CSS?
Cascade is
CSS Selectors
id (#) selector: can be assigned only once in the html tree
class (.) selector: can be assigned more than once in the html tree
tags (h1) : might re-assign the style of the tag in the element tree
Example of ID: <div id="box">My box</div>
Example of Class: <div class="box">My box</div>
Example of h1: <h1>This is my heading</h1>
Typography
Fonts are very important in the design and website industry. Every designer should have a good knowledge about fonts because they could change the look and the feel of the design/website. There are 2 main types of fonts - Serif and Sand Serif.
Examples:
Font Mistakes
Logos
Logo is one of the most important thing for brand. Companies names are usually easily remembered by the logo. Logos are usually created in vector with maximum 4 colors and some text. Here are few professional logos:
Here is another example of "amazing" logo:
White Space Rules
White space is very important concept in every design (example: website design, business card, flyer, poster). White space gives every design more simple and open look. The advantages on the web of the white space is that the user can scan the text easily and it won`t hurt the users eyes to read for longer.
Here are some examples of good design with a lot of white space:
Business Card
Website Design
Flicker
Twitter
Flatter
Making your first logo
When making a logo I suggest that you know some information about the brand. Learn about what your clients expect to see and look for inspiration online. Logos must be simple and also very attractive and easy to memorize. The best way to start logo is to sketch some ideas on piece of paper or if you have graphics tablet you can start sketching it straight in your computer. The most common software for creating logos is Illustrator, but you can always use Photoshop, Fireworks or Gimp.
Useful link: Steps of a Successful Logo Design Process
First Step - Sketching some logos
Second Step - Turn them into Vector
Extra Info:
