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.
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.
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
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.
In this article you will see 3 really clean and professional website designs. For my selection I have choose the official websites of Apple, HTC and Windows Phone 7.
Why these 3 designs?
Clear layout
Easy to navigate
Quick loading time
Good content
Attractive
Good interaction
they work well on mobile devices
Apple Website Design
Windows Phone 7 Website Design
HTC Website Design
Mobile Website Design
Developing a website for mobile device now is becoming more important than developing it for PC/MAC. More and more smart phones are been used for browsing the internet every day. If you don`t make the website to work on mobile device then you will probably lose a lot of visits.
Here is a link to tutorial that explains more how to create website for mobile device.
The aim for Introduction to Web Development page is to teach you basic Web Development and Design skills. Every week I will be adding interesting stuff and I will start from very basic so you can understand how things work.
Basic skills that you will pick up from my tutorials:
HTML & HTML5
CSS & CSS3
Design Website
Principles of Web Development/Design
Dreamweaver or Notepad++
Photoshop
Illustrator
Basic Flash AS3
Flash Animation -possibly
Basic JavaScript
PHP
FireZilla
The information that I will provide each week should help you to get you started at design and programming simple websites. The sources I am using will be provided after each post or in Source Page. Most of the images I use will be from www.sxc.hu.
Do you need any web development skills or tools?
It will be very helpful if you have some kind of basic skills but you don`t need to have any because I will start from the bottom. The software that you might need: Photoshop, Dreamweaver, Notepad++, Flash, FireZilla, and XAMPP. Don`t worry if you don`t have all these tools, Notepad and Gimp would do the job to set up nice looking website.
Free Software?
Notepad++
FireZilla
Gimp
XAMPP
The operating system that I use to create websites websites?
I use Windows 7 and Windows XP but you can away download similar tools for MAC and LINUX.
Please share the information that I provide but don`t copy!
Display:
Type: Touch screen with pinch-to-zoom capability
Size: 4.3 inches
Resolution: 480 x 800 WVGA
Platform: Windows Phone OS 7 Camera:
5 megapixel color camera
Auto focus and dual LED flash
720p HD video recording
Built-in scenes include candlelight, landscape, and portrait match the environment of your subject
Connectors:
3.5 mm stereo audio jack
Standard micro-USB (5-pin micro-USB 2.0)
Sensors:
G-Sensor
Digital compass
Proximity sensor
Ambient light sensor
HTC Hub:
Weather, Stocks, Converter, Photo Enhancer, Sound Enhancer, and more
Downloadable apps and games
Multimedia:
See photos from your camera, Facebook® and Windows Live™ accounts in the Pictures hub
Music and Videos Hub powered by Zune® lets you listen to radio, download music, and more
Dolby Mobile and SRS surround sound
Asia Pacific:
HSPA/WCDMA: 900/2100 MHz
GSM: 850/900/1800/1900 MHz
Internet:
3G:
Up to 7.2 Mbps download speed
Up to 2 Mbps upload speed
GPRS:
Up to 114 kbps downloading
EDGE:
Up to 560 kbps downloading
Wi-Fi:
Wi-Fi: IEEE 802.11 b/g/n
Bluetooth:
Bluetooth 2.1 with Enhanced Data Rate
A2DP for wireless stereo headsets
Other supported profiles: AVRCP, HFP, HSP, PBAP
Social Networking:
Facebook® and Windows Live™
Share photos on Facebook® or Windows Live™ SkyDrive®
Location:
Internal GPS antenna
Bing™ Maps
Special Features:
With kickstand
Customize your phone with live tiles which dynamically update all key information right on the Start screen
Choose from thousands of video titles and music tracks via integrated Zune® services
Play console-quality video games with XBox LIVE® integration
Dimensions (W x D x H): 68mm (2.68″) x 11.2mm (0.44″) x 122mm (4.8″)
Weight: 162 grams (5.7 ounces) with battery
Recommended Windows System Requirements:
Windows® 7, Windows Vista®, or Windows® XP
Zune® software