1.

1 Purpose:
The objective of the software design specification (SDS) is to ensure that the final outputted
software product meets the requirements of the end customer, i.e. functions as expected, is
reliable, is easy to use, does not demand inordinate efforts to train staff in its use, etc..
Specifically, the software design specification is a description of the software components and
sub-systems to be provided as part of the product.

1.2 Document Conventions:

The writing format of our document is that we will use times new roman font style 12 for regular
and 16 font style of headings etc.

1.3 Intended Audience and Reading Suggestions:

This document is intended for multiple readers, such as users, testers and developers. This
document contains the introduction, overall description, external interface requirements, system
features and other non functional requirements. The readers of this document can get the idea
how the website works, and how many different ideas are implemented. For every user, the most
ideal order to read the document is to start from the introduction.

1.4 Product Scope:

Myanimelist.net was created for the fans of anime, manga and light novels. This website gives
the users access to all kinds information such as when will an anime be adapted, or when will it
end, with detailed information about the staff behind the anime. It keeps the users updated by
giving them notifications regarding their favorite anime/manga/light novels. This website was
developed to run on both Windows, IOS, Android, Mac OS X.

1.5 What this document will have:

This document will have system architecture, description of components, UI designs, UML (class
diagram, object diagram, state chart diagram, activity diagram, sequence diagram, collaboration diagram,
use-case diagram, deployment diagram and component diagram).
 Section 2
System Architecture Description

2.1 Section Overview:

2.1.1 Section Overview:

In this section, summaries of all the contents of this sections are provided.

2.1.2 General Constraints:

Certain restrictions/constraints that might have a significant impact on the system
are to be described in this section. For example, hardware and software
environments, interface requirements, external data representations, performance
requirements, network requirements, etc.

2.1.3 Data Design:

All the necessary information about the structure of database will be described in
this section.

2.1.4 Program Structure:

The selected architectural models and all the major components are described
(including diagrams).

2.1.5 Alternatives Considered:

Any alternative architectural model that has been selected will have to be justified.

2.2 General Constraints:

Myanimelist.net is developed on HTML, CSS and JavaScript. There can be some constraints
when using CSS and HTML together. When using HTML, there are many nested tags, so the
code has to be thoroughly checked and debugged. The browser needs an updated version of
HTML so the website can function smoothly, to do that, HTML version needs to be updated.
2.3 Data Design:
2.4 Program Structure:

Section 3

Detailed description of components

Identification: Google Analytics

o Type: API
o Purpose: It tracks and reports website traffic in depth.
o Function: Analyze in-depth details about the visitors on website.
o Subordinates:--------------
o Dependencies: Traffic location will be dependent on google maps.
o Interface:--------------
o Resources:--------------
o Processing:-------------
o Data: Google analytics API data will be saved as integer in our database.
Identification: Google Font API
o Type: API
o Purpose: High-quality open source font files that can be used on web designs
easily.
o Function: Custom suitable fonts which can interchange with devices.
o Subordinates:-----------
o Dependencies: -------------------
o Interface:--------------
o Resources:--------------
o Processing:-------------
o Data: Our database will save the strings with font number which will change
when it will get connection from Google Font service to display.

Identification: Twitter Widget

o Type: API
o Purpose: New updates regarding anime, manga etc. are tweeted to update all the
users.
o Function: It is a microblogging system that allows us to send and receive short
posts called tweets.
o Subordinates:-----------
o Dependencies: Java libraries for connection and forming the widget.
o Interface:--------------
o Resources:--------------
o Processing:-------------
o Data: Tweets contain specific keywords and stream this directly into our database

User Interface Design

Section Overview:
UI:
The UI (User Interface) is basically the series of screens, pages, and visual elements like buttons
and icons that enable the person to interact with the website or any other software in a nutshell
we could call it “Human-computer interactions” which includes the display screens and
appearance of a desktop.
Interface Design Rules:-
They are the conventions and the standards of the product. There are approximately ten guidelines or
rules to make a website.

 Visibility of system status:

Users should be informed of system operations with highly visible status and easy to understand
displayed on the desktop within a reasonable amount of time.

 Match between system and the real world:

Designers should make the language and the concepts like the mirror which users would find in
the real world based on the target audience, presenting the information in logical order and
summate it on users expectations derived from their real world experiences will make the systems
easier to use.

 User Control Freedom:

Offer users the digital space where undoing and redoing previous actions are possible.

 Consistency and standards:

Designers should ensure that the both the graphic elements and terminologies act similar for
example if a icon shows one concept should not represent different category on different screen.

 Error Prevention:
Designers should make the potential errors minimum as users do not like it.

 Recognition rather than recall:

Recognizing the information is better than recalling it so designers should make the UI easier for
users, whenever user want some information they do not have to recall it but to only recognize it
for example if test has the MCQS rather than short answer questions, it is easy to do MCQS
because we just have to recall the memory than to recall it.

 Flexibility and efficiency of use:

This can be achieved by using abbreviations, function keys, hidden commands and macro
facilities to make the system flexible and reliable so users should customize the interface
according to their needs to take frequent actions.

 Aesthetic and minimalist design:

To make the webpage aesthetic, display must be reduced to only the necessary components for
the current tasks whilst providing clearly visible and unambiguous means of navigating to other
content.
  Help users recognize, diagnose and recover from errors:
Designers should assume that users cannot understand the technical terminology, so, the error
messages should be expressed in human language so users can understand it.

 Help and documentation:

Documentation is necessary if the users are stuck somewhere and want the solution then
documentation must be located and written in a way so that user can find the solution to the issue.

GUI Components
The graphical user components is a form of user interface that allows users to interact with electronic
devices through graphical icons and audio indicator. There are two types of GUI components such as
buttons, icons, label and text field and containers such as frame, flow layout, grid layout and panel.

Detailed description
In that we provide detailed description about the user interface for example the features website has login,
signup, search etc and the GUI (Graphical user interface) includes screens of features or functions.

Detailed Description

Login
Website’s feature like an entrance, users having the account on MyAnime.list should have to put the
Username and Password to access MyAnime.list and if use does not remember their password can use the
forgot password or username button and the new username or password will be sent to his/her via email
by filling the right information, they also can login with their apple, google, twitter and facebook
account.

Login:-
ForgotUsername:-

ForgotPassword:-
SignUp
New user have to create a account on MyAnime.list it will ask some information about your email
username password which should be strong having numbers and special characters, by giving the all
information on form you have to agree the terms and conditions and just press the create account button it
will automatically generate your separate account or you can also signup with your apple, google, twitter
and facebook account if a user does not want new account.

Search :-
User can search whatever he/she wants like manga, anime, characters and people for example if a user
search “Anime” it will show four lists one of Anime in anime, Anime in manga, Anime in characters,
Anime in people and it will also show the related information about what the user searched for example if
a user searches “Anime” it will show the news articles, featured articles, forum topics and clubs related to
anime.
Watch Anime
By pressing watch Anime it will show two options to the users the episode videos and promotional
videos, episode videos are the seasons and series available in specific countries of anime and promotional
videos are available in almost every country.
Episode videos:-

Promotional videos:-
Ranking:-
User can view the all anime ranking which is updated twice a day and users can also see, that, on what
basis anime shows are ranked and user can also see separate ranking of Anime shows, movies, series etc.

Statistics
User can also see their stats of anime and manga for example days, mean score, watching, plan to watch,
on-hold, completed, dropped, episodes, rewatched and total entries.
Favorite
User can also create their favorite anime list of anime series, manga series their characters and people.
Read manga
User can also read manga available in English, Japanese and many more languages by purchasing them
from manga store for lifetime access.
 Section 8
Appendices

Class Diagram:
Object Diagram:
State Chart Diagram:

Activity Diagram:

Login:
Sign Up:

Search:

Favorite:
Rank:

Watch Anime:

Read Manga:
Statistics:

Sequence Diagram:
Login:

Sign Up:
Search:

Favorite:
Rate:

Read Manga:

Watch Anime:
Statistics:

Collaboration Diagram:
Login:

Sign Up:
Search:
Favorite:
Rank:
Watch Anime:
Read Manga:
Statistics:
Use Case Diagram:
Component Diagram:
Deployment Diagram:
State chart Diagram: