In our 2nd assignment we have to make the site maps of my website. This was really funny process to do. Unlike using the card-sorting method I uses the word clouds to my friends and asked them to arrange it according to them.
Actually the idea is to follow the same style of card shoring but I used simple pen and paper and ask them to arrange it. So after getting reviews from my 3-5 friends I have finally came up with this sitemap which is attached and to get even more details about it you can see my Journal.
So before I tell you my sitemap let me shear you my experience about the whole process of making the sitemap. While I was making the sitemap, I had to come up with the words for my pages which I was going to add in my website. So I follow a few local school websites, some school website templates and some websites of the school which are outside from the country as well to get enough idea how what exact details I'm going to use it for my website. The whole process for searching those keywords made me interact with some really good websites and those were really good site and I was happy with my search work and finally I came up with the details which I was going to follow.
This is my sitemaps. Tell me what I can add to it to get better idea's
CREATING WIREFRAMES IN MY WAY
Now I would like to shear the process how I did my wireframes.
This started with the initial sketches then where it is necessary I had done some changes in my sketches and I continued this loop till the time I was satisfied with my sketching part.
Before I was about to start doing my final sketches, I asked few of my friends and some of my faculties to have a look to those sketches and asked them to say what are the elements which are missing or need to re-modify. Then after having the final look and some minor changes to my initial sketches I finally came up with my Final Sketches of the wireframes of my website. It was clean and each and every element present in the sketch was clearly visible.
Now as I was ready with my final sketches of the wireframes it was the time for user testing. So I went to my friends place to do it and i did the testing for 2-3 user. It was quite amazing experience to do user testing as I had never done it before. Generally to get better reviews and make my friends comfortable I had conducted my test in the local language and one was done in English which I has already uploaded.
So here my wire-frames. I had made wire-frames of my 5 main pages of my website i.e HOME PAGE, ABOUT US PAGE, ADMISSION PAGE, ACTIVITY PAGE & ACADEMICS PAGE.
Now let me tell you what changes I made throughout the process - starting from my Initial Sketching Stage to my Final WIRE-FRAMES Stage.
When I started to do my sketches I thought I don’t have enough amount of data which can make my home page look beautiful and stunning but as I started to do sketching I had so many idea’s and there was the time when I though now I’m putting too much data in my home page. Then I took break of 30mins and then I restarted it. I started to remove all the unnecessary data which is not needed in my Home Page. After eliminating the extra elements I came up with the final sketch of my Home Page. You can see there is very minor different in my initial sketch and my final sketch of design. This is because the while making the initial sketch I had already clear the extra data.
Now if you can see there is the difference of design in my Final Sketch and my Final wireframe design. The Section of CAMPUS FEATURE has been removed in the final sketch of the wireframe for my home page and I had added GALLERY SECTION instead of that. This is because while I was doing my user testing all of them actually suggested me to remove the Campus Feature Section and asked me to add Gallery and then I followed the suggestion. I want to clear one thing here : I had not included gallery in my final sketch because I already had so many things in my Home Page and by adding the Gallery it would make it bulk and heavy loaded . So that’s the reason I didn’t included the Gallery Section before.
ABOUT US PAGE
Now the next page for my design was the ABOUT-US PAGE. Here, I had added the pic to show you guys how the original Initial sketch actually look. You can see there are some elements which I took from my initial sketch into y final sketch. You can also see some new elements which I had made in my final sketch and based on that I made my final wireframe for this page.
Here you can see almost each and every element of my final element is same as it is in the final sketch. There are two difference in my final wireframe and my final sketch design.
The first difference can be seen at the SCHOOL FACILITY SECTION where I have made two designs! The reason behind this is quite simple- I actually liked both the style so I was confuse to make the final call about which style I will include in my final wireframe. So, I added both the style in my Final Sketch and decided that when I will do the user testing then based on the reviews of user I will decide the final style.
The Second difference is the CAMPUS FEATURE SECTION which I have added here instead of my Home Page. As I had already removed this section from my home screen the best place to put this section was at About-Us page so I added it here.
The next page was the ACADEMICS PAGE. There is not any special details which I can shear with you for this page. This page sketches are the consistent one. I had follow my initial sketch to make the final wireframe. The only thing which I ignore was the graphical element because I thought it is not looking that much good and as we know the academics page is generally loaded with heavy amount of text.
So, I decided to play with the typography properties of the text to make this page more effective rather then using pictures. Lastly, there is a section in this page named IMPORTANT DOCUMENTS, here I will add the downloading links of the main documents which are there in the school like Code of Conduct / Rules Of School, Attendance Rules, Children Safety Rules etc.
The next page was the ACTIVITY PAGE. I think after the home page this the most important page which can make our user more engage to our website. The reason is very simple after home page this is the place where we are showing all our extra activities which any school is doing. So presenting those activities in good manner can make positive impact of the school in the user mind.
So to do that I have arranged all the activity in the screen and when user clicks any activity a pop-up screens comes up with the detail. While making the pop-screens initially I used different styles for every activity as you can see in my initial sketch there are 6 different pop-up styles for 6 different activity but then I decided to go for the consistent pattern so I decided to give a common style to every activity and the only thing which I’m going to vary is the color behind the title in the pop-up screen with an image which will have the same color overlay which will be there in the background.
Now it is the time to discuss the last main page of my design and it is ADMISSION PAGE. As you can see there is very bulk use of graphical elements and picture has been done in my initial sketch and which was then simplified into a very elegant ,bold and beautiful looking design. I use the same thing which I had done in my Academics page. Both these page has heavy amount of text so to make it look good and make good user experience I will just follow the typography principals. As you can see there I had not use much pictures in this page in my final wireframe design.
So this was the total process how I made my wireframes. I hope this would have helped you to know my process and you guys would have learn something from this.
Here are my Initial Sketches, Final Sketches and Final Wireframes of my website.
MOOD-BOARD, STYLE TILE, UI SCREEN
In our 4th assignment we have to make the Mood-board,Style Tile and Final layout for my website. This was really funny process to do. I search in internet to get good pictures for my mood-board in the mean time I get to know more about about style tiles and its important and last but not the least I had to make the final layout of my website. I was eagerly waiting for this moment and so that I can make my UI screens of my website.
Before starting the main UI design I was pretty excited to do but this time the level of excitement was on sky high because this time I had not jumped directly in to designing but instead of that this time I had followed a well planed process. So the quality of output was going to be much better then what I would have got if I had follow the same old fashion style.