My deployed project is avaliable here

It's a website for a fictional comic convention WORDS AND PICTURES taking place on the NewcastleGateshead Quayside.

The site's aim is to promote an event that caters to a range of talent within the comics industry as well as feels welcoming to a diverse fandom.

The site does this by acting as an information point and sales platform for the comic convention. The idea behind the convention is that it fosters a sense of community specifically for fans and creators of comics - as opposed to other major comic conventions which focus heavily on wider popular culture.

The site is designed with three key uses in mind:

• To sell tickets
• To act as an 'on the day' guide for the event
• To provide information for people wanting to be more directly involved in the comics industry either as a creator, event support volunteer or corporate sponsor

As I will detail further in the UX section, everything on the site is designed with one of these three ideas in mind.

There are also three key things - sort of Unique Selling Points - that I have aimed for the site to convey:

• The event fosters a comic book community that is supportive of artists and welcoming to a diverse range of fans
• The event is in Gateshead (the bit that's sort of Newcastle)
• By buying a ticket you're joining a community, not just coming to an event. You're included.

Images of the initial wireframes I produced for this project are avaliable at the following links:

• Header & Footer wireframes
  • Image 1 - Wireframe for Footer
  • Image 2 - Revised Wireframe for header - this came once deciding original layout wasn't working.
  • Image 3 - Original wireframe for header - this reflects what the original plan for the header was.
• Index page Wireframe
  • Image 1 - Index Page Wireframe
• Guests, Schedule & Get Involved Wireframes
  • Image 1 - Wireframe for Guests Page
  • Image 2 - Wireframe for Schedule Page
  • Image 3 - Wireframe for Get Involved! Page

Looking back on these wireframes, I think two things are clear:

• The learning process that came with building the site - particularly evident initial idea for my header and how the finished product looks differnt (see 'Header' section for further details).
• I think I initially underestimated the importance of producing good wireframes - I think my wireframes are very loose and this meant continuing to think in a designer mindset, even when I should have been focusing on how to get the code to reflect the design ideas I'd already developed.

But I still think these wireframes were very useful in helping me organise content on the pages.

As mentioned in the previous section, everything on the website is designed with three strands in mind - booking/planning a trip in advance, being useful on the day of the event and working as a sort of starting point resource for anyone wanting further involvement.

In thinking about these three ideas, I made came up with four primary user stories and it's these four user stories that have been the driving influence on the way content is laid out across the whole project.

But before going into specifics on these I thought it would be worth going into detail on my header, which is a key part of all of the user stories below.

I had so much trouble with the page header!

It was the first thing I did on the project - and really, the first thing I'd done that wasn't me directly following a Code Institute tutorial. So it was a learning process.

Initially, the idea (as evidenced in my wireframe) was that the image would go in the center of the Navbar, with text over the image that gave name and date of the event. However, I struggled to put this into place early on, especially in how the text was to be positioned over the image (this is something I eventually came to understand with my Hero Image section). In the end I changed the design and I do think that this one works better. Apart from any codeing issues, the two character images are drawn to be at either side of a comics panel, so visually it looks better if these are at the edge of the page.

Ultimatley, the final version of the header I think works well across the four main user stories. My aim was to make sure that someone visits the webpage and the first thing they see is the header, they get are able to immediatley find out what the event is (a Comic Convention) where it is (Gateshead) and the date (12-13 December 2020. So even if the user doesn't have time to look further and leaves the page immediatley, they have taken in those three key pieces of information.

As a result, these three pieces of information, as well as the name of the event are all present in the center of the header.

Importantly, these are the pieces of information that remain consistent across all different screen resolutions. such as on a tablet:

Or on a phone:

Whilst other parts of the header are hidden, this information is always present.

I've designed the site in this way because I think it's really common to click a link on your phone and go to a site whilst you're between doing other things or on the bus and not actually spend much time looking at it, but kind of make a mental note to check back when you have more time.

So the way these key pieces of information are always present when you first visit the site. So if someone comes across the site in between other tasks and are only there for a short period of time, then they'll still get those three key pieces of information.

One of the big things that helped things click in to place for me was the deciding of a header font for the page. This font initially started with me looking for something interesting for the logo on the page.

The font is influenced by a style I like quite a bit that appears on title cards in Killing Eve and Captain America Civil War (As well as video games like The Last of us and Control).

The big, bold, capitalised style was one I thought gave a sense of importance and direct-ness and so I wanted to use this for the logo - I ended up going with the font 'Anton' from Google Fonts as this was the closest free alternative to the ones used in Killing Ee & Captain America (I couldn't find the Captain America font, but as far as I can find out the Killing Eve Font is an adapted version of Weekend Tabloid Jnl. Anton as the best free alternative).

I ended up liking the way this font looked so much that I decided to apply it to headers across the website. Again, becuse I felt it gave a sense of importance to the text (I think my favourite bit on the site is the yellow text over the hero image).

I think that deciding on this font really helped to define the aesthetic of the page as a whole. The only headers on the page where this font isn't used are the panel names on the Schedule page - just because the font was difficult to read inside a table. These headers, as well as the rest of the non header text on the site use Montserrat - suggested by Google Fonts as something that pairs well with Anton.

Obviously the header is made up of more than just the Logo section of the header. The images in particular had a big influence on the aesthetic of the page, but I want to go into more detail on that in my second user story.

And then as well as this, there are the four navlinks either in the header on larger screens, or in the dropdown burger menu on tablets and smaller.

These are obviously key to the user experience and are all there to help users navigate the page based on what their 'story' is in visiting the page. So, I'm finally going to get nto those user stories.

As mentioned previously, the site is designed with four main user stories in mind. I'll now go into these in more detail:

As someone who regularly attends various comic conventions across the country, I want to know which comic creators will be attending the event and if it is worth me buying a ticket and travelling to Gateshead to attend the event

User Story One is kind of the built-in default audience for a comic convention. This audience is me. It's probably male, probably late 20's - late 30's), and they earn enough that they're willing to take a train to a different city and spend money on a hotel and buy things at the event. This audience isn't nescessarily less important, but it's the audience that by default feels comfortable in attending a comic convention and so this audience was less importance in terms of influencing the overall design.

However, the key thing that needed to be taken into account for this audience was that they would have to travel to Gateshead and Gateshead can be a pain to get to from some places (Lookin' at you Blackpool!) So what is important in terms of user experience for that they get the 'pitch' as quickly as possible. Before they can think 'I can't be bothered getting a train to Newcastle' they need to think 'This is an event I have to go to'. quickly know how much the event costs and who will be at the event -and are given at least a starting point for planning their trip.

The main source of information on the site to address this need are the guests page and the schedule page. But I wanted to bear in mind that someone might be viewing this on a phone between doing other things - and may not have much time to look at all of the ages. So, to help the 'why I should go' stick in more quickly, this person needs as much information as possible in a short space of time.

To address this need there is an article with the class 'programme' on my landing page that provides highlights of the event, this is split into two bordered lists that correlate with the guest & schedule highlights, so that someone visiting the page in a rush can get a quick feel for why they should attend the event. These bordered lists alsolink to their resective pages in order to provide more information.

As well as this, since the user in this story is likley travelling from outside of Newcastle - and in keeping with getting all the key info on this landing page - there is also a 'Key Info' section on the page - to make it as easy as possible for someone attending to get all the key details they need to find the venue and attend the event.

As a teenager who lives just outside of Gateshead and has attended small scale local comic book events before but never really had the chance to visit a larger scale convention with well known comics writers, I just really want to buy a ticket and make sure I go to this really cool looking event

For me, this is the audience who had the most overall influence on how the site was laid out. This is a younger and more diverse audience and I have tried to design and I want this audience to not see the site and feel like they are welcome.

I took my cues for this from a website for another comic book convention called Thought Bubble. It's an event I attend every year and it des a lot to push comics as a welcoming community and a method of self expression.

The biggest thing I took from their website is the way it uses original and specially comissions art as the primary visual on the site as opposed to images of cosplayers at a convention (which is fun but can seem intimidating) or use of licensed characters (which I think immediatley limits appeal).

So I wanted to replicate that idea in order to help the site appeal the audience in user story two.

Obviously having specially commissioned art be part of my project would have been a lot of effort, but I did have some images that people had drawn for me years ago for a comics anthology I tried to put together.

I ended up going with images of two young female characters in the header image, a slightly bolder hero image and something I thought was funny towards the bottom of the page.

But what these images also did, was provide me with a colour-scheme for the site. The images are all in black and white (and various shades of grey) and so to not look too out of place, I used Adobe Color Wheel to extract the colours of the header images and use them across the site.

I did want some colour, so went with a yellow colour to break up the grey. The first prominent use of this colour is on the text overlay on the hero image. This section was a key part in designing the site towards the audience in user story two as that audience is local and younger, so I wanted to get two key pieces of information across:

• The venue (BALTIC, a local art gallery but also sort of 'place to go if you're a bored skint teenager')
• The event is free (It's a good job it's not a real event)

And so this contrast between the yellow text and primarily black/white image - as well as the use of the bold, capitalised header font - means there's no escaping these two facts.

Additionally, I feel like the grey colour scheme gets at a kind of 'pencil drawing' association because I definitley want this site to appeal to anyone who doodles in their schoolbooks then draws for ages when they get home.

The one place I broke from the colour scheme of yellow & grey was in the headline guests and events section on the landing page. This was actually an accident at first - I was trying to find another shade of grey to help these stand out and accidentally typed one letter wrong on the hex code. It came up with the purple color used on the finished site. I removed this initially, but eventtually put it back in place because I felt it helped make this part of the site stand out.

Also, importatly for both this and user story one, is that the tickets button is always on screen in larger resolution modes (and easy to find in the dropdown nav menu in smaller resolutions)

I'm at the convention and all the volunteers look busy. I want some information on which panels are on so that I can plan my afternoon.

User Story three is built on the hope that the website can also be useful on the day at an event.

So the schedule page needs to be easy to find. I did initially have some worry about this, but I think it's very clear at the top and easy to get to find in the dropdown burger menu.

The important thing with this story is that, whilst someone may check the schedule in the lead up to the event, this specific scenario is based around being at the event. As a result, it is most likley that this user is viewing the site on a mobile phone. What that meant in designing the site, was making sure the content displayed well on a phone screen.

Initially the content did not display well, with the panel descriptions pushing the spacing of the rest of the schedule table into bad looking proportions. Bootstrap dows have a table-responsive class which I nriefly experimented with - but that removed the divisions between the table cells, which I thought made this particular table more difficult to read on a mobile phone.

Ultimatley for phone screens, I settled on hiding the panel descriptions inside a collapsible dropdown and only displaying the key information - time, location and panel title. If a viewer wants more in depth information then the 'more info' button is under each panel title and this will provide a description.

I also wanted the guests page to work in a similar way - with the page displaying an image and comics creator's name in a card element, but not only displaying further information (such as a bio for the creator) when the card is clicked - producing a modal for each guest with further information.

I've just finished an Art Degree at the University of Ipswich. I haven't got any comics made, but I really want the opportunity to get more heavily involved in the event so I can speak with creators, get some advice and maybe do a bit of industry networking. How can I get more involved in the event?

This one is aimed at the idea of getting more involved with the event. I think the 'Get Involved' page is probably the broadest page on the site as it appeals to three different levels of involvement - with the 'sponsor the event' level being almost out of place as it's dealing with involvement on a whole different level to the other two sections of the page and I think it's the only thing on that page that wouldn't necessarily appeal to the person in User Story Four.

What I think does work is that the Get Involved page has information about volunteering and attending the event as a creator an I think that the person in User Story Four, while not nescessarily ready to sell his comics at the event, would still benefit from having the volunteering and creator tabling information on the same page - they could volunteer this year with an eye to tabling the following year.

Also, with regards to the sponsor section, I ultimetley felt that it was better to put here on this page grouped in with 'Get Involved' than to give it it's own page as I don't think it's substantial or exciting enough for it's own page (but still a really important thing to have on there from an event organisers point of view).

The key features of the site are as follows:

• Header featuring navbar and links to other all pages on the site.
  • Header also features a 'tickets' button, present on all pages which, when clicked, will open up a modal for booking tickets.
  • The Navbar is responsive - so at screen resolutions lower than 1668 pixels, the navbar is hidden in a dropdown menu (as are the header images).
• Index page featuring key information about the event, a brief description of the event and some of the headline events & guests. It also features a key info section to help potential visitors plan their visit.
• Guests page - this features a card for each headline guest and aditional guest at the event. It also features a modal containing the name, image and a bio for the guest. This is viewable by clicking either the guest's name or image.
• Schedule page - This is two tables - one for Saturday an one for Sunday - that details the talks taking place at the event.
• Get Involved page - This features a variety of ways people can get further involved in the event.
• Footer featuring basic details on how to get in touch with the event and event sponsors.

I did manage to complete all the features that I had decided were going to be a part of the project, however - there were a few additional ideas that I would have liked to include in a project like this:

• An expanded 'Key Info' section that has official hotel reccomendations and ideas for more things to do in Gateshead/Newcastle if you are travelling to the event.
  • I did start to include this, but ultimatley it was just going to be links to lots of other websites and I felt that in order for this idea to work it would need something more than just this.
• An event blog detailing the lead up to the event, news from on the day and (after the event) updates on how the following year's event is coming along.
  • I think this would have taken a long time and is beyond the scope of this particular project (it's not super easy to do well for an event that doesn't actually exist).
  • Also, ultimatley - I don't know how to build a blog yet (apart from going to wordpress, but that's definitley cheating)

• HTML
  • The content of this page is written in HTML
• CSS

• [Bootstrap] (https://getbootstrap.com/)
  • This page uses Bootstrap's CSS Library in order to arrange the content in a visually appealing way as well as being the primary method of making the page responsive.
  • This page also uses some of Bootstrap's JavaScript Library in order to implement additional features such as the Ticket Booking & Guest Card Modals, as well as the dropdown navbar in the header and 'more info' sections in the schedule tables.
• Font Awesome
  • This page uses Font Awesome for social media link buttons
• Google Fonts
  • Google Fonts was used to import the fonts 'Anton' and 'Montserrat', that are used across the page.

I have tested the site with the User stories in mind. These tests have gone as follows:

• Loaded up the page on a laptop.
• Scrolled down the page, looked over the headline guests and decided I'd like more information on one of them (e.g. Jen Bartel).
• Clicked the heading on the bordered list of headline guests.
• This has taken me to the full guests page.
• From there, I have found Jen Bartel's guest card.
• I have clicked Jen Bartel's guest card and found out what comics she wrote.
• Okay, I'm pretty interested in the event. But maybe I need to know a few more guests who will be attending.
• I click off of Jen Bartel's Modal and scroll further down. Oh! There are more guests.
• I think I've heard of Kylse Starks.
• I click his guest card and read his bio. I realise I've bought all his comics. I have to meet him.
• I scroll to the top of the page and click the tickets button.
• A ticket booking modal pops up. I fill out my details and press submit.
• Great, I've booked tickets - wait, where was the event again?
• I press the logo to return to the home screen.
• I have a scroll through for information and find at the bottom of the page - all of the key details of the event. Better get booking my train tickets then!

• I've heard this comics thing is happening on the Quayside. I might go to it so I have a look at the site on my phone.
• It sounds cool and it's free! I think I want to book tickets but I'm a bit anxious about this type of event.
• I scroll down a bit further - There's this 'Welcome to the community section' - the event does sound very welcoming.
• I suppose it is free and it's not far away.
• I scroll back up a bit and press the big yellow 'BOOK NOW!' button. I fill out my details and book tickets.

• I'm really late today and need to make sure I get to an event as quickly as possible. I open up the site.
• In a rush, I don't even bother to scroll down. I just press the nav dropdown button.
• Oh! Schedule. Okay, what's the time Checks time in top corner of phone
• Right, 1.49pm, the Superman panel is on soon in the Library.

• Ugghh. I can't be bothered to apply for jobs today, I just want to sign up for something fun.
• This event sounds cool. Oh yeah, community. I like the sound of some of the guests too.
• I wonder if they'll give me a job? I'm probably not experienced enough.
• Oh! It says Get Involved!
• Clicks Get Involved, scrolls down the page.
• Oh,so I can volunteer at the event, but also they let you sell your comics there?
• I'm going to enquire about both os these.
• Sends off enquiry email.

As well as testing the site for these four specific stories, I have conducted a number of tests around how responsive the site is. I have done this throughout the development process, but one thing that came up during development that I solved (or thought I solved), only to realise very late on that I hadn't fully solved, was how the site looks on tablets.

Basically, initially I had the site set to a medium resolution for the header to have only one image (the one on the right - ch2) and to have the navbar toggler replace the original image.

On screens larger than medium, this would display the full laptop sized header. However, because of the spacing on the header tablet screens pushed the last of the navlinks (tickets) onto the next line, creating a huge grey space below the rest of the header.

I initially managed to fix this by increasing the medium resolution display through media queries, so that this displayed on screens with a pixel resolution of up to 1024px wide. It wasn't until very late on in the project when testing the site on my own ipad that I realised that newer ipad models have a wider pixel width and as a result, the site was not displaying properly on my iPad.

In order to solve this, I increased the resolution that the medium version of the site would display at up to 1230px. This includes both newer iPad resolutions, as well as covering the point when resizing the window on a laptop where the header begins to display incorrectly.

As well as testing myself, I have also had my partner test the site, particularly on mobile. I've basically sent her a link and given her a scenario to go through.

One bug that I noticed as a result of this was that the modals that open on the guests page can cover the full screen on a mobile phone, and there is no way to go back to the main site without refreshing the page. After discussing this with my mentor, we agreed the best way to solve this would be to apply an 'x' button to close the modal. He suggested I read over the bootstrap documentation for modals and I ultimatley found a solution on sitepoint.

It's also through ongoing testing throughout the development process that I have made most of my decisions regarding the layout at different screen resolutions. I've spoken a lot about my header so far, so won't go into much more detail.

But particularly with areas such as the guests page and the two bordered lists on the landing page - these are elements placed next to each other on larger screen sizes, but I had to put them into a single column, one above the other on smaller screens in order to make them viewable.

This wasn't too difficult on the bordered lists on the landing page, however when it came to the guests page I did struggle to some extent because the items were all in a cenered col-12 on the larger screens, but because of this it was really difficult to center (and I couldn't workout how best to divide up the col-12 so they were all in seperate columns on larger screens).

Eventually I had to hide the guest cards on smaller screens and replace them with a new row where each had their own col-12 that was only visible on small screens.

My website has been deployed via Github Pages. In order to deploy the project in this way, I took the following steps:

1. Created Github repository
2. Wrote Code in Gitpod workspace
3. Comitted Code to Github (finished code is on Master Branch)
4. In Github repository, selected the settings option
5. On the settings page, scrolled down to the Github Pages section
6. In the Github Pages section, went to 'Sources', selected 'Master Branch' from the dropdown menu
7. After doing this, Github Paged generates a link to the deployed site (This is at the top of the page, but I'm also copying it here https://ryanwatson1991.github.io/words-pictures-msp1/)

Text and Images on Guests page taken primarily from Comixology.com with the exception of:

• Rachel Smythe
• Hannah Blumenreich
• Uru-chan

• Header images (class ch1 & ch2) drawn by Jenny Kirkham based on a comic book script written by me (Ryan Watson)
• Landing page images (class ) drawn by Matt Creswell
• Guest page images taken from creator pages on Comixology.com with the exception of:
  • Rachel Smythe
  • Hannah Blumenreich
  • Uru-chan

I recieved inspiration and assistance for the code in this project from the following sources (see comments in project for details on instances where where solutions were more directly used):

• Bootstrap
• Code Institute
• W3schools
• Stack Overflow
• Bestcssbuttongenerator
• Sitepoint
• Adobe Color Wheel

I also recieved inspiration for this content and organisation of this content from a number of comic convention websites. These are listed fully below, but as previously mentioned content and the way it is arranged was heavily inspired by Thought Bubble (though I think the only time I looked directly at their code through devtools was when struggling with placing my navlinks either side of the logo in my header - I ended up going with a different solution because of the two header images I had used on my page).

The full list of sites used for inspiration is:

• Thought Bubble
• Lakes International Comic Art Festival
• Glasgow Comic Convention
• Newcastle Film & Comic Convention
• Emerald City Comic Convention
• Comic Con International: San Diego