"The project for the Kings Worthy churches is to promote them to a wider community via a website which will inform people of its existence, historical and architectural importance. The aim is to make the churches more accessible, providing visitors with the ability to learn more about the history of the churches, the people for whom it was important (pilgrims, village community through the ages etc) and to encourage the existing (including younger) community to engage more with their local church."
Like all other projects, I began with brainstorming the churches as a collective under the Kings Worthy banner. During this I covered who would be using the websites, why the would be using it, what the immediate call to action is in addition to how they would be accessing the site. It was important for us to begin to think about these things early in the process as it would help us to form the basics of UX/UI design. In addition to doing this, we started to learn about each church through the briefs we where given. St. Mary's church is a larger church with a congregation of between 80 and 100 people with a younger age. In contrast, St. Swithun's church is smaller with an older congregation with 25 to 30 people attending.
While we where understanding what each church was about, we decided to look at the already existing stile for St. Mary's church. What we learned is that there is a lot of content on this site and in our opinion as a group we decided that it was way too much. Therefore we began to think as a group what content would this church specifically need and so we prioritised then content.
After this group meeting, I began to create new wireframes to segment and divide all of the content available on the site. Splitting them into sub-sections and headings so that the users would understand where the content they want would be. I decided to split the site into 4 sections called 'About Us', 'Gallery', 'Community' and 'Services' and 'Contact'. After doing this, I decided to begin laying out the content on different pages in my sketchbook.
One example of this would be the main title page, this was done in my sketchbook to layout the mission statement, forthcoming events, title and a notice board. The image slider has been designed to fit the full screen so that photographs of the church could be viewed easily. The content has been set into a grid layout so that it could adapt to different screen sizes. Some sections of this design are laid out in a similar way to the existing site to allow familiar users to use the new site with ease.
Another idea that was created was a contact form page including a way of users to directly contact the reverend. In addition to the contact form there would be the details such as his email and mobile number if users wished to talk to him over the phone instead. The contact details of other members would be accessible at the bottom of the page. Initially this would be hidden from the users because the contact list is extremely long therefore having it visible by choice helps to trim down the content.
A large section for the St. Mary's website will be the activities sections as they offer a lot to their congregation and young people within the Kings Worthy. This page will also contain information about the weekly services on at the church in addition to details on weddings, christenings and funerals. In a similar style to previous site, the content here has been laid out in a grid style allowing for simple navigation of the site to be achieved.
In addition to these pages, I designed a whole page based on what the church is about and the people who work at the church. Also on this page, it has a section dedicated to the congregation and the mission statement of the church. I felt that the church needed a page like this as churches are extremely personal places to some people therefore bringing that onto the website would be a good idea.
After completing a basic design of the site, I took these designs to my group and we began to think about what we could do. During this meeting I redesigned the wireframe of the website in order to solidify what content would be shown on the site. In doing this, I merged two of the pages together to create the 'Home' page. This would allow the users to access the most basic content quickly as it would already be shown to them.
In addition to the design of two websites, we also needed to create a portal page. This portal page would be used to access each of the sites however it would need to adapt to having more added to it. We decided this design as a group which would be two pictures with the church name and icon underneath it. This would be able to adapt to multiple church portals being added as the layout could change. Having one underneath and two on top for three, a gird system for four and so on.
In order to form some more detailed designs, I decided to do some detailed research into what other church websites are doing in terms of design...
These where another two designs which we brought to our client meeting. He did not like either of these designs because the colours where too distracting from the content shown on the pages. I only wanted to try and use them to differentiate between the two websites. Another change from the previous designs what the navigation and header where separated from one another. One was aligned to the top left and the other was centred. This was something else he did not like, he liked the centred header but the navigation he didn't like.
______________________________________________________________________________
After deciding on a layout, I began to mock up some designs in Adobe Photoshop to understand how the content would look on a computer with photography within the site. In addition to this, I added the real content such as the mission statement, title and headings to fully realise my sketches for the client. The faded black has been put in place so that you can still see the photograph behind it. When we went for out meeting with out client, we took this and three additional designs to him so he could see where out design would be heading.
Client Meeting Notes:
_________________________________________________________________________________
After doing this, I decided to think more about including the branding guidelines we had been given at the start of the project. This being the font Trajan Pro 3 however we didn't have a font for the body text. Therefore we decided to find a legible font for the main pieces of text. When we spoke to our client, he wanted the two websites to link together in design however still remain different. The St. Mary's site we continued to develop as a multi-page site to allow for all the content to fit on there. We decided not to have a plain white background for the fonts as it would be too harsh on the reader.
In a similar style to the St. Mary's website, I started to link the two together with the branding and colour schemes. The photographs would still be the main focus of each site to allow the users to see the churches. We felt that this would change the need for a gallery section as the photographs would be incorporated into the website itself. I also decided to add circle placeholders for the icons that another member of my team would be designing.
At this time in the process, we began to question whether or not we needed to have a multi-page layout for our websites. This lead my to design a range of different navigation bars that could be changed to fit a single page layout. The circle represents the icon and the headings are still the same as what we wanted them to become. A variety of different ones helps us understand what would be best for the sites. The one we decided to continue further was the third one in this list because it removed the black background and allows even more of the photo to be seen.
After doing this, we decided on taking the one page layout we intended for the St. Swithun's website and bringing it over to the St. Mary's site. I then decided to do a final wireframe of each page to finalise the content for the sites. After finalising these, I could begin to research all of the content available for each page. The layout for the St. Mary's site even though a majority of the content is still on one page, a separate page was created for the activities section. This is because that is the call-to-action for the St. Mary's users so having as much information on that as possible was key. The activities was also placed second in the flow of the content as we felt people would need to get to the information as quick as possible.
We still continued to use the single page layout for the St. Swithun's website as it is the smaller of the two churches. In addition to this, the history has been placed second much like the activities section on the St. Mary's site. The history however is the main bulk of information therefore it has been split up into three sections. Each section would have a photograph in addition to some text, as there is a lot of writing within this section.
This is a more detailed design of the St. Mary's site, including the sizes of the photographs in addition to the flow of content.
This is a more detailed design of the St. Swithun's site, including the sizes of the photographs in addition to the flow of content.
Website Content
_________________________________________________________________________________
After this group meeting, I began to create new wireframes to segment and divide all of the content available on the site. Splitting them into sub-sections and headings so that the users would understand where the content they want would be. I decided to split the site into 4 sections called 'About Us', 'Gallery', 'Community' and 'Services' and 'Contact'. After doing this, I decided to begin laying out the content on different pages in my sketchbook.
One example of this would be the main title page, this was done in my sketchbook to layout the mission statement, forthcoming events, title and a notice board. The image slider has been designed to fit the full screen so that photographs of the church could be viewed easily. The content has been set into a grid layout so that it could adapt to different screen sizes. Some sections of this design are laid out in a similar way to the existing site to allow familiar users to use the new site with ease.
Another idea that was created was a contact form page including a way of users to directly contact the reverend. In addition to the contact form there would be the details such as his email and mobile number if users wished to talk to him over the phone instead. The contact details of other members would be accessible at the bottom of the page. Initially this would be hidden from the users because the contact list is extremely long therefore having it visible by choice helps to trim down the content.
A large section for the St. Mary's website will be the activities sections as they offer a lot to their congregation and young people within the Kings Worthy. This page will also contain information about the weekly services on at the church in addition to details on weddings, christenings and funerals. In a similar style to previous site, the content here has been laid out in a grid style allowing for simple navigation of the site to be achieved.
In addition to these pages, I designed a whole page based on what the church is about and the people who work at the church. Also on this page, it has a section dedicated to the congregation and the mission statement of the church. I felt that the church needed a page like this as churches are extremely personal places to some people therefore bringing that onto the website would be a good idea.
After completing a basic design of the site, I took these designs to my group and we began to think about what we could do. During this meeting I redesigned the wireframe of the website in order to solidify what content would be shown on the site. In doing this, I merged two of the pages together to create the 'Home' page. This would allow the users to access the most basic content quickly as it would already be shown to them.
In addition to the design of two websites, we also needed to create a portal page. This portal page would be used to access each of the sites however it would need to adapt to having more added to it. We decided this design as a group which would be two pictures with the church name and icon underneath it. This would be able to adapt to multiple church portals being added as the layout could change. Having one underneath and two on top for three, a gird system for four and so on.
In order to form some more detailed designs, I decided to do some detailed research into what other church websites are doing in terms of design...
 |
| The Light Church Website |
This website is similar to the Light churches website however the layout is slightly different however there are aspects here we would like to carry over instead. For example, the logo and header of the website are placed in the centre of the page above the image rather than in the top corner. Also the logo is in white and the photographs are in colours. Keeping with the theme, we also want to have large photographs as the header image of both websites. The photograph should take up the whole screen ideally as users can view the church. Finally, we want the sites to be scaleable down to mobile as users could want to access the information anywhere.
 |
| Hillsong Churches in London |
This was the first site we decided to take inspiration from. The focus on photography of what actually happens in the church and the area inside is what we liked from it. In addition to this, the church has a hand-drawn logo in the top left corner. This was another aspect we wanted to carry over onto each of the websites. The navigation was placed at the top of the site as it is a one-page layout, which is why we wanted to create at least one of our websites as a one page layout. It is also very simplistic in its design therefore we felt like our one could be the same.
 |
| Developed Design |
This was a mock up of a layout of a page that we took to our client which he didn't like. However we just used it to test out whether or not the layout of the sketches would translate well onto a real site.
 |
| Developed Site with Green |
 |
| Developed Site with Red |
 |
| St. Swithun's Site Mock Up |
______________________________________________________________________________
After deciding on a layout, I began to mock up some designs in Adobe Photoshop to understand how the content would look on a computer with photography within the site. In addition to this, I added the real content such as the mission statement, title and headings to fully realise my sketches for the client. The faded black has been put in place so that you can still see the photograph behind it. When we went for out meeting with out client, we took this and three additional designs to him so he could see where out design would be heading.
Client Meeting Notes:
_________________________________________________________________________________
28.01.15
Mainly static sites with links to their Facebook page
St. Swithuns’ site is more static
St. Marys’ site still static but should have links available to the church’s FB page
Comments within the code can be made instead of using a CMS
Portal Page works well
Can easily organise a time when we can visit either church to take photographs for the websites
St. Swithuns’ site is more static
St. Marys’ site still static but should have links available to the church’s FB page
Comments within the code can be made instead of using a CMS
Portal Page works well
Can easily organise a time when we can visit either church to take photographs for the websites
Design:
Fonts are good, open to legibility of the body fonts so long as it can fit with the themes of each Church
One page layout for St. Swithens
Multiple page layout for St. Marys
No need for re-design of young people club’s logos as these would become links to Fb for more information (Possible drop down menu system on St. Mary’s site)
St Marys has a logo (Apparently?)
Colours must change, didn’t like the green on the previous site and mentioned that it should be taken down already.
Where possible use Web-safe fonts for main bulk of text
Design to be very similar between the two as they are going to become closer over the next few years
Client liked 3rd design of print-outs
Fonts are good, open to legibility of the body fonts so long as it can fit with the themes of each Church
One page layout for St. Swithens
Multiple page layout for St. Marys
No need for re-design of young people club’s logos as these would become links to Fb for more information (Possible drop down menu system on St. Mary’s site)
St Marys has a logo (Apparently?)
Colours must change, didn’t like the green on the previous site and mentioned that it should be taken down already.
Where possible use Web-safe fonts for main bulk of text
Design to be very similar between the two as they are going to become closer over the next few years
Client liked 3rd design of print-outs
Content:
St. Marys
People who are moving into the area may want to look at the site just for information. Weddings, Funerals and Christenings are also important too. Information about parking included somewhere as they have plans to get one created with easier access.
Contact details for Church Room Bookings.
Make it personal
Similar style for each (Running theme)
People who are moving into the area may want to look at the site just for information. Weddings, Funerals and Christenings are also important too. Information about parking included somewhere as they have plans to get one created with easier access.
Contact details for Church Room Bookings.
Make it personal
Similar style for each (Running theme)
St. Swithuns
Historical value first and foremost. Built in the 10th Century on the Pilgrim way between Winchester and Canterbury (Research needed)
Aimed primarily towards Visitors and Tourism as schools tend to visit the Church.
People who come to the church have a strong, personal connection with the church through family members. Some come for a wedding because their parents/grandparents where married in that church
Historical value first and foremost. Built in the 10th Century on the Pilgrim way between Winchester and Canterbury (Research needed)
Aimed primarily towards Visitors and Tourism as schools tend to visit the Church.
People who come to the church have a strong, personal connection with the church through family members. Some come for a wedding because their parents/grandparents where married in that church
Technical/Business:
Budget in the sense that if we want to purchase a font that’d be best suited to the site we can ask the client for permission
CMS system not necessarily needed as people who are taking over the project are technology savvy enough to navigate the comments made within code
The client mainly uses Safari but he cannot tell us what the rest of the congregation is but basically St. Mary’s would be more up to date
If something doesn’t work as well in below IE9 it would be okay
CMS system not necessarily needed as people who are taking over the project are technology savvy enough to navigate the comments made within code
The client mainly uses Safari but he cannot tell us what the rest of the congregation is but basically St. Mary’s would be more up to date
If something doesn’t work as well in below IE9 it would be okay
___________________________________________________________________________________
From this meeting, we continued to develop the designs further. From his feedback we began to work with the black and white theme to move away from the strong primary colours. In addition to this, he liked the fact that the photograph of the church was put as the focus at the top of the site. We then took this on board then began to develop the design from there.
After finalising a design for the St. Mary's website, we decided to adapt this design to the layout ideas we had for the St. Swithun's site. This site is very different than the St. Mary's site as it has much less content in addition to being focused on the history. The photographs where placements taken when we visited the churches for the first time. These where placeholders as we decided we would need to go to the church again to take proper photographs for both churches.
After doing this, I decided to think more about including the branding guidelines we had been given at the start of the project. This being the font Trajan Pro 3 however we didn't have a font for the body text. Therefore we decided to find a legible font for the main pieces of text. When we spoke to our client, he wanted the two websites to link together in design however still remain different. The St. Mary's site we continued to develop as a multi-page site to allow for all the content to fit on there. We decided not to have a plain white background for the fonts as it would be too harsh on the reader.
At this time in the process, we began to question whether or not we needed to have a multi-page layout for our websites. This lead my to design a range of different navigation bars that could be changed to fit a single page layout. The circle represents the icon and the headings are still the same as what we wanted them to become. A variety of different ones helps us understand what would be best for the sites. The one we decided to continue further was the third one in this list because it removed the black background and allows even more of the photo to be seen.
After doing this, we decided on taking the one page layout we intended for the St. Swithun's website and bringing it over to the St. Mary's site. I then decided to do a final wireframe of each page to finalise the content for the sites. After finalising these, I could begin to research all of the content available for each page. The layout for the St. Mary's site even though a majority of the content is still on one page, a separate page was created for the activities section. This is because that is the call-to-action for the St. Mary's users so having as much information on that as possible was key. The activities was also placed second in the flow of the content as we felt people would need to get to the information as quick as possible.
We still continued to use the single page layout for the St. Swithun's website as it is the smaller of the two churches. In addition to this, the history has been placed second much like the activities section on the St. Mary's site. The history however is the main bulk of information therefore it has been split up into three sections. Each section would have a photograph in addition to some text, as there is a lot of writing within this section.
This is a more detailed design of the St. Mary's site, including the sizes of the photographs in addition to the flow of content.
This is a more detailed design of the St. Swithun's site, including the sizes of the photographs in addition to the flow of content.
Website Content
_________________________________________________________________________________
ST MARYS.
St. Mary’s Opening:
“Welcome to the website of St. Mary’s Church in Kings Worthy, Winchester in Hampshire with a passionate community as it’s driving force. ”
St. Swithun’s Opening:
“Welcome to the website of St. Swithun’s Church in Kings Worthy, Winchester in Hampshire. A small church steeped in a rich history”
Portal Page Open:
“Explore the Churches of the Kings Worthy Parish in Winchester, Hampshire here.”
Mission Statement:
"We are a church of worshipping Christians - who seek to live by faith in Jesus Christ, knowing that the power of God's love, working through the Holy Spirit, transforms the lives of individuals and the community. We are committed to prayer, worship, the study of God's word and fellowship - which help us grow and develop our gifts in the service of God. We believe it is our mission to be at the heart of our community, witnessing to the love of Christ in action and working with God to draw others into our Christian family."
Our Congregation:
Here at St. Mary's, we are open to all people coming to our church. Our congregation fillies with a variety of people both young and old. We gather on Sunday's for Holy Communion in addition to Bible-teaching sessions for young people. At various points during the week, we hold clubs and groups for the young people of the community to get involved. We are an extremely family oriented Church so feel free to join our family any time you like.
History:
The earliest recordings of the Church at St Mary's in Kings Worthy is around 800 years ago. Although the church is basically of Norman, it has been remodelled and expanded a lot since then. A majority of these expansions and remodelling where done during the 18th century in the Victorian era. The church is built of flint rubble, with limestone dressings, the modern truss rafter roofs being covered with red tiles. The tower is also of flint, but so covered with ivy that little of it can be seen; it is not known the exact date but it was built around the 15th-century, and has an eastern arch of two chamfered orders and a west window of two cinque foiled lights.
There is some 15th and 16th-century stonework re-used in some of the windows of the south chapel and aisle, but otherwise there is nothing old in the building except the font and a brass inscription.At the turn of the millennium, the church gained enough funding to build an addition section to the existing church. This is now known as the Chapel at St. Mary's. In this new section, the church built communal rooms that can be booked out by the local community. However they are mainly used for young people's clubs and groups throughout the week.
Activities:
Here at St. Mary's in Kings Worthy. We hold many activities for our congregation on a weekly basis. They cater to all ages from the young people within the community to the older people. We regularly hold a Holy Communion on Sunday's in addition to other events throughout the week. To view the full list of activities we do click here. In addition to this, we also hold a large number of clubs catered towards the younger people of the congregation such as Little Fishes, H2O and XStream. Each of these clubs cater to a different age as our congregation is so different.
Activities Page Content
Weekday Clubs
XStream is our club for children in school years 1 to 6 with crafts, teaching and team games. It runs on the first Friday of each months from 5:45pm to 7:15pm in St. Mary's Chapel Hall.
H2O is our club for young people in school years 7 to 13. Activities include film nights, hot chocolate, marshmallow evening and pizza making. It runs on the first and third Friday each month from 7:30pm until 9:30pm.
Sunday Groups
Little Fishes is our Bible-teaching group for children ages 3 to 7 featuring crafts, teaching and games. It runs on the second, third and fourth Sunday each month during the 10am service at St. Mary's Church.
XSream Sunday is our Bible-Teaching group for children ages 7 to 11 featuring crafts, teaching and games. It runs on the second, third and fourth Sunday each month during the 10am service at St. Mary's Church.
H2O Sunday is our Bible-teaching group for young people ages 11 to 18. It runs on the second, third and fourth Sunday each month during the 10am service at St. Mary's Church.
In addition to this, the church holds many other services such as weddings, funerals and christenings. These obviously are not fixed to the people within the community and we are open to all. If you want to have any of these take place at our church, please get in contact with our Reverend Alan Gordon whose details are are available on the site.
Contact:
If you wish to contact the church to know more about booking a wedding, funeral or christening at the church. Please contact the Reverend Alan Gordon on his mobile on 01962 882167 or by email at rector@worthyparishes.org.uk. If you wish to book our a room in St. Mary's Chapel. You can ring the room booking services at 01962 884031 between the hours of 10:00am and 8:00pm.
ST SWITHUN'S
Mission Statement
"We are a church of worshipping Christians - who seek to live by faith in Jesus Christ, knowing that the power of God's love, working through the Holy Spirit, transforms the lives of individuals and the community. We are committed to prayer, worship, the study of God's word and fellowship - which help us grow and develop our gifts in the service of God. We believe it is our mission to be at the heart of our community, witnessing to the love of Christ in action and working with God to draw others into our Christian family."
The Congregation:
Here at St. Swithun's, we are open to all people coming to our church. Our congregation here at St. Swithun's is headed by our Reverend Alan Gordon and the congregation is older than most people but we are open to people of all ages coming. As we are a smaller church, we mainly gather on Sunday's for Holy Communion on Sunday's in addition to Midnight Mass on Christmas Eve. The church holds a lot of weddings, funerals and christenings. If you
History:
The Church of St. Swithun's, Headbourne Worthy, is set within a small woodland area next to a small river coming from Hyde Bourne. Built in early 10th-11th century in commemoration St. Swithun, a Bishop of Winchester who died in 862AD, this Saxon church is a building of substantial architectural importance. The church of St Swithun's is located on the Pilgrim's way which is a historic route between Winchester Cathedral and the shrine of Thomas Beckett in Canterbury, Kent.
The Saxon masonry to build this church is of limestone quarried at Binstead on the Isle of Wight. The sturdy S.W Tower, topped by a wooden belfry, was built in the 13th Century as was the south wall of the nave and the channel extension. Leading into the 19th Century, the church went under a lot of restoration including part of the chancel to accommodate the new organ. Above the door of the vestry is the 11th century carved in stone which was originally the outer western wall that represents Christ, flanked by Mary and St. John with the hand of god above.
More recently in 1998, a £100,000 was raised to restore and ring the ancient bells, to build a stairway to a newly constructed bell-chamber. The money was also used to create a new gallery across the west end of the nave. Inside the base of the tower a toilet and kitchenette was built. In addition to these, new lighting and heating was added to modernise the church slightly. In 1999, the Helle organ within the church that had been created circa 1850 with its hand painted pipes was repaired and renovated.
The Churches of Kings Worthy
The community of Kings Worthy in Winchester, Hampshire has been here ever since the Saxon times and the two churches here have been linked for a long time. St. Mary's and St. Swithun's churches are both historically integral to the area of Kings Worthy. They have both been the centre of the community here even after many centuries of renovations and expansions in addition to being modernised with newer technologies at the turn of the millenium.
Contact:
If you wish to contact the church to know more about booking a wedding, funeral or christening at the church. Please contact the Reverend Alan Gordon on his mobile on 01962 882167 or by email at rector@worthyparishes.org.uk.
_________________________________________________________________________________
Final Designs...
 |
| St. Swithun's Website Design |
 |
| St. Mary's Website Design |
Final Websites...
_________________________________________________________________________________
To Visit the St. Swithun's Site please click here...
http://www.dmd-winchester.org.uk/00-DMD16-STUDENTS/MagnusSkare/KingsWorthy/Swithuns/
To Visit the St. Mary's Site please click here...
http://www.dmd-winchester.org.uk/00-DMD16-STUDENTS/MagnusSkare/KingsWorthy/Marys/
No comments:
Post a Comment