July 2010
17 posts
5 tags
Shots of Amelia
These are some screen shots of the final website.
The Home Page including the main blog.
The comment feature for the blog posts.
The articles page showing more of the blog and also how the menu drops down.
The Preview gallery showing sample pages from the Illustration special.
The Past Issues Gallery where who can purchase the Magazines.
The job search feature.
A page about...
End.
Initially the standards of html had not stuck in during my first attempt of making the website. And at this I hadn’t decided to use Amelia’s Magazine as my subject. I was going to mock up my own website using my own personal identity elements I had already designed in a prior project. But with such great images and articles in Amelia’s Magazine’s website it was evidently a good change in choice....
5 tags
Stage 8
I also mentioned that i wanted the re-designed website to be more interactive; so how I have try and do this was include javascript element ‘shadowbox’ which enlarges the gallery image for public viewing. These little features makes the overall website seem more elegant and sophisticated.
6 tags
Stage 7
So in my final stages of adding features in my additional pages, I’ve made up my own blog format for the main page; which is recognised through the form options as well as the date and author of the post and ‘read more’ to lead the user to more of the article.
The implementation of the blog is the really enhance and personalize the user’s experience but allowing them to...
5 tags
Stage 6
In the wire frame I had the content box set to a specific height so I can add in a scroll bar so you can navigate down that section only without losing the menu or the home page button etc however, in response to peer feedback I had removed this feature as it made the user feel almost restricted in viewing the page.
6 tags
Stage 5
Now I had begun making the other pages and adding forms and link elements to make it a ‘functional’ and user-friendly website. I wanted this re-design of Amelia’s Website to be more in touch with its users it terms of being more accessible; so adding in features such as the shop button, the jobs page and e-mail page etc
I’ve also added a sign-up to our newsletter...
4 tags
Stage 4
so now I’ve add in the complete elements such as the privacy box
and the drop down menu’s extra border line removed (the bottom of the box was doubling with each list item)
6 tags
Stage 3
I’ve gotten the elements back in position as well as the content part working with further adjusting to the css file; it took time for me to learn what to target and how to label it. So now it’s add the other details for to make the website next to complete such as an image for the shop button and another ad and some more detailed content which I get to later. I also need to a...
3 tags
Stage 2
When I did add in the Tag Cloud and justified it, it threw sidebar 2 out of whack and the content.
5 tags
Stage 1
As opposed to using ‘float’ to position my 3 sections I used ‘position’ absolute and relative to allow them to sit nicely into place with a little adjusting with margins and padding. Although at this stage I had not managed to fix the content box where I would include the blog and gallery etc it’s was due to not being to target that division properly. I also had not...
6 tags
Float Fail
My second attempt to make a website was slightly more successful now that I had a better direction in what content to include; that is with the original material in Amelia’s Magazine’s website.
The main issue with this one was I had difficulty separating the the 3 sections in to 3 divisions; that is sidebar 1 and 2 and the center which included; the header, navigation menu and the...
5 tags
A dismal start
This was very first attempt in making a website.
I hadn’t decided to use Amelia’s Magazine as my subject.
I was going to mock up my own website. But with such great images and articles in Amelia’s Magazine’s website it was evidently a good change in choice.
At this stage I had no clue how to place all the divisions and how to target those divisions for individual style....
5 tags
Amelia's Magazine
Things I did take from the original website was the use of illustrations for the background and including the tag cloud.
There are other basics elements that I thought was essential such as a ‘search’ and ‘sign-up newsletter’ form, ‘comments’ form etc
9 tags
Re-Designing Amelia's Magazine
http://www.ameliasmagazine.com/
The website for Amelia’s Magazine is fairly simple; so I decided to make this the subject of re-invention to attempt make it more elegant and interactive. The visual language I had designed for my wire-frames is keeping to the visual integrity of Amelia’s Magazine. Taking the information divulged in the competitor analysis it is essential to take the...
2 tags
Wire Frames
These would be the very basic layout of how my website would look like; using the same colour codes to help users link it back to the site architecture. At this point I have not decided what magazine website to re-create; but it would be one that is illustrative-based, hence the colour theme and the competitor analysis.
4 tags
Site Architecture
This demonstrates how users would navigate through my website; the colour codes demonstrate the pages that are linked.
6 tags
competitor analysis