The only draw-back to this is that it may cause confusion to people who don't know video games, and it may just be an inconvenience. I will have to equate the pros and cons of a page like this to see whether it is worth the extra time.
Sunday, 30 October 2011
Site Map
Below is a site map of what should be on my website:
The very first index page is a new idea I had recently. Since the video game industry is of interest to me, and I enjoy video games in my spare time, I thought it would be quite cool to have my banner at the top and then a flashing image saying "click start" prompting the user to click it to go to the home/blog page of my website.
The only draw-back to this is that it may cause confusion to people who don't know video games, and it may just be an inconvenience. I will have to equate the pros and cons of a page like this to see whether it is worth the extra time.
The only draw-back to this is that it may cause confusion to people who don't know video games, and it may just be an inconvenience. I will have to equate the pros and cons of a page like this to see whether it is worth the extra time.
Friday, 28 October 2011
Search Engine Optimisation
Search Engine Optimisation (SEO) is in other words designing your website to work well with search engines like Google, Yahoo! and Bing.
Briefly, things like giving a short but descriptive title for your page helps, so does including a good paragraph for the meta descriptive tag (which will be explained much later in the blog).
The link here should take you to a PDF by Google giving detailed instructions on how to, for lack of a better word, optimise your website for search engines.
Briefly, things like giving a short but descriptive title for your page helps, so does including a good paragraph for the meta descriptive tag (which will be explained much later in the blog).
The link here should take you to a PDF by Google giving detailed instructions on how to, for lack of a better word, optimise your website for search engines.
CSS Anyone?
CSS (or Cascading Style Sheets) is a language used to describe the presentation semantics of HTML, XHTML or any other kind of XML document.
It's primary use is to separate document content from document presentation. This uncludes things like fonts, colours and layouts.
Before CSS was introduced, almost all of the HTML presentational attributes were contained inside the HTML markup. All of the fonts, font colours, background styles, borders and styles all had to be explained specifically within the HTML. CSS would allow you to to move a lot of that information to a separate, external style sheet, making HTML markup a lot easier.
So in summary, use CSS a lot.
It's primary use is to separate document content from document presentation. This uncludes things like fonts, colours and layouts.
Before CSS was introduced, almost all of the HTML presentational attributes were contained inside the HTML markup. All of the fonts, font colours, background styles, borders and styles all had to be explained specifically within the HTML. CSS would allow you to to move a lot of that information to a separate, external style sheet, making HTML markup a lot easier.
So in summary, use CSS a lot.
A New Way To Make Pages
After reading through that Adobe tutorial and after learning some new techniques in one of my lectures, I discovered that instead of just making a page and dragging it into dreamweaver, I should be making each section of the page (banner, main image, buttons etc.) separately and placing them into 'div' tags or containers in Dreamweaver.
'Div' tags are the most important thing in HTML coding to create a layout for your website. Although, on their own, they don't do much or look like anything in particular, they create boxes that you can modify in any way to make a specific layout on your page.
From now on I will be trying to make my web pages using 'div' tags, along with something called 'external CSS' to make my web pages. The next post will be some more detail about CSS and what it does.
'Div' tags are the most important thing in HTML coding to create a layout for your website. Although, on their own, they don't do much or look like anything in particular, they create boxes that you can modify in any way to make a specific layout on your page.
From now on I will be trying to make my web pages using 'div' tags, along with something called 'external CSS' to make my web pages. The next post will be some more detail about CSS and what it does.
Thursday, 27 October 2011
First Homepage Draft
Below is a picture of a first draft of my homepage.
I don't like this page. I made this in photoshop, but in my opinion, it looks unprofessional and poorly made.
I don't think I'll use this page, so I'll start again and try making some other pages.
I don't think I'll use this page, so I'll start again and try making some other pages.
Starting the Home Page
After some troubling thoughts about starting the front page of my website, I decided to look around on the internet for ideas or tutorials on the best way to start.
On the Adobe website itself there is a good tutorial on how to start a website from scratch, explaining very simply things like how to insert div tags and even how to set up a Dreamweaver site folder.
Here is the tutorial:
http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html
I will follow this website through, following it exactly to get to grips with the whole thing, then go through it again but changing things to make it my own website, and then maybe try the steps myself, without actually reading the tutorial, to check if the knowledge has sunk in. This will be a good way to test myself and my knowledge of Dreamweaver and web design in general.
On the Adobe website itself there is a good tutorial on how to start a website from scratch, explaining very simply things like how to insert div tags and even how to set up a Dreamweaver site folder.
Here is the tutorial:
http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html
I will follow this website through, following it exactly to get to grips with the whole thing, then go through it again but changing things to make it my own website, and then maybe try the steps myself, without actually reading the tutorial, to check if the knowledge has sunk in. This will be a good way to test myself and my knowledge of Dreamweaver and web design in general.
Wednesday, 26 October 2011
OS and Screen Resolution Statistics with Usability
There will just be a couple of images here, but to carry on with the browser statistics of the last post, here are the figures for operating systems and screen resolutions:
OS systems:
Screen resolutions:
The screen resolution is more important here as obviously different people use different sized screens.
In terms of usability, a well-designed website should have all the information of a page fitting into a single screen size, without having to scroll down to see the rest of the information.
If the website has a blog-type layout, then it will be more fitting to have a scrolling page. On most webpages nowadays you do have to scroll to see information and people are probably used to that.
Linking to the book Don't Make Me Think by Steve Krug, the title itself is very useful on its own. You shouldn't be making your audience think to have to carry out a task on your website. Which basically means that your pages should be simple and clearly laid out.
OS systems:
Screen resolutions:
The screen resolution is more important here as obviously different people use different sized screens.
In terms of usability, a well-designed website should have all the information of a page fitting into a single screen size, without having to scroll down to see the rest of the information.
If the website has a blog-type layout, then it will be more fitting to have a scrolling page. On most webpages nowadays you do have to scroll to see information and people are probably used to that.
Linking to the book Don't Make Me Think by Steve Krug, the title itself is very useful on its own. You shouldn't be making your audience think to have to carry out a task on your website. Which basically means that your pages should be simple and clearly laid out.
Tuesday, 25 October 2011
Browser Compatibility
Before I start making my pages I need to think about compatibility of different browsers.
Let's start off by saying that if you view the same web page on the same browser but one on a PC and one on a mac. They should look the same right? Not necessarily.
According to w3schools operating system statistics, 8.9% of computer users are macintosh based. There are some quite obvious differences between these two operating systems. One of them being the font used. Windows' primary font is Times New Roman, and a Mac uses Arial. The problem with this is that you may be trying to use a font that isn't available on both computers, so the font will change.
Your web browser is simply a translation device that takes HTML code and translates it into a formatted web page. Different browsers translate this code different to others and this is how we get browser compatibility issues with different browsers.
In order to avoid problems with this, website developers try to market websites to certain users based on statistics to show which kind of computer setup is most commonly used.
The website mentioned above, w3schools, shows which website browser it the most common.
As you can see from the picture above Firefox is used the most as of October 2011. This therefore means that website designers will majorly design their site around firefox users, although not completely ignoring Internet Explorer, Safari, Google Chrome and any other browsers.
Let's start off by saying that if you view the same web page on the same browser but one on a PC and one on a mac. They should look the same right? Not necessarily.
According to w3schools operating system statistics, 8.9% of computer users are macintosh based. There are some quite obvious differences between these two operating systems. One of them being the font used. Windows' primary font is Times New Roman, and a Mac uses Arial. The problem with this is that you may be trying to use a font that isn't available on both computers, so the font will change.
Your web browser is simply a translation device that takes HTML code and translates it into a formatted web page. Different browsers translate this code different to others and this is how we get browser compatibility issues with different browsers.
In order to avoid problems with this, website developers try to market websites to certain users based on statistics to show which kind of computer setup is most commonly used.
The website mentioned above, w3schools, shows which website browser it the most common.
As you can see from the picture above Firefox is used the most as of October 2011. This therefore means that website designers will majorly design their site around firefox users, although not completely ignoring Internet Explorer, Safari, Google Chrome and any other browsers.
Monday, 24 October 2011
Initial Ideas
Below is a picture that I scanned showing a couple of basic ideas for pages.
The left picture shows a draft for the music page. On this idea I had in my head the idea to have a background image that stays static on the page, with a box on top that scrolls when the user scrolls up or down. I planned to have a black background, with the backgrounds for the box in the middle a dark grey, to make it stand out. On my music page I plan to have a list of the songs I have created with a 20 or 30 second clip of the song to listen to, and then a chance to buy or download the song.
On the right is another design idea. On this one I chose to just have a normal page that all scrolls, with the navigation links on the left instead. The heading background and the button background would be black, however the box in the middle with the content on would be a grey colour, along with the navigational button that the content corresponds to.
These are just some basic ideas and I will build on these to eventually make something great!
The left picture shows a draft for the music page. On this idea I had in my head the idea to have a background image that stays static on the page, with a box on top that scrolls when the user scrolls up or down. I planned to have a black background, with the backgrounds for the box in the middle a dark grey, to make it stand out. On my music page I plan to have a list of the songs I have created with a 20 or 30 second clip of the song to listen to, and then a chance to buy or download the song.
On the right is another design idea. On this one I chose to just have a normal page that all scrolls, with the navigation links on the left instead. The heading background and the button background would be black, however the box in the middle with the content on would be a grey colour, along with the navigational button that the content corresponds to.
These are just some basic ideas and I will build on these to eventually make something great!
Sunday, 23 October 2011
Initial Thoughts
After a couple of nights of relaxation to clear my head, I started to think of some ideas for the design of my website. I'll draw them on some paper as rough sketches and post them in the next post.
Friday, 21 October 2011
So What's the Website About?
I suppose I better explain what my website will be about and the kind of links that will be on it.
I plan to have my homepage as a kind of blog format. Websites of artists such as Ronald Jenkees (http://www.ronaldjenkees.com/) have inspired me to do this. This will let me update my viewers with ease in an informal, modern way.
I also want to have other pages such as 'about me', 'music', 'videos' and a 'contact' tab.
The 'about me' tab is kind of self-explanatory. It will be a page telling my audience about me, the steps I have taken through life and why I have chosen them. This is the kind of aspect that I like to see from bands, artists or producers that I look up to. I like to be able to find out how other successful people got as big as they are.
The 'music' page will contain previews of music that I have made and links to ways of downloading them. I will probably link people to my SoundCloud page at this point for the full tracks and download/buy links.
'Videos' will be a page to show a couple of teaser trailers that I have designed, along with soundtracks that I have composed for films.
Finally, the 'contact' tab will allow my viewers to email me with questions or to 'book' me to mix a track for them, making my image look more professional.
I plan to have my homepage as a kind of blog format. Websites of artists such as Ronald Jenkees (http://www.ronaldjenkees.com/) have inspired me to do this. This will let me update my viewers with ease in an informal, modern way.
I also want to have other pages such as 'about me', 'music', 'videos' and a 'contact' tab.
The 'about me' tab is kind of self-explanatory. It will be a page telling my audience about me, the steps I have taken through life and why I have chosen them. This is the kind of aspect that I like to see from bands, artists or producers that I look up to. I like to be able to find out how other successful people got as big as they are.
The 'music' page will contain previews of music that I have made and links to ways of downloading them. I will probably link people to my SoundCloud page at this point for the full tracks and download/buy links.
'Videos' will be a page to show a couple of teaser trailers that I have designed, along with soundtracks that I have composed for films.
Finally, the 'contact' tab will allow my viewers to email me with questions or to 'book' me to mix a track for them, making my image look more professional.
The Beginnings of a University-Level Blog
So, I just made the blog... I'll start by explaining the kind of things that will be posted onto this blog.
This is a production blog for my website that will advertise myself and get my name out there in the big world. Therefore I need to sell myself on this website and make myself sound amazing.
On this blog I will frequently post updates to what I have been doing with the design for my website. Whether that is a change of background design, or a slight rotation in a picture. All of these changes, whether large or small, will be posted on this blog.
:]
This is a production blog for my website that will advertise myself and get my name out there in the big world. Therefore I need to sell myself on this website and make myself sound amazing.
On this blog I will frequently post updates to what I have been doing with the design for my website. Whether that is a change of background design, or a slight rotation in a picture. All of these changes, whether large or small, will be posted on this blog.
:]
Subscribe to:
Posts (Atom)