D4DME – Filtering

As a recipe site it was important that we created a filter that would allow the users to narrow down their choices and find their recipe’s easier. We decided to base our filters on 4 different selections.

submit

Screenshot of the submit php.

Screen Shot 2015-04-20 at 09.16.51

A lot of the work was done by Verity, however she was able to comment on each section to help explain her actions clearer to me and therefore I was able to understand it.

Overall the filtering process took time and a lot of trial and errors. It eventually became functional and we were able to see it in action.

Screen Shot 2015-04-20 at 09.23.13

D4DME – Webpage Wireframe and Mockup Design

To begin the design of the webpage I had to wireframe the design using Photoshop. In order to understand how to do it I looked up video tutorials on Lynda that taught me it.

http://www.lynda.com/Photoshop-tutorials/Photoshop-Web-Design/105368-2.html

The video proved to be highly useful as it allowed me to understand the importance of wireframing and how it could be done.

From there I went on to designing my webpage using wireframes on Photoshop. Below are screenshots of how I did it:

Screen Shot 2015-02-23 at 18.37.19

Screen Shot 2015-02-23 at 18.37.54

The wireframe experience let met understand the importance of laying out the webpage so that they are positioned consistently. It would also be handy when measuring the pixels and scale of the later boxes in CSS.

I then went on to creating a mockup design by adding colours and drop shadows to let me get a better idea on how it would look when designing with CSS.

Screen Shot 2015-02-23 at 18.39.53

Screen Shot 2015-02-23 at 18.45.08

Screen Shot 2015-02-23 at 18.52.59

Screen Shot 2015-02-23 at 19.47.28

Screen Shot 2015-02-23 at 21.35.38

Screen Shot 2015-02-24 at 14.00.42

After debating a lot about the colour and theme of the design we decided to change it to a more blackboard design.

Screen Shot 2015-03-09 at 16.42.50

Overall this experiment has taught me a lot about the importance of preparation when looking design a webpage. The techniques were very useful to pickup and will prove to be handy in the future.

D4DME – WebApp Design Research

This post is about how I researched into the web app designs. To begin with I wanted to get an idea of the styles that were out there and which one would suit our idea. I wanted to make sure the design was quite modern and in trend.

I initially looked into Material Design which is the upcoming design platform for Google. It is a design that rationalises space, is bold and has continuity.

materialdesign_introduction

I thought that this theme would be ideal for our idea as it is very bold and clean. This allows the audiences to be visually attracted to the contents and avoid complexity.

My next step for the research was to look at live websites as well as sample websites using Pinterest.

11005586_10153207235459954_830437064_n

11006145_10153207235434954_1544682373_n

Once we had an idea about the layout we’d like our website to be then we’d began looking at the theme of it. We chose the blackboard style theme.

Below are some glyph icons I found from Pinterest for inspiration.

11016655_10153207235449954_74622755_n (1)

In conclusion to the research I was able to share my findings with my team members whom were happy to accept and agree with my suggestions. It was important that the WebApp design research was taken into consideration as they would be used to build around our php later on.

D4DME – Sorting with PHP

At today’s workshop we were given an insight on how to make a webpage sort out particular contents. These are commonly used within social networking website, that will allow us to view the most recent contents. For example; News Feed on Facebook. We then added a an if statement that would show an error message if the wrong information was inputted.

Below are screenshots on how I achieved this:

Screen Shot 2015-01-13 at 11.28.58

Screen Shot 2015-01-13 at 11.29.11

Screen Shot 2015-01-13 at 11.29.20

Screen Shot 2015-01-13 at 11.32.06

Adding the error message

Screen Shot 2015-01-13 at 11.39.19

The sorting page was largely based around if statements. This was due to it determining the information that has been inputted and that “if” the information was not accepted or recognise then it would send out an error.

This workshop has allowed me to really understand the functionalities of sorting and how it used to create interactive web pages. I’ll be keeping this in mind when I work on my new project as we will be wanting upload the latest recipes in order.

D4DME – Login and Logout using PHP

At today’s workshop we were taught how to create and function a login page using PHP. A login page is an essential part of majority webpages as it allows users to connect with the webpage and gain access to the features available for members only.

Below are screenshots of how I created it:

Login Code Screenshot

Login Code Screenshot 2

Login Example Screenshot

Screen Shot 2015-01-22 at 17.48.22

Screen Shot 2015-01-22 at 17.48.36

Screen Shot Welcome Login

Logged In

Screen Shot When Logged In

Logged Out

Screen Shot When Logged Out

As you can see the process in creating a functioning login page wasn’t too complicated. However it did take a few trial and errors to get the hang of writing in php.

Conclusion:

The experience allowed me to really have an insight on how other websites create their own login page. It showed me the process to create it remains very much the same but the contents can differ depending on what it is designed for.I hope that from here I’ll be confident enough to create my own login page when needed.

Group Overview

My first thoughts about a collaborative project really excited me as I am always keen on learning and understanding how other people approach designs. When I first spoke with my group mates I knew that it wouldn’t be a problem in regards to work efforts as we all seemed very keen to make it happen.

After our first group meeting (which I blogged about earlier: https://chaceteera.wordpress.com/2015/02/18/group-meeting/) I was left with a positive impression about our group. This was due to our approach towards the idea and how we were all able to come to an agreement about the project as well as the individual roles each of us had. This was also a positive as we were able to identify the strengths and weaknesses between each of us and therefore allowed us to decide which role was most suitable.

Communication was fairly easy as we set up a group chat on Facebook in which we used to arrange our first meeting. The chat would go on to be a tool that we used to share our ongoing works and ideas so that we were all up to date.

Overall I’m very pleased and confident that our group will be able to work well and create a successful web app.