ALT + F4 Technology news, programming, design, reviews, how to tips and art…

New stuff that I have been working on…

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.

 

Image Optimization – Photoshop

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.

Web Design Wireframe

Posted on October 28, 2011

The Difference between a sitemap and information architecture?

Sitemap

Sitemap is a list of pages that looks like a tree, used as a planning tool for a website or web application.

Simple website sitemap structure

Architecture

Information architecture is used for detailing complex systems or large web applications.

What is the difference between wireframe and a prototype?

Wireframe is the website design structure usually made with just simple boxes saying where the menu and content will be. The advantages of wireframing is that you can show your client how the website will be structured before you start the actual design. If you design different websites with different structures and the client doesn't `t like it that could be waste of time for you the developer/designer.

Prototype is a demo of the website design that shows how the website will look and work. There could be some kind of interaction.

What is the difference between website and web application?

A website is collection of static content and web application is dynamic, interactive web system.

 

Let`s Wireframe the Windows Phone 7 Website :P

First of all I choose the Windows Phone website because its clean and attractive. (in another words it makes you buy the product)

Making the grid will help us cut the images easy and also style the website in CSS very easy. To place the grids I used Adoby Photoshop CS5 but you can always use Fireworks if you prefer it. What I did was I took a screenshot of the Windows Phone 7 website and paste it in Photoshop. After  that I started dragging the grids to align where the content will go.

Here is an example of the first grid. ..

Gird 1

From Grid number 2 you should be able to understand why I did the grids. The gray boxes are for the content(menu,pictures,text)

Gird 2

Grid 3

 In Gid number 4 I named all of the boxes, where the content will go.

Grid 4

In this situation I will be using the grid from Windows Phone website witch means that at the end when I create the CSS for it and put the content I should have good and clear layout.

In the next tutorial I will style the Grids with CSS and leave a link for download.

Useful Links:

Making myself older in Photoshop CS5

Posted on October 22, 2011

I had to make myself look older with Photoshop for my Creative Computing module. I think I spend just less than an hour making it. Its not perfect but here is the result. If you want to see how I made it you can watch the video of me doing it in HD.

How to make yourself old in Photoshop

 

Making Myself older in Photoshop CS5

Intro to Web Development with Raddy – About

Posted on October 8, 2011

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!

 

 

Bear drawing – Photoshop & Illustrator

Posted on September 26, 2011

Few weeks ago I was a bit bored and I decide to do some drawing. Most of the work I do its been recorded just to fill my blog and remind me for the good time :)

As always I used Photoshop to sketch the drawing and then Illustrator to make it vector.