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 Amelia’s Magazine and it’s founder.
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 form to further reinforce the user-friendly orientation; although this is already an element on the original website but not focused on and not stylised to strengthen the visual language.
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 content.
This was due to the use of ‘float’ which I found to difficult or organise and control. So I abandoned this attempt as I knew that it was crucial to have the home (main page) next to finished or just about perfect in order to be able to make the other pages.
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. It took a lot of patience and time to get my head around how html and css works. But in the end I got the jist of it.
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
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 successful and admirable elements from those investigated websites and implement it in this mini-website.
I’ve taken things like the ‘Shop’ button sitting on the top left hand corner of http://www.woodentoypublishingco.com/
and the current issue sitting on the right hand side corner which is an element inspired by Frankie Magazine http://www.frankie.com.au/
also the idea of including a blog within the website was realized through Dumbo Feather’s website http://dumbofeather.com/
A diary of designing and coding my first website, that is, a redesign of Amelia's Magazine's min-website; drawn from a competitive analysis of related websites, my site architecture and wire-frames and general inspirations.
