Deals on Wheels
This post will contain a brief description about my website and what it will contain. My website is about different cars and will contain information about the name, age and price of each car. My website will include 5 different pages which are linked together. The main "Home" website will include a navigation button which links to the different pages. I will also include images and and specific information about certain cars such as the Price, Make, Model etc. I will also have a navigation chart which links all my pages together. This website has been made for customers who are fascinated by different types of cars such as the on in my website e.g. Classic cars and Super cars.
My website will also contain a constant colour scheme which will be Blue and White and stay throughout my whole website.
The pages I will have are as follows:
- PAGE 1: Home: Welcoming the user to the website with images included and a overview of the whole website. The web page will include the navigation links that link to the other pages.
- PAGE 2: About us: A brief description of our website and what we provide our customers. It will describe a few of the cars that are shown on our website.
- PAGE 3: Super Cars: Images of different super cars and a brief description of each one of them.
- PAGE 4: Classic Cars: Images of different super cars and a brief description of each one of them.
- PAGE 5: Contact us: A page containing ways that the customer can contact us for information about the cars. For example Telephone Number, Email Address or Fax.
Navigation layout of the website
------------------------------------------------------------------------------------------------------------
HTML; Hyper Text Mark-up Language is a language
which describes web pages. HTML is a mark-up language and is designed for the
definition, processing and presentation of text within a web page. Both the
layout and style within a text file is specified by the code language for
formatting. A mark-up language is a set of mark-up tags and these tags describe
document content.
For example:
<HTML>
<body>
<h1>FIRST HEADING</h1>
<p>FIRST PARAGRAPH</p>
</body>
</head>
CSS: Cascading Style Sheets are styles that
basically define how HTML are going to be displayed. External Style Sheets can
save a lot of work and are stored in CSS files. The styles are saved in
external .css files. By editing a single file, external style sheets allows you
to change the appearance and layout of all the pages in all the web page. External
style sheets are stored in CSS and CSS are used to create a number of styles and
then consistently apply these styles throughout a web site. CSS allow you to give a site a consistent
look, save you time, tidies up your HTML code and allow you to change an entire
site
Komodo Edit: This is a multi-language editor
that allows the user to enter simple codes which lead to creating simple
layouts and formats on a web page. It is a free and open source software and is
available to users on Windows, Linux and MAC. A good thing about this software
is that it allows you to open a project as a template or allows you to use a
file that was recently saved.
Wire frame tools: This is framework made with wires,
which define basic layout and placement of content and page elements such as
navigation; header & footer; branding etc. enables th4e user to easily create the navigation of the users website with built in tools such as boxes, diagrams and being able to add text.
Lorem Ipsum: This is a "dummy Text" which is used to temporary text on the design of a website. This is made in order to add text into designs that you are working on so that you can see where and what the text will look like on your web page. When designing the website you would use Lorem Ipsum as it is just temporary text. Lorem Ipsum also allows you to choose the amount of paragraphs you have in your web design. This can be accessed by using the website which is www.loremipsum.com.
Gliffy: This is a graphics tool which is used to create nagivation diagrams and flowcharts for the design of your website. This provides you with different shapes to create the design your navigation such as Square, Rectangle and Circles. Gliffy also allows you to add images and everything what made for you so all you basically had to do in order to design your website is drag different tools into it. The menu bar provides you access to the basic commands which you will be needed to share, save and print documents. Images can also be easily resized if they are too big and you can add your image to your own Gliffy library.
Reference:
http://www.experiencesolutions.co.uk/questions/what_is_wireframing.php
http://www.motive.co.nz/glossary/stylesheets.php
http://www.pcmag.com/article2/0,2817,2403220,00.asp
......................................................................................................................................................................
Lorem Ipsum: This is a "dummy Text" which is used to temporary text on the design of a website. This is made in order to add text into designs that you are working on so that you can see where and what the text will look like on your web page. When designing the website you would use Lorem Ipsum as it is just temporary text. Lorem Ipsum also allows you to choose the amount of paragraphs you have in your web design. This can be accessed by using the website which is www.loremipsum.com.
Gliffy: This is a graphics tool which is used to create nagivation diagrams and flowcharts for the design of your website. This provides you with different shapes to create the design your navigation such as Square, Rectangle and Circles. Gliffy also allows you to add images and everything what made for you so all you basically had to do in order to design your website is drag different tools into it. The menu bar provides you access to the basic commands which you will be needed to share, save and print documents. Images can also be easily resized if they are too big and you can add your image to your own Gliffy library.
Reference:
http://www.experiencesolutions.co.uk/questions/what_is_wireframing.php
http://www.motive.co.nz/glossary/stylesheets.php
http://www.pcmag.com/article2/0,2817,2403220,00.asp
......................................................................................................................................................................
Design for each page:
Page 1 Design:
This is my first page. The home page will include the image that i have used in the design, text welcoming the customers to my website. It will also include the my own logo. All
Page 2 Design:
This is my second page. The About us page will include one image of a car and provide you a brief explanation of what the website is about and what they include.
Page 3 Design:
This is my third page.The classic cars page will include 4 images as shown above and will include a brief description on the right about each classic car e.g. the make, age and price.
Page 4 Design:
This is my fourth page.The super page will include 4 images as shown above and will include a brief description on the right about each classic car e.g. the make, age and price. This will have the same layout as page 3 as it is roughly about the same thing
Page 5 Design:
This is the fifth page. The Contact Us page will include a image or two of either a mobile phone or a map to show where we are located and the contact details.
As the design images above shows that the back ground is white, the actual website includes a background coloured blue behind the logo, a banner going across the bottom in line with the "Copyright: Raad Begh" and also include a dark blue border which will make everything inside the page stand out.
SPONGED
ReplyDeleteThanks for sharing this wide knowledge with us. I really liked it. It will be helpful to each reader. Houston web Design Company
ReplyDeleteIt proved to be Very helpful to me and I am sure to all the commentators here! Web design Pattaya
ReplyDeleteThank you for another great article. Where else could anyone get that kind of information in such a perfect way of writing? I have a presentation next week, and I am on the look for such information. Online Quran Academy
ReplyDeleteReally I enjoy your post with effective and useful information. Thanks for sharing your post. I enjoy this post...
ReplyDeleteDesign Agency Los Angeles
QuickBooks Customer Service has assembled a solid dependence inside the customer base that clients can get any of their issues settled by approaching toll-free Number + 1-833-780-0086.
ReplyDeleteMany thanks for providing me with such valuable information about ux design company. Waiting for more information from your end to keep us apprised of new developments and updates of your websites.
ReplyDeleteThanks for sharing more valuable information awesome blog, for better understanding & learning website design in wordpess join Victorious Digital. Join Best Digital Marketing Courses in Pune with 100% Placement Assistance at affordable fees. Best Training Institute & Classes Pune
ReplyDeleteDigital marketing courses in Pune
Java classes in Pune