Archives for category: Project 5
I decided to give Dreamweaver another go before I look at Rapidweaver, and started to put the home page together. I seem to be getting the basics ok now, getting more used to IDs, classes and checking any problems in the code.
I put in the logo, navigation and everything I had on my Photoshop page, but then just to complicate matters decided to put the Coda slider on as well. I changed the pictures to ones that I wanted, changed the colours and everything looked and worked fine. Then I tried to put it into my page. How frustrating…didn’t want to work, but after a lot of swearing and persistence got there in the end. I also added a subtle background behind the main content with a gradient to hold the elements on the page together.
I copied this for the next ‘our tips’ page and removed the elements I didn’t want repeated. Because there was a lot of information that needed to be included here and I didn’t want it to have a lot of dense text to wade through I decided to put in an accordion which I added using DW. To give it more of a Web 2.0 feel I decided to add rounded corners. I went to the CSS3 PIE site which is really easy to use as you can change and see what you want before you download it. I chose colours from my Web 2.0 Kuler palette for the accordion and headings which I kept quite large and bold also to fit in with the web 2.0 style.
I thought I would use another slider on this page to show the main ingredients used in old fashioned cleaning in a bold graphic way. (Also I wanted another go at putting a slider into a web page to see if it was any simpler following the instructions in a careful methodical way!). I changed all the colours and pictures to get it looking exactly how I wanted it and put it into the page, copying the javascript into the JS folder, the CSS file, the images into the images file and the code into the HTML. It didn’t work! After a lot of careful scrutinising of the code I found that the source code for part of it was in an extra folder, after changing this it worked.
I copied the page for ‘your tips’ which was next. I wanted this to be a blog where current items could be talked about to keep the site up to date with any green issues, new non-toxic products, current trends, or any tips sent in could be added. I also wanted it to have links to related blogs. It is not easily possible to add a blog using DW so I set it up to look like one.
On this page I also added three widgets. I went to widget box, chose the ones I thought would fit in with my site, cutomised them and downloaded them. I chose a Tweet blender which you could change the colours, font size, language and the subject of the tweets. So I have cleaning related tweets being updated every 10 seconds. I also chose a Natural cleaning tips and recipe widget and thirdly an etch a sketch for light relief after cleaning!
The next page I tackled was the video page. I didn’t want the page to look cluttered so only wanted to show video on it. After choosing the ones I wanted it was very easy to copy the code to link them to the site.
My fifth page was my forum page. I chose a vanilla forum which was relatively easy to put into the page. You can sign in and leave a comment.
Above this I added another accordion which included more specific cleaning information. I kept the colours the same as the ‘cleaning’ page for consistency. I added a shiny button to get visitors to join the forum and a shiny button at the side which when clicked opened out to include the social network buttons. I also added a tweet button and a share button.
I linked all the page navigation together, and all the information on the home page tiles to the appropriate pages. I then linked all the social network buttons to their specific sites.
I used Genfavicon this time and made a favicon using the image of the pink duster that appears on each page.
After looking at a lot of Web 2.0 retro style sites I started to think about how my own site should look. To begin with I looked at fonts that would fit with the theme. While I was researching type I came across a designer Illustrator who had some really beautiful and inspiring work, Jessica Hirche.
I decided to try a chunky face with vintage style fabric patterns styling each letter. I found different fabrics and brought them all into Illustrator with the text I thought would work the best. I selected the text and a different fabric for each letter, went to Object > Clipping Mask > Make and I had a version which had a different pattern on each letter that I could take into Photoshop. I thought I would use the shiny effect I had experimented with in class using a repeated layer and the gradient tool.
I changed a couple of the fabric samples which looked more balanced colour wise.
I tried to find social network icons that would fit with the style of my page and downloaded some which looked as if they were stitched. They are simple enough for the Web 2.0 style and relate to the fabric patterns used in the logo. I put them on to a different fabric pattern along the bottom of the page.
Before anything else I chose a colour theme for the site. I looked up some Web 2.0 themes and picked a theme that would go with the logo I had already done. Maybe I should have done that the other way round!
I started to think about the structure of the site. Once I had got an idea of how I wanted the site to look and how I was going to incorporate everything we had learnt about, I put together the layouts for the first couple of pages in Photoshop.
I looked at a few different styles for the navigation. Different coloured type for each section, which I did like and different buttons, some as side navigation and some top. For the buttons I drew rectangles in Photoshop and put a smooth bevel on them, with a drop shadow. The idea was to make them look like tiles which fit in with the ‘Cleaning’ theme of the site, (tiles make you think of kitchens and bathrooms, two places which take a lot of cleaning!)
I looked at other social network icons, but decided to keep with the ones I had already found. I made some square tiles in Photoshop, using the workshop we did in class, blending a gradient for a shiny effect. I had two images on separate layers. One was the tile that I had made using the emboss and drop shadow effects. The other was an ellipse which I positioned over the tile shape. I clicked on the layer to be blended, clicked on the ‘add vector mask’ button on the bottom of the palette, then clicked on the gradient tool and drew a line across the elipse to fade one side out. I then clicked in between both layers in the layer panel, and clicked ‘alt’. This then combined the shape with the tile image to make it look shiny.
The second page I looked at when I was happy with the home page was the one which would include the cleaning tips. I put four tiles of the same colour together to make a background for the text. I also tried the icons for Facebook etc down the side.
For the workshop on sliders I chose the ‘anything’ slider to try out. I used the example set up and changed all the pictures and colours. I opened up each picture in Photoshop, chose some different ones and placed them over the top of the original ones so that they would be the correct size for the slider, and then re saved them but keeping the same name. I then went into the slider css file and changed the colours of the tabs and borders. The other information you need to copy over into your file is the javascript into the JS folder and the css style sheet for the slider. The script code for the slider should be put in the head section of your site.
Forums
If you were to put a forum on your site you would firstly have to consider security. The second thing you would have to take into account would be whether the theme would suite your site and be editable, the price and the amount of time it would take to moderate.
The one I decided to look at in class was ‘Vanilla’ which had some free forums to try which were very simple to add to a web page. I downloaded the free forum styles, but here used one which only involved copying some code and pasting it to my page.
I also tried PunBB in class. I downloaded the source files from punbb.org, unzipped the software, and put the SpinkBB css into the folders.
I then tried putting different widgets into the page which was also very straight forward. I went to widgetbox. There are so many that you can customise to fit in with your site, changing the size, colours etc.
For one of these I chose the subject matter, ‘Natural Cleaning tips’ to fit in with the website I had chosen to do, and the other I could also choose the subject, ‘Cleaning tip of the day’. The Google search menu bars were also straight forward to add.
Dreamweaver Spry
I tried out the spry accordion in Dreamweaver, which was easy to follow and change colours and sizes in the css. The tabs, tab panels,collapsable menu and menu bar, all worked in the same way.
Flash
We spent one class concentrating on Flash which seemed much easier to get the hang of than Dreamweaver. I could imagine that if you had the time to spend you could produce some interesting things. I was doing quite well in class until I lost everything having not remembered to save! Should have learnt that by now!
For our first Web 2.0 workshop we were to create a logo out of a word and a shape using the custom Shape Tool, gradient overlays and drop shadows.
We have to make our mind up pretty quick as to what our next site is going to be. It has to incorporate Web 2.0 features, be simple and bold but also bring people together as in a community to share information and ideas.
As I was walking home I passed the Duke of York cinema and thought it would be quite good idea to do a site for them. It has a bar and coffee and cake shop with comfy sofas, where friends can meet up. I thought it may be interesting to try and recreate that sort of atmosphere on a website, with places where people could talk about films that had just been shown, or up and coming and even show short films they had put together themselves. I looked at the top ten independent cinema sites but didn’t really see anything inspiring apart from the site the Duke of York has at the moment to celebrate 100 years.
This site is really clearly set out, the navigation is really bold and easy to follow, the fonts are large and clear, it has a central layout, a really clear sidebar and is also very interesting. I don’t think I can top that really…I’ll have to think of something else.
Another idea I had was to do a site where people can share household tips, the sort of thing your Granny would have told you. People are really trying to be ‘green’ and save money in the this economic climate and are happy to share any tips they have. It could extend to the garden and bits of DIY. There would also be a chance to incorporate or have links to other eco friendly sites.
I did find a few sites that have this sort of thing, none of them looked as if they had been designed at all. The obvious style for this I supose would be a retro, 50’s housewifey feel, the challenge will be to combine this with a simple, shiny web 2.0 look.
I have just found loads, of course it’s possible!
I really like the subtle colours used on this site and the simple layout. I love the ribbon leading you down through all the information and the fact that the the footer stays attached to the background. So the important navigation remains static, with a slight opacity, while you scroll down or click on any of the buttons. Even though the navigation is at the bottom of the page it is really obvious as there is virtually nothing else on the page.
This Shabby chic site fits all the web 2.0 style requirements, central, very simple clear layout with minimal easy to use content but retains a unique style of its own without having to use shiny buttons.
What is web 2.0?
Although web 2.0 suggests a new version of the World Wide Web, it doesn’t refer to an update to any technical specification, but rather to cumulative changes in the ways software developers and end-users use the Web. Whether Web 2.0 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee, who called the term a “piece of jargon”, precisely because he intended the Web in his vision as “a collaborative medium, a place where we all meet and read and write”.
Web 2.0 is the second generation of the World Wide Web, especially the movement away from static webpages to shareable content and social networking. While there is no set definition of Web 2.0, it generally refers to the use of the web as a more social platform where users participate by generating their own content alongside the content provided by the websites. It marks a fundamental change in how we use the Internet.
This DIY festival site has aTwitter, Facebook and events screen on the Home page updating as you are on the page.
Web 2.0 is the move toward a more social, collaborative, interactive and responsive web. It is a change in the philosophy of web companies and web developers, but even more than that, Web 2.0 marks a change in us as a society as well as the Internet as a technology. In the early days of the web, we used it as a tool. Today, we aren’t just using the Internet as a tool — we are becoming a part of it. Web 2.0 is the process of putting us into the web. It is a social web, our society today is merging with a network of computers. Not only are we increasing our usage of the internet at home but are increasingly carrying around a version of it in our pockets, and changing the way we interact with it. Web 2.0 is about people connecting with other people.
This has led to a social web where we aren’t just getting information from a computer, but we are connecting with other people to hear what they have to say on a subject. We do this in the form of social media sites like blogs (Techcrunch, Mashable), social networks (MySpace, Facebook), social news (Digg, Propeller) and wikis (Wikipedia, Wikia). The common theme of each of these websites is human interaction. On blogs, we post comments. On social networks, we make friends. On social news, we vote for articles. And, on wikis, we share information.
This party gift site has very clear, simple buttons to share information on the main social networks
These Web 2.0 ideas of bringing the power of people into the Internet wouldn’t be possible without the technology to support it. For the collective knowledge of people to be harnessed, websites must be easy enough to use so they don’t stand in the way of people using the Internet to share their knowledge.
Web 2.0 is not only about creating a social web, but also about creating a more interactive and responsive web. AJAX become central to the idea of Web 2.0. AJAX, which stands for Asynchronous Javascript And XML, allows websites to communicate with the browser behind the scenes and without human interaction. This means you don’t have to click on something for the web page to do something. It is not something that was possible until the last few years. And what it means is that websites can be more responsive, more like desktop applications, which means that they are easier to use. This allows websites to harness the collective power of people because the more difficult a website is to use, the less people that are willing to use it. So, to truly harness our collective power, websites must be designed to be as simple as possible so as not to get in the way of people sharing information.
The idea of a social web has transformed the way we think and the way we do business.
The idea of sharing information is being valued as much as the idea of proprietary information. Open source is becoming a significant factor and the web link is becoming a form of currency.
Visually, a good web 2.0 site has to have at least some of these elements:
Simplicity. Central layout. Fewer columns. Separate top section. Simple nav. Bold logos. Bigger text. Bold text introductions. Strong colours. Rich surfaces. Gradients. Reflections. Cute icons and Star flashes.
Simplicity should be the main feature with all the rest helping to make that happen.
Unnecessary elements should be stripped out. The result of this is that you have to look at the content. You should find yourself interacting with exactly the screen features the designer intended and you shouldn’t mind – you are getting what you came for. It should be a discipline to consciously remove all unnecessary visual elements.
Web sites have goals and all web pages have purposes, it’s the designer’s job to help users to find what they want (or to notice what the site wants them to notice). Stuff on the screen attracts the eye. The more stuff there is, the more different things there are to notice, and the less likely a user is to notice the important stuff.
We need to enable certain communication, and we also need to minimise noise. That means we need to find a solution to the brief with as little as possible which is economy, or simplicity.
This Pixel Matrix site uses a simple grid system, great colours and a really good hierarchy of information. This is enhanced by Web 2.0 elements of gradients, subtle details, large, highly legible fonts, a great number of ways to stay connected, and the contact form has nice rounded corners.
These layouts use really strong colours for the navigation and large bold tabs. All the information is immediately visible, they are clear, clean and bold using a single column or image across the home page and a central layout.
Both these layouts use strong single and central images, the information is really well organised and easy to find what you are looking for. The premium site uses subtle gradients and a drop shadow for the image.
The ‘2.0’ style sites that sit straight front & center feel more simple, bold and honest. Also, because people are being more economical with the content, they don’t seem as pressurised to cram in as much information as possible.
Designers are using less to say more, being a bit more free with the amount of space used, and the content has lots of lovely white space.
A by-product of centered layouts, is fewer columns, 2 is common, and 3 is the mainstream maximum at the moment. Because designers are not filling the whole screen so much, and not trying to get as much on-screen at any one time, they don’t need as many columns of information. Less is more. Fewer columns feel simpler and bolder, designers are communicating less information more clearly.
Logos are also becoming bolder and where possible, because there is less on the page the type can also be bigger. This means that not only does the bigger text stand out, but it’s also more accessible to more people.
Web 2.0 sites – Tumblr
Apparently, the Tumblr blogging site has become a really big craze with young girls all over Europe and America. They are mainly blogging about fashion and anything else that is current. But it is now not only young girls that are using Tumblr as recently ‘Mashable’, the social media news blog, published a trend piece on the rush of fashion brands to Tumblr. Companies like Kate Spade, Oscar de la Renta, and Alexander McQueen, not to mention magazines like Vogue, V, and Elle have recently created Tumblr accounts.
The Tumblr website is a public blog. It’s a place where people can come together and express any feeling they care to. Many teens take interest in this website because it’s a place that they can express who they are and their thoughts without being ridiculed for it. It’s a way where they can say things that they may not have the courage to say in person. It’s also popular amongst the younger generations because it’s similar to Facebook. Though it’s a blogging website, users are able to build connections with other users and create a relationship.
Users are able to “like” posts from any of the users that they come across. They are able to respond, and even reblog thoughts that others have posted. Instead of having friends as Facebook does, Tumblr has followers. At any time, a person can follow or unfollow any particular blog that either caught or lost their interest. For many teens, Tumblr is just a place where they can be themselves. Young people use it as a place to vent their feelings. All of the posts are creative and it has a wide variety of things that keep them entertained. In addition, Facebook has created a way for users to even connect their Tumblr pages to Facebook and show their posts on the news feed.
It has a classic web 2.0 feel to the home page which is really simple, the background is one overall colour, adding to the simplicity of the site, and is a really subtle, sophisticated, strong blue. There is an invitation to sign up or find out more with a bold link at the bottom of the page. Everything is central and very bold.
If you want to follow the bold link at the bottom of the page and find out more about Tumblr, you will find everything layed out in a very simple, clear way. Here everything is explained in a very clear user friendly way. Everything from themes to choose from, designing your own, updating, linking with facebook, private blogging, analytics, a help centre and much more to make the experience straightforward. What’s more it’s free!
You are able to design your own blog but the range and number you can get which are already done is huge, to suite every need.
Plainyjane's Blog 
