Wednesday, 28 September 2011
Static Webpage Defintition
A static web page is a web page that is delivered to the user exactly as stored, in contrast to dynamic web page which are generated by a web application.Consequently a static web page displays the same information for all users, from all contexts.Static web pages are often HTML documents stored as files in the file system and made available by the web server over HTTP.
Pricing guidelines - How to give a design quote
"1. Single Page Website
Single Page website price from £250.Four or Five Page website price will cost about £350 - £450." This is a statement on the http://www.toucher.co.uk/website-price.htm#websiteprices , refering to the price that should be charged or how to work out the set cost for a website. The rates for a website increase with extra features such as javascript and J query. Also the price varys on the amount of pages and time taken, with the extra use of coding adding to the equation. All of which adding to the equation of overall cost. After taking some time to research the variables and look into web companys specifically looking at how they quote a design. I realised that it depends on the brief from the client and there is no set price just guidelines on how to price up all the aspects involed in creating a functionaly site that is fit for purpose. In some cases going from three to four figures.
Single Page website price from £250.Four or Five Page website price will cost about £350 - £450." This is a statement on the http://www.toucher.co.uk/website-price.htm#websiteprices , refering to the price that should be charged or how to work out the set cost for a website. The rates for a website increase with extra features such as javascript and J query. Also the price varys on the amount of pages and time taken, with the extra use of coding adding to the equation. All of which adding to the equation of overall cost. After taking some time to research the variables and look into web companys specifically looking at how they quote a design. I realised that it depends on the brief from the client and there is no set price just guidelines on how to price up all the aspects involed in creating a functionaly site that is fit for purpose. In some cases going from three to four figures.
Friday, 23 September 2011
Illustration Of Man
This is an illustration I did in my spare time. Using pen and ink to give the rough effect before scanning it in to add the other details, such as textures and lighting effects.
Old Techno Portfolio Website Evaluation
This is the portfolio website that I used as a prototype to test how i would potray my work. Not only showing the websites I have done but selling my designs to future cilents. I began like before by going through everypage and beta testing the pages looking at the navigation and quality of the visuals and content. I started by adding a few animations and motion tween to specific pages. Making subtle changes that made the pages more interesting to the browser. The next change I made was transforming the work done page. I perviuosly had screenshots of the designs I had done with a small caption of writing. I developed the page into a gallery with icons to flick through my work. This made the page stand out more visualy and gave the browser control over what they want to view within the work done section. I also added three social icons to the footer of the contact page. For other methods of contact and viewing other content. After making these few changes and adjustments to the home icon position and padding of divs. I began testing the amendments on all browsers, such Google Chrome, IE9 and Firefox. I then finalised the design by Validating and checking it a final time to ensure it runs smoothly.
Wednesday, 21 September 2011
New Portfolio Design
Here is the first intail idea that I drew up.
My New portfolio design
This is the wireframe for my portfolio website. I developed this design from numerous sketches and hand drawn wireframes. Which ended with this as the final product. I intend on turning this graphic wireframe into a fully functional home page for my website. It consists of a box style toolbar that spreads across the header of the page. Which will have an animate mouce over effect for the text and links. Whilst having a Jquery sliding gallery below with a reel of my own illustrations and imagegry. I believe once completed and finalised the piece will speak for its self with bold imagergy, strong graphics and easy navigation whilst being fit for purpose.
Below is what I developed from the first wireframe to create my new portfolio design.
My New portfolio design
This is the wireframe for my portfolio website. I developed this design from numerous sketches and hand drawn wireframes. Which ended with this as the final product. I intend on turning this graphic wireframe into a fully functional home page for my website. It consists of a box style toolbar that spreads across the header of the page. Which will have an animate mouce over effect for the text and links. Whilst having a Jquery sliding gallery below with a reel of my own illustrations and imagegry. I believe once completed and finalised the piece will speak for its self with bold imagergy, strong graphics and easy navigation whilst being fit for purpose.
Below is what I developed from the first wireframe to create my new portfolio design.
Monday, 19 September 2011
Mobile Website for android and Iphone
I have made anbd developed an Iphone/ Android based website. I created the coding and made back up lines with the iphone and Android Icons saved. So when in use it looks proffesional and functions effortlessly. I used a iphone simulator to test it called Xcode 4 which is Apples development enviroment for creating Apps for Mac, Iphone and Ipod. Xcode Includes Xcode, IDE instruments and the simulator to help test and design. In this process I created a simple index page from an idea. Which I developed into a few pages. From this I added the graphics and tested it not only on the Xcode 4 but on Google chrome and Internet explorer. Below Is a few screen shots of the product. In the design process I started it the same as a normaly webpage in dream weaver. Structuring the site as normal with exceptions for the start up code for Jqtouch that sets icons and start up screens. All of these steps where straight forward and done following the step by step guide creating this Iphone/ Android mobile application.
People per how (website)
This is a useful website I found that is designed to hold jobs that can be bidded on by freelance designers to ethier gain experince or just add too their exsiting portfolio. You are competing against other designers but it is a great website to get your foot on the ladder and gain an insite into the industry.
QR tag (Quick Reponse code)
A QRtag or Quick Response code is a twodimensional barcode. These are often used for adding web links to a printed page. When scaned using a web cam or mobile phone camera, the QR reader application can take you to a Web site, a YouTube video or some other web content. QR codes are an easy way of sending people to a site without having to type a URL
Also QR tags can be used for containing other information such as;
A QR code on a business card can contain an electronic version of the contact information. Scan the code and the reader application adds the contact to your address list.
A QR code can contain event information. Scan the code on a poster for a concert and the app automatically adds its name, date and location to the agenda on your smartphone or PC.
A QR code can contain an SMS with phone number and text. Scan the code and the scanning app lets you automatically participate in some contest to win fabulous prices.
A QR code can contain an e-mail message with a subject and message text. That message can be a request for information so that in return you might get a reply email with additional information and attached files.
A QR code can contain a geographical location. Scan the code on a poster advertising for a restaurant and its location becomes available to your navigation software, informing you how to get to that place.
WIFI configuration data.
These are many of the Uses a QR tag can have, I have been researching into QR tags to try adding one myself to my website. At the moment it is early days and Im still decied what to use it for and how to make it. I have found a website that you can create a QR tag for free online but personally I would like to have a look at the coding and see how it works and possibly try it myself.
Here is a useful link : http://www.qrtag.net/create
Also QR tags can be used for containing other information such as;
A QR code on a business card can contain an electronic version of the contact information. Scan the code and the reader application adds the contact to your address list.
A QR code can contain event information. Scan the code on a poster for a concert and the app automatically adds its name, date and location to the agenda on your smartphone or PC.
A QR code can contain an SMS with phone number and text. Scan the code and the scanning app lets you automatically participate in some contest to win fabulous prices.
A QR code can contain an e-mail message with a subject and message text. That message can be a request for information so that in return you might get a reply email with additional information and attached files.
A QR code can contain a geographical location. Scan the code on a poster advertising for a restaurant and its location becomes available to your navigation software, informing you how to get to that place.
WIFI configuration data.
These are many of the Uses a QR tag can have, I have been researching into QR tags to try adding one myself to my website. At the moment it is early days and Im still decied what to use it for and how to make it. I have found a website that you can create a QR tag for free online but personally I would like to have a look at the coding and see how it works and possibly try it myself.
Here is a useful link : http://www.qrtag.net/create
Across All platforms
I tested a turtorial I found that makes a mobile site work across most platforms, targeting a larger market. In this turtorial I achieved a mobile website that uses lines of J query code to make it work on all devices giving that freedom to the browser. The turtorial also helped me grasp how to create a simple but effect mobile website. This is one of the first proper mobile interfaces I have made that isnt just a side site from the main one. I even made the effort to add a specific code whilst using percentages within the design to resize the application so it works on tablets too.Below is a screenshot of the intail homepage and the contact page, with the contact form.
Tools of Trade - Web design
Below I have listed a range of different tools, methods and vices used within webdesign.
HTML 5 - html5 is the succesor to XHTML1.1. HTML 5 is going to revolutionise the web. It is an extension of HTML4. Html itself is the language that powers the web. The code its self literally marks up the contnet that is presented on every page. HTML stands for hyper text markup langauge. It was developed as a simple language to link text documents together. HTML3 and HTML4 lost there way and allowed developers to specify colours, fonts and other visual content in the markup. This made the code especially messy. With HTML5 and XHTML readressed this by sperating design from content. Instead using a style sheet to add the visuals. HTML5 goes far beyond XHTML with mark up and new tags such as articles, stories, asides, headers and footers- and much more. For the first time web designers can truly mark up their code in such a way that the code can describe the code within properley. This allows search engines to quickly establish the content of a page, and therefore return more accurate results. Also allowing develops to reduce the amount of code they need to write. HTML5 being the future to webdesign and a great addition in developing the website, with most browsers surporting it.
Css3 - Css is an acronym for Cascading Style sheets. This is what makes and is used to create the webpages visualy appealing. Originally webdesigners wrote the code and embeded it straight into the HTML but this led to very heavy code with confusing markups in pages. Css was the solution to the problem allowing the content to be sperate from the deign. Each element in the page can be targeted from CSS and a series of visuals.
Dreamweaver- Dreamweaver is the web design and development tool .Originally the product of Macromedia. Recent versions produce clean code that works well. As well as the ability to edit HTML, CSS, javascript and server side code, other built in functionality includes testing live server and allowing to constanly check the site through any browser in design view.
Javascript- Scripting language that incresingly powers the special user interactions and effects that are on the web. Javascript is now the most popular scripting language within the web. The most advanced user interactions that arent created using flash or sliverlight where powered by javascript. The language allows the developer to respond to user interaction and change elements on the page, from visual characteristics such as width, height, background colour and so on to position visabilty and contents.
wordpress-It is a content management system on the web. The system uses a template scvheme to publish content. This templating system allows the developer to create any number of different looks for a wordpress powered website, all thwe while maintaining the content seperately from the design.
PHP- PHP is a server side language that enables more complex computing that can be achieved server side only. The acronym stands for Hypertext Preprocessor, but originaly stood for Personal Home Page. The code itself is quick to develop and deploy, while retaing full power of a desktop programming language.
MySQL-MySQL is a open source database server.It doesnt have any direct user interface being a relationship database.
Joomla
Joomla is a content management system that is competor of Drupal.
Drupal- This is a free content management system written in PHP. It contains the core features as all common CMS platforms, including user accounts, menu management, content management, page layout and templating.
Flash-Is a multimedia object designed to sit within a website as a plugin or embeded.
HTML 5 - html5 is the succesor to XHTML1.1. HTML 5 is going to revolutionise the web. It is an extension of HTML4. Html itself is the language that powers the web. The code its self literally marks up the contnet that is presented on every page. HTML stands for hyper text markup langauge. It was developed as a simple language to link text documents together. HTML3 and HTML4 lost there way and allowed developers to specify colours, fonts and other visual content in the markup. This made the code especially messy. With HTML5 and XHTML readressed this by sperating design from content. Instead using a style sheet to add the visuals. HTML5 goes far beyond XHTML with mark up and new tags such as articles, stories, asides, headers and footers- and much more. For the first time web designers can truly mark up their code in such a way that the code can describe the code within properley. This allows search engines to quickly establish the content of a page, and therefore return more accurate results. Also allowing develops to reduce the amount of code they need to write. HTML5 being the future to webdesign and a great addition in developing the website, with most browsers surporting it.
Css3 - Css is an acronym for Cascading Style sheets. This is what makes and is used to create the webpages visualy appealing. Originally webdesigners wrote the code and embeded it straight into the HTML but this led to very heavy code with confusing markups in pages. Css was the solution to the problem allowing the content to be sperate from the deign. Each element in the page can be targeted from CSS and a series of visuals.
Dreamweaver- Dreamweaver is the web design and development tool .Originally the product of Macromedia. Recent versions produce clean code that works well. As well as the ability to edit HTML, CSS, javascript and server side code, other built in functionality includes testing live server and allowing to constanly check the site through any browser in design view.
Javascript- Scripting language that incresingly powers the special user interactions and effects that are on the web. Javascript is now the most popular scripting language within the web. The most advanced user interactions that arent created using flash or sliverlight where powered by javascript. The language allows the developer to respond to user interaction and change elements on the page, from visual characteristics such as width, height, background colour and so on to position visabilty and contents.
wordpress-It is a content management system on the web. The system uses a template scvheme to publish content. This templating system allows the developer to create any number of different looks for a wordpress powered website, all thwe while maintaining the content seperately from the design.
PHP- PHP is a server side language that enables more complex computing that can be achieved server side only. The acronym stands for Hypertext Preprocessor, but originaly stood for Personal Home Page. The code itself is quick to develop and deploy, while retaing full power of a desktop programming language.
MySQL-MySQL is a open source database server.It doesnt have any direct user interface being a relationship database.
Joomla
Joomla is a content management system that is competor of Drupal.
Drupal- This is a free content management system written in PHP. It contains the core features as all common CMS platforms, including user accounts, menu management, content management, page layout and templating.
Flash-Is a multimedia object designed to sit within a website as a plugin or embeded.