Endure to the End Website

My first official website! It was hard coded, it increased my HTML, and CSS skills. The teacher asked me and two other students to specifically create a responsive website. I have a little experience in working on responsive websites, so it was a great opportunity for me! The first step was deciding what I want my website to be about.

Research

screen-shot-2016-10-07-at-9-41-17-amscreen-shot-2016-10-07-at-9-40-57-amscreen-shot-2016-10-07-at-9-44-56-am

I decided that for this website I wanted to create a religious scripture study site. From there I determined who my audience was and researched how I could specifically target that audience. My research included comparing other church websites and blogs.

Wireframes

960_grid_12_col-recovered

 

960_grid_24

 

The next step in the process was creating a wireframe base on the research that I conducted. These are just two examples of wireframes I built. I wanted to make a similar design to LDS.org so that people could relate and recognize the purpose of the site.

Photoshop Mock-up

leahheiner_layout leahheiner_layout2

After deciding colors, fonts, and designs, I built my first photoshop mock-up of the website. I used the feedback from my peers and teacher in my design. After deciding what design was the best, I started mock-ups, one for desktop, one for responsive, and another for tablet size.

Final Website

screen-shot-2016-10-07-at-10-52-40-am

Although this post makes the process of creating a website seem short, it was very long. Between determining what colors and fonts appealed to my audience and the responsive design, it took a lot of work to finish. Through the whole process I worked with two other students who were also making responsive designs. Together we critiqued each others work and helped each other develop our websites.

leahcreating.com

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s