Monthly Archives: March 2013

Portfolio web designs examples

Here are some cool ideas for a portfolio web design that I found it interesting and eye catching and easy to manage.

RED WEB DESIGN EXAMPLE

http://www.brandfeverinc.com/

There is many options to go on this website like where it coould be linked

Advertisements

What is designing website

The Internet has redefined the borders of our modern world. Big or small companies now have customers all across the globe. Small or Big businesses houses, groups and non-profit organizations are providing an infinite array of information to a widespread audience. The possibilities are endless through effective and efficient Web Design. Web Design is an art of content presentation to an end user through World Wide Web. The efficient web design helps your company in bringing enquiries that generate sales and add asset to business.

In the digital world websites emerge as a significant tool that not only help the companies to find their target audience but also help in tapping desired customers while seating remotely. Website has become the medium of communication or interaction for Business houses. You can establish your corporate identity globally and remain in contact with your customer through out day and night.

This information technology based communication design helps you to place your products to global customer with details of the placed products relatively at low cost. Websites The cost effective medium of sales and promotions make the websites as the hottest stuff of today’s generation.

Website utilizes multiple disciplines such as animation, graphics, interaction design, and information architecture while giving digital corporate identity to your business. The amalgamated features help in interacting your unknown audience in effective and efficient manner. Websites are often considered as the interactive marketing strategy to pull out the hidden customer around the global arena.

Each of the websites planned in a precise manner to cater specific need. The people who view the website for a specific reason and it is important to know exactly what they are looking for when they visit the site. A clearly defined purpose or goal of the site helps in understanding of what visitors want. It gives a way in identifying the target audience.  So company, who is developing website must be precise, on the target and object oriented in order to get maximum of what they are putting.  
The technologies being used during web designing are:

Markup languages (such as HTML, XHTML and XML)

Style sheet languages (such as CSS and XSL)

Client-side scripting (such as JavaScript and VBScript)

Server-side scripting (such as PHP and ASP)

Database technologies (such as MySQL, MSSQL)

Multimedia technologies (such as Flash and Silverlight)

Based on the requirements of the company website can be made in static or dynamic depending on the nature of the site.

The web developers of Roseindia have experience and expertise in designing websites that will add advantage to your business. We offer full circle approach in website designing. Our website design services include strategic planning, business intelligence, creative approach, product & service promotion and solution maintenance. Our dynamic team of professionals conducts interactive session with our clients so to understand your business objectives and derive solutions so that you can get best of it.

Roseindia Web Design Services include:

Need Analysis & RFP creation

Solution Designing & Creative Story Boarding

Website Content Planning & Drafting

Product Photography

Graphic Designing

Flash Designing & Animations

HTML Coding & Java Scripting

 

TUTORIAL WEB DESIGN – TIM CLASS

This was made in Dreamweaver saving  links to htlm for a web design.

http://www.cssplay.com/

Project: Portfolio (Website design)

University of Kent at West Kent College

HND / HNC Graphic Design

Year 1,  Term 3

Project: Portfolio (Online Presence)

Module: Website Design  – Project 1 (1 of 1 100%)

Credits: 15
Level: Certificate

Set Date: 25th March 2013

Submission: tbc

 

Preamble

Having an online presence as contemporary creative is essential. As a part of the wider graphic design course, this module serves as an introductory platform to the principles of graphic web design as opposed to web development (e.g. back-end work). The primary focus of this module is for students to understand how and why we produce efficient, functional web pages in a range of methods using open source and/or industry standard software. In order to do this students will develop an appreciation of the importance of planning and structuring a website prior to its construction.  As well as investigating current trends in design and technology students will investigate the all-important factors such as page layout, navigational structure, colour and typography.

The Brief

You are to build a web-based portfolio to showcase your design work. The site that you will build will allow for the easy updating of images. As well as developing your technical skills, this project will allow you to begin to consider how you can show your work in its best light and develop your skills in making considered choices about the content of your portfolio and begin to think about the audience you are targeting within a given timeframe. You will also have to make important aesthetic choices as well as decisive and selective in the portfolios’ content.

 

This is a screen shot dependent project. You MUST record your technical processes and research to explain your understanding of them through your notes and printed screen shots.

 

Technical Specifications
These may vary accordingly depending upon your skills and chosen approach,

Additional Information

You must evidence that you have:

  • Planned a site before building. Ie. Sketches and Photoshop mocks.
  • Tested your site in one or more browsers using annotated screen shots
  • Evaluated your work-in-progress using annotated screen shots
  • Kept your files in an organised and structured manner evidence via using annotated screen shots
  • Considered general layout and typographic issues.
  • Screen shot any code work you do when using HTML, CSS and XML.
  • You will also be considering accessibility throughout.

 

You should submit both printed and mounted copies of the website as well as a fully functioning website on cd or online. Should you choose to proceed with an open source website such as Wix or Word press, you will still need demonstrate that you can build functioning web pages by submitting these and how you built them.

If you wish to include any Flash or extra elements you must first demonstrate to staff that the rest of the website is complete and will be graded at pass or above. You may not develop any Flash or other extra elements until you have accomplished the building of basic HTML pages.

 

Specific Learning Outcomes

Please refer to the Module Guide on Moodle for specific learning outcomes against which you will be assessed. Please allow yourself sufficient opportunities to evidence achievement of the outcomes in your sketchbooks and final pieces.

 

Research

You will be expected to have researched and evaluated websites and website technology.

Your sketchbook will have to show clear evidence of achievement of ALL of the learning outcomes.

Evaluation and Reflection

Evaluation and Reflection:

1) Visual Communication:

In what ways does the visual communication/message of the piece meet the needs of the brief?

To show the actual meaning of the words that was given on the project creating an app for an iphone.

What are the strengths of the visual communication? Why?

To give the straight eye catching using the right illustration in what it’s representing.

What are the weaknesses of the visual communication? Why?

Not giving the actual message on the app icon because then it will be difficult to understand.

In what ways could the piece be mis-read or mis-understood by the audience?

It would be mis-understood if I didn’t show the right illustration along with the shapes I used for the icons.

To make sure colours are reflecting to the apps.

In what practical ways could the piece be developed or improved?

2) Reflection of own working practices:

How was my time keeping?

My time was alright just took time on my designs because I wanted to get them right so I think I did pretty good.

How was my analysis of the brief?

I had to research different kind of apps to get ideas but most of them where colourful and I wanted to use a different technique.

How was my research?

It was a bit stressful and interesting at the same time because once I was researching on one page I come up with other pages but at the end of the day I manage to get ideas and started to do my development straight away.

How did I use research to generate and develop ideas?

Researching ideas from the internet, books and actual iphone, my own sketches to get general ideas.

How did I use experimentation during the project? How can I make this more effective?

I came up with the idea of making illustration, shapes and use only 3 colours because I didn’t want a colourful apps since most of the apps are originally colourful so I gave my apps as a classic straight application easy to understand.

In what ways did I show that I had achieved the Learning Outcomes? How can I improve this next time?

I think I have produce with a right outcome by analyzing on my research and trying new techniques to the app.

What parts of the project did I enjoy most? Why was this the case?

I enjoyed generating ideas and then come up with the actual development area creating the app design that I had on my quick sketches.

What parts of the project did I enjoy least? Why was this the case?.

Well I did took a  bit long on my apps to give it a good detail but in another hand it went well so I don’t think I had a problem with that.

Final design

From the start I wanted to create an original apps not as colourful  so I used 3 colours grey, black and white.

These icons will give the right meaning of what it’s the application about and it also reflects with the combination of the colours.

I am happy with the outcome of the icons because I tried to match them all together using the same proportion as using shapes, illustration and colour.

I used the iphone template to put the final apps on it, basically thats how it would be shown on the actual screen and then it also shows when your surfing around the internet and when ever you feel to check up those actual apps it will appear on top of what ever your surfing around the internet.

Semiotics – Paradigms & Syntagms

To understand parading and syntagms

Paradigmatic it is a set of signs, those of which that have a common function. It can be seen as a contrastive factor because the signifiers in the same paradigm set shapes each other’s preferred meaning by virtue of mental associations. For example, a set of verbs, nouns, etc.

The syntagmatic is known to be the chain of signifiers, refers to the combination of signifiers taken from a paradigm to form a meaningful order. A few of examples of which are sentences as  paragraph,chapter, print advertisment.

20130325-091121.jpg

 

20130325-091127.jpg

 

At the two images, the first advert for Marlboro cigarettes, It’s a proud cowboy that looks tuff and a hat demonstrating the “American dream” but if you change it with other clothes and no hat and tuff he would not suit for a cigarettes advert which it would look weird and not suitable.

The second advert it’s a man from the same first advert but it looks creepy because the man looks like he killed the horse but in another way it shows to demonstrate another definition to understand about the advert.

http://en.wikipedia.org/wiki/Paradigmatic_analysis

http://users.aber.ac.uk/dgc/Documents/S4B/sem03.html

iPhone icons

With the final apps I started to move all the apps to the actual iphone template to make it real and how the brief was asked to do.

So here I have showed my development processes from each of the apps I have attached to the iphone screen.

Development iPhone icons

From my sketches I have generate some ideas and here are some of my development process.

From the start the brief was told to make the icon as 25 pixels by 25 pixels in illustrator so as you see I have used the rounded rectangle and started to develop each application.

For the Altimeter I cameup with the idea of not doing a detail airplane so to make a airplane I used shapes and then cropping the areas that was not needed and then using colours to make it clear.

As you see I used different techniques using stroke for the circle to make it as “meter” around the airplane.

Then for the Anemometer I used shapes aswell and produced several lines to and then used the stroke tool to give as a “wind effect”.

For the Barometer I have illustrate the sun with the circle and another circle with the stroke tool, for the cloudy I have used the pen brush to create a cloud as the storm icon, the rain and the wind.

The decibel meter I used the pen brush to make the “music symbol” and then after I only used lines along with the minus and plus on the side.

Pedometer it was a bit tuff to create it because I have sketch it on my quick sketches and then I tried to illustrate it but it did not come right so what I did was to use the pen brush again and then to get an accurate “step” I decided to use the direct selection so I can manipulate the design and give a right detail.

The speedometer wanted to give the detail of a quick speed image so I came with the idea of using the start of small lines to a bigger line that I also indicate with black colour to show that is actual speed.

For the last one I used the round rectangle tool